28 lutego 2017 5min.
Jak zwiększyć szybkość strony WordPress?
WordPress jako jeden z najbardziej popularnych CMS-ów do budowania serwisów internetowych. Zyskał popularność dzięki prostemu i przejrzystemu interfejsowi oraz temu, że jest darmowy. Dużym atutem tej platformy jest fakt, że ciągle jest rozwijana oraz posiada bardzo dużo ciekawych dodatków, pluginów czy szablonów. Dobrze jest już na samym początku budowania strony czy bloga zadbać o jego optymalizację. Pewne kroki, o których będę pisać na pewno warto powtarzać co jakiś czas — im więcej umieszczamy informacji, artykułów czy zdjęć na stronie, tym bardziej szybkość strony WordPress będzie spadać.
Zawartość artykułu:
.htaccess i kontrola cache
.htaccess to plik konfiguracyjny, który znajduje się w głównym katalogu serwera. Dzięki niemu możemy nie tylko tworzyć przekierowania, ale również optymalizować witrynę. Bardzo ważnym czynnikiem jest korzystanie z cache przeglądarki. Tylko podczas pierwszego uruchomienia witryny pobierane są wszystkie dane, za każdym kolejnym razem powinny być już w pamięci przeglądarki, dzięki czemu strona będzie się ładować znacznie szybciej. Poniższy kod należy umieścić w pliku .htaccess
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
Każdy typ plików posiada swój własny zapis i dotyczy on najpopularniejszych formatów grafik, skryptów czy arkuszy styli. Daty wygaśnięcia są przykładowe i powinny być przystosowane do danej witryny.
Kompresja gzip
Aby zmniejszyć ilość danych przesyłanych z serwera do użytkownika należy włączyć kompresję wybranych typów plików. W tym celu możemy znowu posłużyć się plikiem .htacces i wkleić do niego poniższy kod:
AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon
Pliki takie jak HTML, CSS czy JavaScript są kompresowane przez serwer (co pozwala zmniejszyć ich objętość nawet o 80%) a następnie dekompresowane przez przeglądarkę użytkownika. Niektóre serwery oferują możliwość włączenia kompresji w panelu administracyjnym, warto więc zapoznać się z tym, instalując stronę na danym serwerze.
Przyspieszenie strony WordPress – minifikacja
Minifikacja odnosi się głównie do plików JavaScript i CSS. Polega na usunięciu z kodu niepotrzebnych znaków, spacji i komentarzy. Zobaczcie przykład jej działania:
Fragment wejściowego kodu CSS:
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #000;
text-align: left;
}
.main {
color: #fff;
background-color: #000;
}
Fragment wyjściowego skompresowanego kodu CSS:
body{font-family: Arial, sans-serif;font-size: 12px;color: #000;text-align: left;}.main{color: #fff;background-color: #000;}
Wiele wtyczek poza samą minifikacją, oferują jeszcze złączenie plików, dzięki czemu z kilku dużych plików CSS otrzymamy jeden skompresowany. W ten sposób przeglądarka zamiast paru żądań prześle tylko jedno do naszego serwera. Jednak po włączeniu takiej wtyczki trzeba sprawdzić czy wszystko dobrze działa. Najwięcej problemów stwarzają skrypty JavaScript. W opcjach zainstalowanego dodatku najczęściej możemy wybrać, które pliki mają zostać pominięte lub czy w ogóle chcemy kompresować pliki, jeśli natkniemy się na problemy.
Przyspieszenie strony WordPress – otymalizacja obrazków
Obrazki — często mamy ich bardzo dużo w naszym serwisie i warto się zająć ich optymalizacją. Wystarczy wyszukać coś na ten temat w przeglądarce, a pojawi się masa wtyczek, które w zasadzie wykonają za nas całą brudną robotę. Do najbardziej popularnych należą między innymi: WP Smush, EWWW Image Optimizer i Compress JPEG & PNG images. Dzięki nim nie tylko w łatwy i przyjemny sposób zoptymalizujemy nasze obrazy, ale również nie stracimy ich jakości.
Przyspieszenie strony WordPress – wybór szablonu, wtyczek oraz odpowiedniego serwera
Im mniej „bajerów” na stronie, tym lepiej. Dzięki temu nie waży ona za dużo i szybciej się ładuje. Jeśli decydujesz się na użycie darmowego lub płatnego szablonu, pamiętaj, aby zwrócić uwagę czy nie ma w nim za dużo skryptów, z których i tak nie będziesz korzystać. Nie masz doświadczenia w tych sprawach? Poradź się kogoś doświadczonego. To samo tyczy się instalacji dodatkowych wtyczek — im mniej, tym lepiej. Starajmy się też nie przechowywać na serwerze dodatków, z których już nie korzystamy. Jest nawet wtyczka (P3 – Plugin Performance Profiler), która pomoże obliczyć wydajność innych posiadanych wtyyczek.
W przypadku prostych stron czy blogów najlepiej wybrać zwykły i tani serwer. Dopiero gdy nasz serwis stanie się bardziej popularny możemy zacząć zastawiać się nad wyborem dedykowanego hostingu. W razie problemów z wyborem serwera, dobrze jest poradzić się kogoś bardziej zorientowanego w temacie.
Przyspieszenie strony WordPress – optymalizacja bazy danych
Ten krok, podobnie jak inne poprzednie, może zostać wykonany poprzez zainstalowanie konkretnej wtyczki. Najczęściej wybieraną jest Wp-Optimize. Należy pamiętać, aby przed wykonaniem optymalizacji bazy danych, zrobić jej kopię zapasową, gdyż dane są usuwane nieodwracalnie. Jak często sprzątać bazę? To już w dużej mierze zależy od tego, jak często zmieniana jest strona.
Na zakończenie
Na zakończenie polecam stronę PageSpeed Insights, na której możemy sprawdzić wydajność naszej strony na komputerach i urządzeniach przenośnych. Wynik podawany jest w zakresie od 0 do 100 punktów, a im wyższy, tym lepiej. Otrzymamy również sugestie, co możemy poprawić na naszej stronie, aby była przyjazna dla użytkownika i ładowała się szybciej.