panelarrow

Moje3po3

Blog: opowiadania, reportaże, proza życia

lupa_1

Poradnik jak przyśpieszyć ładowanie strony? – część II

| 2 Comments

 

Jak przyśpieszyć ładowanie strony poprzez optymalizację zdjęć?

Osobiście nie mam za dużo czasu i cierpliwości, więc ułatwiłam sobie ten proces optymalizacji zdjęć. Pierwsze wgrałam wtyczkę Clean Up Images. Wtyczka ta usunęła zdjęcia nieużywane, z których zrezygnowałam w trakcie pisania blogu, lub zmieniłam, natychmiast odchudziła bazę. Przy okazji wyświetlała zdjęcia wraz z wymiarem, więc wyłapałam te największe i po kolei optymalizowałam. W ten sposób nie dość, że zamieniłam na odpowiedni format to wyłapałam wielkie i ciężkie zdjęcia, których niektóre wyszukiwarki nie ładują. Np. znalazłam zdjęcia 1,5 MB, a jak powszechnie wiadomo Yahoo nie wyświetla zdjęć cięższych niż 1MB.

Przy zmniejszeniu zdjęć, pamiętaj, aby sprawdzić jego wagę, bo redukcja rozmiaru nie zawsze oznacza zmniejszenie ciężaru. Na próbę wytnij coś z obrazka o niskiej wadze i zapisz w Paint zobaczysz, że może ważyć nawet 5 razy tyle, mimo że jest maluśki. Zmień format zapisu z ping na jpg, a sam stwierdzisz, że ten sam rozmiar, a waga inna. Optymalizację zdjęć rób z głową, aby nie stracić zbyt wiele na jakości!

Jedno jest pewne bardzo duży wpływ na czas wczytywania się strony ma ilość zdjęć, oraz sam format plików graficznych zastosowanych w szablonie bloga. Warto je przejrzeć i tam, gdzie to możliwe zapisać grafiki w formacie JPG lub GIF zamiast PNG. Druga sprawa można ograniczyć ilość fotek np. ja wyrzuciłam sporo zdjęć z serii. Jeżeli masz 50 odcinków w danym cyklu i w każdym inny obrazek to robi różnicę. Przy okazji czytelnik po ikonkach postów z czasem kojarzy np. kolejne odcinki opowiadania, więc chyba takie ujednolicenie przynosi więcej korzyści.

 

lupa_1

Po pozbyciu się zbędnych zdjęć i odciążeniu tych największych, wgrana została wtyczka Smush it! – ona odchudziła wszystko jeszcze bardziej i każde nowe zdjęcie, jakie pojawi się na stronie też obrobi, wiec nie muszę się zbytnio martwić. Oczywiście na rynku jest dostępnych więcej wtyczek, a nawet programy (najczęściej płatne), które zrobią być może większe cuda, ale ja akurat jestem zadowolona z tej. Pewnie dlatego, że wystarczy zainstalować, najpierw włączyć opcję BulkSmash.it, aby odchudzić zdjęcia w bazie. Później sama pracuje za mnie, sama optymalizuje nowe fotki, a ja nie muszę nic dodatkowo robić.

Jeszcze jedno, jeżeli zainstalujesz wtyczkę Smush it!,  weź pod uwagę, że zdjęcia „za ciężkie” zostaną pominięte. Wszystkie powyżej 1MB nie zostaną odchudzone, dlatego warto manualnie odjąć im wagi.

 

Wtyczki WordPressa 

Pożytecznych wtyczek jest na sieci pełno, wygrywamy tylko te które są nam niezbędne, z czystym sumieniem można sobie darować zbędne bajery.  Za dużo wtyczek nie jest korzystne, warto odciążyć bazę i pousuwać te, których nie używamy. Nieaktywne wtyczki nie są ładowane przez WordPressa, on je tylko szybciutko przegląda na stronie zarządzania wtyczkami, ale tylko przeszukuje pliki pod kątem informacji do wyświetlenia na liście zainstalowanych rozszerzeń (nazwa, autorzy, adres strony). Ja wolę usunąć, po co mają siedzieć na serwerze?

Jeżeli jakaś wtyczka ma aktualizację, to lepiej ją wykonać, bo nowsza wersja nie dość, że ma poprawione błędy, to pewnie jest też „lżejsza”. Nim to zrobisz wykonaj kopię zapasową, bo niektóre aktualizacje, potrafią wyciąć niezły numer i namieszać. Chyba nie chcesz, aby konfliktowały z innymi i wysypały ci stronę?

Ja mam jedną, której aktualizacja nie lubi takiej innej wtyczki i razem rozrabiają. Były ogłoszone 3 aktualizacje, a ja mogę podnieść tylko o 1 wersję wyżej, bo wyższa zmienia mi układ strony, Java script szaleje i na końcu sypie się kesz. Czasem trzeba wybrać, która opcja lepsza! Ja stawiam na kesz, u mnie najcięższa jest Java do archiwum, a ono podoba mi się takie, jakie jest i nie mogę pozwolić, aby Java nieużywana na głównej stronie się tam ładowała. (Z Javą są zawsze problemy, bo próbuje się wepchać, czy jest potrzebna czy nie! Jak nie zrobisz z nią nic to będzie się wgrywać na każdej stronie, bez względu czy strona jej używa.)

 

