Diecezjalna telewizja internetowa Szczęśliwa 7-ka wartościowych skrawków kodu z dokumentacji jQuery


Jak przyspieszyć stronę w WordPressie?


18 września 2014, 14:32 | 19 komentarzy | 16 094

Powolne wczytywanie strony internetowej to zmora każdego, kto w internecie spędza kawałek swojego życia. WordPress choć to bardzo dobry, prosty w obsłudze, posiadający wiele wtyczek system uznawany jest za powolną kobyłę. Jest kilka sposobów, które pomogą przyspieszyć ładowanie witryny.

Wiesz co najbardziej denerwuje każdego bez wyjątków odbiorcę internetu? To:

loading-icon

Skoro da się coś zrobić z wolno ładującym się WordPressem to zdecydowanie warto podjąć ten trud. Co prawda posiadamy coraz szybsze stałe łącza, nie zapominajmy jednak o tym, że korzystamy z sieci przy pomocy smartfonów i tabletów. Jeszcze pół biedy, jeśli posiadamy abonament z internetem albo kartę pre-paidową. Wtedy strony otwierają się zanim zdążymy przywalić w słup idąc chodnikiem z oczami wlepionymi w ekran. Gorzej jak złapiemy Wi-Fi, z którego nie chcemy skorzystać. Albo gdy już usiłujemy z niego skorzystać, a Wi-Fi za bardzo nie chce.

Temat prędkości internetu jest bardzo ważny ale zostawmy go. Jeśli czujesz niedosyt, zajrzyj tu. A teraz zapraszam Cię do lektury 15 kroków pozwalających Ci przyspieszyć Twoją stronę w WordPressie.

Przed wykonywaniem poniższych kroków koniecznie sprawdź aktualną prędkość swojej strony przy pomocy jednego z dostępnych darmowych narzędzi on-line. Możesz np. skorzystać z Pingdoma.

1. Mądrze wybierz serwer na którym jest umieszczona strona

Rozsądnie wybrany hosting to podstawa szybko działającej strony. O ile domenę możesz wybrać tam gdzie taniej, bo ona odpowiada tylko za adres Twojej strony w sieci, o tyle serwer wybierz po wcześniejszym zapoznaniu się z ofertą rynkową. Konkurencja jest duża, jeśli cena nie gra roli, a oczekujesz dużej przestrzeni na serwerze i dobrego supportu (także telefonicznego) to polecam nazwa.pl lub Home ale jeśli nie przeszkadza Ci kontakt z supportem drogą mailową to Thecamels jest też niezły. Tip ode mnie: zanim podejmiesz decyzję zapoznaj się ze sposobem rozliczania, to co korzystne w ciągu pierwszego roku może kosztować znacznie więcej przy przedłużeniu. Warto się na takie koszty nastawiać lub poszukać alternatywy.

2. Wybierz szybko ładujący się szablon

Jeśli nosisz się z zamiarem zmiany szablonu swojej strony niech jednym z kryterium wyboru będzie prędkość. Zazwyczaj przed zakupem masz możliwość sprawdzenia wersji demo. Narzędzie znasz więc nie zapomnij tego zrobić.

3. Wyłącz nieużywane wtyczki

Wejdź do wtyczek i sprawdź ile z nich jest nieaktywnych. Jeśli nie planujesz ich używać zwyczajnie je usuń. Przecież możesz je zawsze ponownie zainstalować. Jak już zrobiłeś czystki to sprawdź czy spośród włączonych wtyczek nie masz tam takich, których nie potrzebujesz. Jeśli znalazłeś takie, zrób z nimi porządek. Każda wtyczka to najczęściej kilka albo kilkanaście plików PHP załadowanych do Twojego szablonu, dodatkowe style CSS oraz kod javascript. Bądź minimalistą. Nie potrzebujesz – wyrzuć.

4. Sprawdź, które wtyczki najbardziej obciążają Twoją stronę

Pobierz wtyczkę P3 (Plugin Performance Profiler) i przeskanuj swoją stronę w poszukiwaniu tych wtyczek, które najbardziej ją obciążają. U mnie okazało się przetworzenie kodu wtyczek na stronie zajmuje nieco ponad pół sekundy, więc niby niewiele ale po usunięciu zbędnych wtyczek i zamianie tych, które mocno spowalniają witrynę na lżejsze odpowiedniki udało się trochę zyskać. Nie zapomnij po skończeniu używania P3 usunąć ją z wtyczek jeśli nie planujesz później z niej korzystać.

5. Skompresuj grafikę

Większość stron wczytuje się wolno ze względu na przeładowanie grafiką albo brakiem jej optymalizacji. A wystarczy przygotowując zdjęcie przepuścić je przez opcję Photoshopa „Save for Web & Devices” i wybrać Quality mniejsze niż 100%. Czy różnica w jakości zdjęcia będzie znaczna? Sami sprawdźcie. Pierwsza fotka jest zapisana na 100%, druga na 70%.

test-kompresji

Ja widzę różnicę szczególnie przy krawędziach, ale umówmy się – jest ona tak mało widoczna, że w zupełności to delikatne rozmycie nie przeszkadza. Jeśli przeszkadza – przy optymalizacji wybierz 80%. Jest jeszcze jedna zasadnicza różnica przy optymalizowaniu zdjęć, a jest nią ich rozmiar. Pierwsze zdjęcie, które Tobie pokazałem waży 93,7 KB a drugie, bo zmniejszeniu jakości do 70% waży 35,6 KB czyli prawie 3 razy mniej. Dlatego właśnie warto o tym pamiętać przygotowując stronę. Optymalizacja zdjęć wymaga wyrobienia przyzwyczajenia, które owocuje w przyszłości.

I jeszcze jedno dla osób które mają strony, zdjęcia na witrynie liczą w tysiącach  i nie dadzą rady wszystkich teraz zoptymalizować. Słyszałem o wtyczce WP Smush.it która sama optymalizuje grafikę w Bibliotece obrazów. Nie zaszkodzi sprawdzić jak działa – po instalacji nie zapomnij wejść do ustawień ukrytych w Media -> Bulk Smuch.it. Ja zainstalowałem ją wczoraj. Widzisz różnicę patrząc na grafiki na moim blogu?

6. Doprecyzuj rozmiary obrazów wrzucanych na stronę

Bardzo częstym błędem jest umieszczanie za dużych zdjęć na witryny. Nawet jeśli zdjęcie wyświetlane jest miniaturowe na stronie, nie znaczy to, że takie jest wgrywane na serwer. Żeby nie sięgać daleko pamięcią, nawet dziś podczas porannej blogoprasówki znalazłem zdjęcie wielkości prawie 8000px na 4000px na jednym z blogów. Foto na stronie po wczytaniu wyglądało poprawnie. Wyświetlało się w rozmiarze blisko 10 razy mniejszym. Skokowe wczytywanie (pasek po pasku) kazało przyjrzeć się mu bliżej i faktycznie bloger umieścił fotografię w tej wielkości jaka wyszła z aparatu – bez modyfikacji wielkości. Strona musiała wczytać tą ogromną fotografię, a potem miała za zadanie zmniejszyć ją do szerokości 770px. Okazało się że takich fotografii na stronie były 2 i każda ważyła prawie 10 MB w związku z czym strona ładowała się 19 sekund. A mogła 3-4 sekundy.

7. Używaj dobrej wtyczki do cache’owania

Dla niewtajemniczonych  kilka słów wyjaśnienia. Cache’owanie polega na zapisywanie przez przeglądarkę w pamięci podręcznej różnego rodzaju plików (HTML, zdjęć, ilustracji i innych elementów strony) na dysku lokalnym użytkownika podczas pierwszej wizyty na stronie. Taki zabieg służy szybszemu ponownemu uruchomieniu witryny, ponieważ dane częściowo zostaną pobrane z dysku twardego, a nie z Internetu.

Podstawą do przyspieszenia strony obciążonej dużym ruchem jest odpowiednia wtyczka obsługująca cache. Najprostszym i moim zdaniem najlepszym rozwiązaniem jest zainstalowanie wtyczki W3 Total Cache.

8. Wyłącz pingbacki i trackbacki

Pingbacki i trackbacki to stosowany w WordPressie system automatycznego powiadamiania właściciela bloga o wpisie, który się do niego odnosi na innym blogu. Jest to ciekawa funkcja, bo jeśli ktoś nas podlinkuje u siebie to można w szybki sposób zareagować i np. podziękować mu za polecenie. Czasami się przydaje ale niestety spowalnia działanie WordPressa. Zachęcam więc do jej wyłączenia w Ustawienia -> Dyskusja. Alternatywą dla tego typu monitorowania nowych wpisów nawiązujących do Twojej strony w WordPressie jest SentiOne, który dla blogerów jest za darmo. Od kilku tygodni testuję ten system i całkiem nieźle się sprawdza.

9. Kompresuj pliki JS i CSS