lupa_1

Oczywiście najprościej zastąpić najcięższe wtyczki nowymi lekkimi, ale nie zawsze chcemy. Korzystnie jest zredukować ilość, czyli wyrzucić, co się da np. zbędne widgety. Jeżeli bierzesz pod uwagę zastosowanie nowych zamienników dla wtyczek, które spowalniają ci stronę to sprawdź, jakie masz aktualne obciążenia. Najprościej zainstaluj Petkę (P3 Plugin Performance Profiler) i po raporcie zorientujesz się, która z wtyczek ma największy (procentowo) wpływ na ładowanie się twojego bloga.

Gdy nagle odkryjesz, że jedna z nich obciąża np. 50% to nie wpadajmy w panikę. Pierwsze to 50% z ogólnego czasu działania zainstalowanych wtyczek, a nie czasu ładowania się strony! Nim wyłączysz lub odinstalujesz wtyczkę, sprawdź ile potrzebowała na wykonanie swoich zadań.  Ja mam jedną obciąża około 80%, ale jest szybka, bo upora się ze wszystkim poniżej 0,03 sekundy.

 

Porządki  w bazie

Po wszystkich zmianach w grafice np. po wymianie zdjęć warto jeszcze raz przejechać wtyczką Clean Up Images, lub jej zamiennik wkracza do roboty i odciążamy bazę danych. Niby zdjęcia nieużywane się nie ładują, ale baza wypchana po brzegi. Nawet, gdy nie masz limitu i nie chodzi o koszt, to gdy w bazie mniej elementów i wszystko poukładane, zawsze szybciej ci się ładuje, korzyści dla czytelnika i ciebie gdy wklejasz kolejne zdjęcie w nowym poście.

W ramach dalsze porządków proponuję wyrzucić niepotrzebne kopie, tworzone podczas edycji. Znów zatrudniamy do tego wtyczki, a co się będziemy męczyć manualnie, jak się sterty nazbierały to szkoda czasu. Obecnie używam Optimize Database, usuwa zbędne kopie, nieużywane tagi, tabele, podaje ile zaoszczędziliśmy miejsca. Dodatkowo mam zainstalowaną wtyczkę Simple Revision Control (zgłasza się ustawieniach w po polsku jako „wersje”), bardzo przydatna rzecz, ustawiasz ile kopi ma tworzyć np. jedną, czy 3, bez tego hamulca WordPress tworzy ich nieskończoną ilość!

 

lupa_1

Na koniec kwesta kesza (pamięć podręczna od ang. cache), dzięki temu część danych  o długim czasie dostępu i niższej przepustowości jest dodatkowo przechowywana w pamięci, co poprawia szybkość dostępu do tych informacji. Może pomóc znów wtyczka np. Hyper Cache, jest prostota, łatwa w konfiguracji i deinstalacji, więc polecam dla początkujących blogerów.

Są też inne dostępne wtyczki np. Super Cache wygeneruje statyczne pliki html zawartości bloga, więc gdy czytelnik będzie powracał na stronę, nie będzie musiał czekać aż wszystkie elementy graficzne znów się załadują. Lepiej poserfować po necie i poczytać, aby wybrać najkorzystniejszą opcję.

Później usuwasz/wyłączasz wtyczki, które już są nie potrzebne. U mnie w pierwszej kolejności wylatuje wyżej wspomniana Petka (P3 Plugin Performance Profiler). Nie powinieneś mieć za dużo wtyczek, bo lepiej się nie obciążać zbędnym balastem. Z resztą nie wszystkie aplikacje na komórkach sobie z nimi dobrze radzą.

Ile powinno być? Tyle ile jest niezbędne dla strony i nic ponadto. Liczbowo? Jedne wtyczki są proste i nie obciążają „nic”, a inne mają rozbudowane skrypty. Pytanie jeszcze kto pisał i czy się popisał. Zalecenia w UK 20-30 wtyczek to bezpieczny limit tutaj, w Ameryce mówią, że poniżej 15.  Większość stron w Anglii ma 16-20, co się da zastępuje się kodami.

Kody też cię interesują? O przyśpieszeniu od strony kodu i innych rzeczach, które redukują czas wczytywania w – Jak przyśpieszyć ładowanie strony część 3

 

 

Udostępnij na:

2 Comments

  1. Nie ma linków do wtyczek i obrazków, może je dożysz?

    • admin

      Tak nie ma, nie umieściłam, gdyż tylko informuję, którą używam obecnie i mi dobrze służy, nowych ciągle przybywa, wszystko się zmienia. Na rynku też sporo jest zamienników. Znaleźć wtyczkę mając tylko nazwę to nie problem, wchodzisz od administratora w „dodaj nową” i wyskakuje cała lista, a na samej górze wtyczka wpisana po nazwie w polu wyszukiwania. Można przeczytać informację, przejść na stronę wtyczki i przemyśleć, czy chcemy ją zainstalować.

      Dzięki za komentarz, pozdrawiam.

      Jagoda

Dodaj komentarz

Required fields are marked *.



*