Osobiście do tej metody nie jestem przekonany ale wiem że wiele osób ją stosuje, dlatego postanowiłem o niej wspomnieć. Przygotowując pliki JS i CSS stawiam na przejrzystość, dlatego wygodniej mi pisać nie w jednej linii ale w odstępach. Kompresja tych plików ma na celu usunięcie enterów i spacji tam gdzie są one zbędne. Po kompresji otrzymujemy kod pisany ciągiem nad którym ciężko zapanować. Późniejsza edycja czegokolwiek w JS lub CSS wymaga albo więcej czasu albo wcześniejszej dekompresji. Jeśli wiesz, że nie będziesz przez długi czas nic zmieniał na stronie – kompresuj do woli. W sieci jest wiele narzędzi, możesz skorzystać chociażby z Online YUI Compressora.

Słyszałem kilka dobrych słów o wtyczce Better WordPress Minify która automatycznie kompresuje pliki JS i CSS. Jeśli chcesz, spróbuj jak działa.

10. Przenieś wywołanie pliku CSS maksymalnie na górę, a pliku JS do stopki

Przeglądarka otwierając stronę internetową czyta kod od góry do dołu. Dlatego właśnie kolejność umieszczania poszczególnych elementów jest taka ważna. Plik CSS odpowiada za większość elementów graficznych na witrynie, a także za układ (wielkość nagłówka, ilość kolumn w części zawierającej treść, szerokość tych kolumn) dlatego powinien być na górze. Wywołanie pliku JS powinno być z kolei jak najniżej ponieważ wtedy JavaScript przetwarzany jest dopiero po załadowaniu wszystkich elementów strony. Jest to często najlepsze rozwiązanie, ale jak to w życiu bywa są różne przypadki i czasami pliki JS należy wywołać wcześniej.

11. Zaktualizuj WordPressa do najnowszej wersji

Dobrze jest posiadać aktualną wersję WordPressa. Zanim zabierzesz się za aktualizację muszę Cię powstrzymać. Nie rób tego pochopnie! Wcześniej zrób kopię zapasową plików z serwera oraz kopię bazy danych aby w razie czego odzyskać szybko swoją witrynę. Kiedy już posiadasz backup wejdź na http://pl.wordpress.org/ i upewnij się że najwcześniejsza wersja WP do pobrania jest taka jak ta, którą zgłasza w Kokpicie Twój WordPress. Mówię to z powodu ostatniej sytuacji – niedopracowania nowej wersji 4.0 i puszczenia informacji o tym, że okrągła wersja już jest dostępna. Radośnie zainstalowałem ją na swoim blogu po czym okazało się, że muszę wracać do 3.9.2 bo nie działała funkcjonalność ikony wpisu, której używam w każdym tekście. Obecnie widzę, że wersja 4.0 jest dostępna więc jeśli czujesz się na siłach żeby aktualizować swoją witrynę i nie obawiasz się ewentualnych problemów, które mogą w trakcie aktualizacji wyniknąć to zakasaj rękawy i aktualizuj swoją stronę. W przeciwnym wypadku zleć to zadanie specjaliście.

12. Dostosuj stronę startową

Ostatnio zgłosił się do mnie znajomy fotograf z prośbą o przyjrzenie się stronie jego firmy. Ponoć zaczęła bardzo zamulać. Wszedłem i zobaczyłem ponad setkę zdjęć, które usiłowały się wyświetlić jedno pod drugim. Fotografie nie były duże jednak ich ilość mocno spowolniła witrynę. Poradziłem skorzystać przy tej okazji nie ze stron ale z funkcjonalności wpisów. Po przeniesieniu treści późniejsze ustawienie wyświetlania 5-6 wpisów zamiast domyślnych 10-ciu (można to zmienić w Ustawieniach -> Czytanie) załatwiło częściowo sprawę. Potem warto jeszcze skorzystać z tagu <!–more–> aby wyświetlić przykładowo jedno ładne zdjęcie i pod odnośnikiem więcej” pokazać wszystkie pozostałe.

 13. Zoptymalizuj bazę danych

Optymalizacja bazy danych powinna być takim nawykiem jak cotygodniowe sprzątanie mieszkania czy sezonowa zmiana opon w aucie. Tego typu działanie pomaga zaoszczędzić miejsce przeznaczone na bazę MySQL (szczególnie przydatne jeśli dostawca hostingu daje nam ograniczoną w MB przestrzeń na bazę danych) oraz przyspieszy komunikację pomiędzy stroną i bazą. Optymalizować bazę możesz ręcznie przy użyciu panelu phpMyAdmin lub za pomocą dowolnej wtyczki: WP-DBManager lub WP-Optimize. Pierwsza umożliwia optymalizację, naprawę i wykonanie kopii zapasowej bazy danych. Twórcy wtyczki zalecają optymalizację przy jej pomocy raz w miesiącu, ale wiele zależy od wielkości witryny i częstotliwości jej aktualizacji. Druga zawiera narzędzia przydatne do jej czyszczenia i optymalizacji, a także pomoże usunąć komentarze, które znajdują się w spamie oraz opróżni za nas kosz.

Pamiętaj żeby przed wszelkimi operacjami na bazie danych posiadać kopię zapasową.

14. Zdjęcia w komentarzach

Może i to mała pierdoła na właśnie takie drobiazgi składa się prędkość ładowania strony. Być może słyszeliście o tym, że zdjęcia do komentarzy na stronach ładowane są przy pomocy Gravatara. Chodzi o zsynchronizowanie używanego w komentarzach adresu mailowego z wgranym zdjęciem i stworzenie wizytówkowego zdjęcia, która będzie wyświetlać się na wielu komentowanych przez nas stronach. Wszystko super, tylko nie wszyscy posiadają tego typu zdjęcia, a jeśli ktoś takowego nie ma, wtedy wraz z nowym komentarzem przywita nas znany wszystkim Mistery Man:

Jeśli zależy Ci na prędkości ładowania stron pojedynczego wpisu, wtedy możesz w Ustawieniach -> Dyskusji wybrać na dole jako domyślny awatar opcję „pusty”. Ja postanowiłem skorzystać jeszcze z innego tricku i każdy kto napisze komentarz pod moim tekstem a nie będzie miał awatara, zobaczy awatara wybranego przeze mnie kojarzącego się z dawnym logo mojego bloga.

15. Ustawienie limitu zachowywania poprzednich wersji wpisu

Dotarłeś do ostatniego kroku. Gratulacje!

Ten wpis pisałem dla Ciebie na raty przez kilka dni. Tworząc szkic WordPress co chwilę zapisywał automatycznie szkic, a także kończąc pracę nad wpisem zapisywałem go ręcznie. W sumie powstało 13 wersji wpisu, które mogę w każdej chwili odzyskać. Jest to przydatna funkcja bo czasami urwane połączenie z internetem sprawia że publikujemy wpis zawierający tylko pierwszy akapit, a resztę musimy właśnie odzyskiwać z poprzednich wersji. Niejednokrotnie dzięki funkcji automatycznego zapisu mogłem uratować kilka godzin ciężkiej pracy nad tekstem.

Jednak 13 wersji? Nie potrzebuję tylu kopii zapasowych, a w momencie publikacji wpisów praktycznie nie potrzebuję ich wcale. Mógłbym usuwać je ręcznie, ale z pomocą przychodzi wtyczka Revision Control która daje możliwość ustawienia ilości zapamiętanych wersji pisanego szkicu. Ja ustawiłem dla pewności na 4 wersje i dzięki temu moja strona nie przechowuje dziesiątków wersji zapisywanych w trakcie pisania. Jeśli piszemy dużo to jedna wtyczka więcej nie będzie takim dużym obciążeniem wobec dziesiątków poprzednich wersji wpisów, które po publikacji nie przydadzą się na nic nikomu.

Podsumowanie

Jestem po ostatecznych testach prędkości mojego bloga. Co prawda większość z tych kroków wprowadzałem w życie na bieżąco więc nie spodziewałem się diametralnego przyspieszenia. Moja witryna waży 1 MB (o 300 KB udało się ją odchudzić). Baza danych została odchudzona o kolejne 23 MB. Osiągnąłem bardzo ładny wynik – moja witryna ładuje się w 3,5 sekundy. Pingdom powiedział mi, że strona główna mojego bloga jest szybsza niż 46% testowanych przy pomocy tego narzędzia witryn.

Jestem pewien, że w przypadku Twojej strony można osiągnąć podobny albo lepszy wynik. Jeśli potrzebujesz pomocy w przyspieszeniu WordPressa  – zapraszam Cię do kontaktu lub pod nr tel. podanym na stronie Create24.

Jeśli szukasz podobnych wyczerpujących porad w sieci to polecam serwis 500sekund.pl, który zawiera minikursy z konkretnymi wskazówkami dotyczącymi stron działających na WordPressie. Instrukcje krok po kroku są przygotowywane w taki sposób, żeby ktoś kto nie zna HTMLa i CSSa mógł zmodyfikować swoją stronę. Polecam:

500-sekund-fb-logo

photo credit: ZERGE_VIOLATOR via photopin cc oraz purplemattfish via photopin cc

Będzie mi niezmiernie miło, jeśli dołączysz do mnie na Facebooku!

Kamil Lipiński – mąż i ojciec, przedsiębiorca, webdeveloper, bloger, człowiek, który ma wielką nadzieję na to, że można się czegoś sensownego o WordPressie dowiedzieć w 500 sekund. Wierzący (bynajmniej nie w technologię) geek.

Subscribe without commenting




Spelling error report

The following text will be sent to our editors: