Poradnik: 18 sposobów na przyspieszenie WordPressa (i nie tylko!)

Bardzo lubię WordPressa. Nie tylko dlatego, że jest wygodny w użytkowaniu, ale też ma duże możliwości, jeśli chodzi o tworzenie bardziej zaawansowanych stron internetowych. No i jest w wielu aspektach dobrze przygotowany pod kątem optymalizacji dla wyszukiwarek. Bogata społeczność, ogromna ilość darmowych i płatnych wtyczek i motywów, oraz fakt, że z tego systemu CMS korzysta już co czwarta strona w internecie, tylko potwierdza to, że jeśli jeszcze jakimś cudem nie było Ci dane korzystać w WordPressa – musisz to zmienić :-). Dziś przygotowałem 18 prostych i sprawdzonych sposobów na przyspieszenie działania strony opartej na WordPress. Zapraszam!

Dlaczego warto dbać o szybkość ładowania się strony?

Szybkie wczytywanie strony internetowej ma nie tylko wpływ na SEO i odczucia użytkowników o czym pisałem we wpisie Krótki czas ładowania strony = wyższa pozycja w Google oraz w artykule o CloudFlare. Szybka strona internetowa to też większe zainteresowanie stroną i wzrost konwersji nawet o 7%! Taki wynik osiągnął Amazon (jeśli chodzi o sprzedaż), czy Firefox (jeśli chodzi o liczbę pobrań).

I niezależnie, czy Twoją konwersją będzie sprzedaż, zapisanie się na newsletter, czy spędzenie 2 minut na czytaniu wpisu na Twoim blogu. Konwersję zawsze możesz poprawić dzięki stronie, która będzie działała jeszcze szybciej niż dotychczas. Moim zdaniem szybko wczytująca się strona to obecnie podstawa przy jakiejkolwiek działalności internetowej. Czas się więc zabrać za przyspieszenie strony na WordPressie!

Jak przyspieszyć WordPressa? Spis treści.

Przygotowałem 18 porad z linkami do narzędzi i wtyczek, które pomogą przyspieszyć działanie WordPressa. Znaczną część porad można wykorzystać przy przyspieszaniu strony opartej o inny CSS czy zbudowanej po prostu w HTMLu. Enjoy!

Spis treści:

Wybierz dobry i szybki hosting

Szybko działający hosting to podstawa każdej strony (nie tylko tej opartej na WordPressie). Na hostingu nie ma co oszczędzać, ale warto sprawdzać za co się płaci. Puste gigabajty przestrzeni dyskowej, czy ogromny transfer, którego i tak nie wykorzystamy nie są najważniejszymi parametrami, na które powinniśmy zwracać uwagę.

Większość hostingów współdzielonych oferuje kilkunastodniowy okres testowy, podczas którego, bezpłatnie możemy korzystać z konta i testować je do woli. Pod kątem szybkości, dobrymi narzędziami do testów mogą okazać się:

• PHP benchmark Script do sprawdzenia szybkości wykonywania skryptów PHP
• PHP/MySQL CPU performance statistics, czyli wtyczka do WordPressa badająca wydajność serwera w operacjach bazodanowych PHP/MySQL
• Narzędzie Pingdom Speed Test, które sprawdza wydajność serwera i szybkość ładowania każdego widocznego elementu na stronie

Takie testy dla kilku wybranych usługodawców przeprowadził kilka miesięcy temu Sprawny Marketing, ale ja niezależnie od tego polecam zawsze własne testy. Warto wybierając odpowiedni hosting uwzględnić także opinie klientów i pomoc techniczną danego hostingu. To jak szybko odpowiada dział techniczny na maile i to, czy jest w stanie pomóc w kryzysowych sytuacjach, może mieć kluczowe znaczenie przy dalszym użytkowaniu konta hostingowego.

Zmień wersję PHP na najnowszą

Nie mniej ważne od samego usługodawcy hostingowego jest to, jaką wersję PHP mamy uruchomioną na serwerze. Wiem, wiem… pewnie niewiele osób interesuje się takimi szczegółami, ale wersja PHP ma ogromne znaczenie na dla szybkiego działania serwera i stron na nim uruchomionych.
Zasada wydaje się prosta: Im wyższa (nowsza) wersja PHP, tym szybciej!

Obecnie najnowszą wersją jest PHP 7, która to wersja potrafi być prawie dwukrotnie szybsza od swoich poprzedników (PHP 5.5 i PHP 5.6)!

Mimo, że wiele firm hostingowych ustawia starszą wersję PHP jako domyślną, to często istnieje możliwość zmiany w panelu wersji PHP używanej na naszym koncie na nowszą. O ile z niektórymi skryptami i CMSami może być problem, to WordPress wspiera najnowszą wersję PHP 7, więc warto ją ustawić, aby odczuć skok w szybkości działania strony.

Przerzuć się na HTTP/2

Największa zmiana w internecie od 16 lat i wielkie zwiększenie prędkości wczytywania stron. W porównaniu ze swoim poprzednikiem z numerkiem 1.1 każda strona (każdy serwer) używająca tego nowego protokołu może ładować się szybciej poprzez m.in. poprzez kompresję nagłówków, czy zmianę wielu połączeń na jedno stałe połączenie, dzięki któremu pobierane jest kilka rodzajów treści. Dobrze i szczegółowo o samym protokole HTTP/2 i zmianach, które idą wraz z nim napisano na onsearch.
Protokół obsługują już wszystkie najważniejsze przeglądarki internetowe i część usług hostingowych.

Różnica jest widoczna dla każdego:

Tym lub tym narzędziem możesz sprawdzić na własnej skórze jak HTTP/2 wpływa na szybkość ładowania strony, a za pomocą tego narzędzia możesz sprawdzić, czy Twoja strona obsługuje już protokół HTTP/2.

Warto zwrócić uwagę na obsługę HTTP/2 przez nasz hosting lub skorzystać z CloudFlare, które implementuje HTTP 2.0, niezależnie od tego, czy nasz hosting obsługuje już ten protokół.

Używaj prostych i szybkich szablonów

Szablony / motywy WordPress – są ich niezliczone ilości! Zarówno tych bezpłatnych, jak i kosztujących parę dolarów. Wybierając szablon strony www, zazwyczaj kierujemy się głównie kwestiami estetycznymi. Warto jednak wybierając szablon bloga zwrócić też uwagę na to, jak wygląda kwestia szybkości jego działania. Prawda jest taka, że obecne szablony często przeładowane są różnymi funkcjami, z których wykorzystujemy tylko niewielką ich część.

Większość szablonów można przetestować w formie demo, przed zakupem czy instalacją. Warto sprawdzić jak działa szablon w naszej przeglądarce, czy np. w przeglądarce na słabszym komputerze. Oprócz tego sprawdźmy demo szablonu narzędziami diagnostycznymi takimi jak GTmetrix, zwracając szczególną uwagę na liczbę i wielkość skryptów JS, które zazwyczaj są największym spowalniaczem strony.

Sam zazwyczaj kupuję szablony WordPress na Themeforest i oprócz podstawowych testów na wersji demo, czytam zawsze także komentarze innych kupujących i ich uwagi do szablonu. Często także w opisie danego szablonu, autorzy chwalą się, jeśli jest on specjalnie zoptymalizowany pod kątem szybkości.

Usuń zbędne elementy strony

To działanie trochę łączy się z poprzednim, czyli wyborem odpowiedniego szablonu. Po wybraniu szablonu zastanówmy się które z jego opcji są nam niezbędne. I czy na pewno potrzebujemy zaawansowanych animacji, pływających widgetów czy zapierających dech w piersiach sliderów.

Wiele motywów WordPress posiada rozbudowane opcje konfiguracji, które pozwalają włączać/wyłączać poszczególne elementy strony – warto więc kierować się w tym wypadku zasadą, że jeśli coś nie jest konieczne, znaczy, że jest zbędne.

Unikaj niepotrzebnych wtyczek

Ogromny wybór wtyczek, czyli wielka zaleta WordPressa, dzięki której możemy z tego CMSa zbudować rozbudowany portal, sklep internetowy czy cokolwiek innego. Wtyczki bez wątpienia są bardzo pomocne, ale trzeba używać ich z głową i nie instalować wszystkiego co popadnie. Kiedyś miałem okazję sprawdzać dla jednego z klientów „dlaczego strona działa wolno” i to, co zobaczyłem po zalogowaniu się do panelu WP to 43 włączone, aktywne działające wtyczki!

Za pomocą wtyczki (a jakże!) do WordPressa o nawie P3 (Plugin Performance Profiler) możemy sprawdzić, w jakim stopniu każda z zainstalowanych wtyczek spowalnia działanie naszej strony www.

Większość wtyczek dołącza do kodu strony swoje skrypty JS i arkusze stylów CSS. Często też te pliki JS/CSS dołączane są na całej stronie, a nie tylko w miejscu gdzie powinny być użyte (np. w formularzu kontaktowym, bo do tego służy wtyczka).

Aby rozwiązać problem, przede wszystkim sprawdźmy zastanówmy się co każdy z włączonych pluginów robi, za co odpowiada i czy jest nam w 100% niezbędny. Do wielu zadań nie jest potrzebna osobna wtyczka i wystarczy kilka linijek kodu w szablonie strony, które będą działały tak samo jak wtyczka.

PS. Oczywiście po sprawdzeniu i pozbyciu się zbędnych wtyczek z naszej strony, możemy śmiało wyłączyć i usunąć wtyczkę P3 (Plugin Performance Profiler) – nie będzie nam już ona potrzebna.

Złączenie i zmniejszenie skryptów JavaScript i arkuszy CSS

Strony oparte o WordPress zbudowane obecnie są tak, że składają się z wielu skryptów JavaScript i arkuszy stylów CSS. Szablon posiada kilka swoich plików, wtyczki „dorzucają” swoje pliki i finalnie mamy wiele niezoptymalizowanych plików do pobrania przy każdym odwiedzaniu strony.

Dobrą praktyką jest zmniejszanie („minification”) tych plików poprzez usunięcie zbędnych elementów (jak np. zbędne puste linie, komentarze itd.). Pliki staja się wtedy mniej czytelne, ale dzięki temu strona działa szybciej. Dodatkowo kilka plików ze stylami czy skryptami, można połączyć w jeden plik, dzięki temu mamy mniej odwołań.

Dobrą wtyczką do WordPressa, która wyręczy nas z łączeniu plików CSS/JS i dodatkowo w zmniejszaniu wagi tych plików jest Better WordPress Minify. Wtyczka w kilku prostych krokach po uruchomieniu zajmie się za nas całą „brudną robotą” i finalnie na blogu będziemy mieli tylko dwa takie pliki: jeden plik ze stylami i jeden plik z JavaScriptem. Waga całości zostanie znacznie zredukowana. Polecam!

Ustaw cache dla przeglądarki

Ustawienie czasu, przez jaki przeglądarka odwiedzającego naszą stronę powinna trzymać zapisane pliki w pamięci podręcznej, pozwoli na szybsze wczytanie strony internautom, którzy odwiedzają stronę ponownie. Pliki strony, które nie zmieniają się zbyt często przechowywane są wtedy na dysku odwiedzającego stronę. A powracający, zamiast za każdym razem pobierać je ponownie, może je wczytać ze swojego dysku.

Plików graficznych, stylów CSS, skryptów JavaScript czy innych elementów nie zmieniamy raczej zbyt często, dlatego też można dla nich śmiało ustawić długi czas trzymania w cache.

Aby uruchomić cache w przeglądarce, musimy w pliku .htaccess ustalić czas, w jakim mają być przechowywane poszczególne typy plików.

Gotowy kod do wklejenia w pliku .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A0
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType text/javascript A31536000
ExpiresByType text/html A3600
ExpiresByType text/plain A3600
ExpiresByType image/gif A31536000
ExpiresByType image/ico A31536000
ExpiresByType image/jpg A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
</IfModule>

Czas przetrzymywania plików w cache opisany jest w sekundach, więc 31536000 oznacza rok, a 3600 oznacza jedną godzinę.

Pozbądź się Gravatara (albo go zoptymalizuj)

Gravatar to usługa zintegrowana z WordPressem, której zadaniem jest wyświetlanie avatarów zdjęć osób przy każdym komentarzu pod wpisami na WordPressie. Jest to usługa zewnętrzna, więc avatary naszych komentatorów pobierane są z zewnętrznego serwera, co oczywiście wpływa negatywnie na szybkość wczytywania się strony.

Najlepszym rozwiązaniem byłoby pozbycie się Gravatara i niewyświetlanie zdjęć/grafik każdego z komentujących. Jeśli jednak nie chcesz się pozbywać tej ciekawej opcji, a chcesz przyspieszyć stronę – jest na to sposób! :-)

Optymalizacje przeprowadzamy w 2 krokach:

1. W panelu WordPressa wchodzimy w Ustawienia -> Dyskusja i w sekcji „Domyślny obrazek profilowy” ustawiamy „Brak”. Spowoduje to, że przy komentarzach osób, które nie mają ustawionego avatara nie będzie wyświetlała się standardowa grafika, która każdorazowo jest generowana i osobno pobierana z serwera gravatar.com.
   
2. Instalujemy i uruchamiamy wtyczkę FV Gravatar Cache. Ma ona za zadanie zapisywać lokalnie (na naszym serwerze) avatary naszych czytelników, przez co ładowane one są z tego samego miejsca co strona – co pozytywnie wpływa na czas jej ładowania. Oczywiście wtyczka raz na jakiś czas sprawdza, czy nikt nie zaktualizował sobie zdjęcia i jeśli tak to je podmienia :-)
   

Usunięcie lub zminimalizowanie odwołań do Gravatara, podczas ładowania się strony nie wpłynie może w znaczący sposób na jej szybkość, ale ziarnko do ziarnka… Szczególnie polecane na blogach, które mają wiele komentarzy pod każdym wpisem.

Usuń widgety social media

Widgety/przyciski/liczniki social media są w wielu przypadkach jednym z największych „spowalniaczy” działania stron internetowych. Każdy licznik czy widget musi pobrać informacje o aktualnej ilości „lajków” czy innych gwiazdek z zewnętrznego źródła, przez co przy większej ilości takich widgetów strona zaczyna działać bardzo wolno. No, ale jest na to sposób.

1. Używaj tylko niezbędnych widgetów/przycisków
   Serio. Jeśli nie jesteś blogerką modową lub nie wrzucasz na stronę pięknych aranżacji wnętrz, czy apetycznych potraw to raczej jest nikła szansa, że przycisk Pinteresta na Twojej stronie będzie klikany. A jeśli już masz piękne, inspirujące zdjęcia na swoim WordPressowym blogu to pewnie nie będą one często udostępniane przez LinkedIn. Używaj tylko tych social mediów, z których korzystają Twoi odbiorcy. Ogranicz się do niezbędnego minimum.
2. Zamień widgety w linki
   Zastanów się, czy musisz pobierać widgety pokazujące liczbę fanów, ich avatary, ostatnie posty czy inne informacje. W wielu przypadkach na stronie wystarczy prosty element graficzny, czy napis z linkiem „Znajdziesz nas na Facebooku”. To samo dotyczy przycisków w stylu „Share” – taki przycisk wcale nie musi mieć licznika (szczególnie, jeśli liczby udostępnień nie są imponujące). W większości przypadków wystarczy zwykły prosty link w stylu <a href="...">...</a>, który dodatkowo można ostylować, jak w przypadku mojego bloga. I często nie trzeba do tego żadnych zewnętrznych wtyczek, bo albo taka funkcja jest już w szablonie strony, albo możemy stronić to samodzielnie za pomocą linku linijek kodu.

Włącz kompresję GZIP

Kompresja GZIP to metoda kompresji danych „w locie”. Najczęściej są to pliki HTML, CSS i JavaScript, które „zmniejszane” są po stronie serwera, przed wysłaniem do użytkownika, a następnie dekompresowane przez przeglądarkę użytkownika strony. Kompresja gzip pozwala zmniejszyć ilość wysyłanych danych między serwerem a odwiedzającym naszą stronę o 80% i tym samym przyspieszyć wczytywanie się strony.

Z gzip jest różnie – część kont hostingowych ma domyślnie zawsze włączoną obsługę gzip, część z firm daje możliwość włączenia takiej kompresji w panelu zarządzania serwerem. A w innych przypadkach musimy sobie radzić sami :-)

To, czy Twoja strona używa kompresji GZIP możesz sprawdzić za pomocą tego narzędzia. Przykładowo dla onet.pl wygląda to tak:

Jak włączyć kompresję gzip?

• Za pomocą pliku .htaccess
  W głównym folderze naszej strony na serwerze, odnajdujemy plik o nazwie .htaccess i na początku tego pliku dodajemy poniższy kod:

  <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule>

  <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript </IfModule>

  Powyższy fragment kodu uruchamia kompresję gzip dla plików tekstowych, HTML, CCC, JavaScript

• Za pomocą wtyczki Check and Enable GZIP compression
  Wtyczka robi właściwie dokładnie to samo co w powyższym punkcie, czyli dodaje do pliku .htaccess zapisy o tym, co ma być kompresowane poprzez gzip. Taka wersja dla leniwych :-)

Użyj dobrej wtyczki do cache

Absolutną koniecznością przy przyspieszaniu bloga jest używanie dobrej i sprawdzonej wtyczki do zapisywania w cache całej strony opartej na WordPressie.

Wtyczka W3 Total Cache ma naprawdę ogrom funkcji konfiguracyjnych, ale działa naprawdę w prosty sposób – po prostu instalujesz wtyczkę i włączasz elementy strony, które powinny być zapisywane w cache.

W3 Total Cache świetnie i sprawnie działa i przy okazji może wykonywać kilka optymalizacji opisanych już w tym poradniku (cache w przeglądarce, zmniejszanie plików HTML/CSS/JS). Przy okazji świetnie współpracuje z CloudFlare.

Polecam używanie wtyczki i pobawienie się jej konfiguracją, choć w wielu przypadkach domyślne ustawienia będą wystarczające.

Kompresuj i optymalizuj obrazki i zdjęcia

Jeśli na własnym serwerze nie trzymamy plików wideo, to najprawdopodobniej największymi plikami do pobrania będą obrazki i zdjęcia. Czasem na stronie mamy ich mniej, ale zawsze warto pomyśleć o ich kompresji. I to nie mam to na myśli kompresji, która w widoczny sposób wpłynie na jakość zdjęć i z bloga fotograficznego zrobi wielką pikselozę. Rozmiar zdjęć i obrazków możemy śmiało zmniejszyć, bez widocznego wpływu na ich jakość! I to automatycznie.

Z pomocą przyjdzie nam tu wtyczka, którą używam od lat o nazwie WP Smush. Zadaniem wtyczki jest zmniejszenie wagi wszystkich plików graficznych w naszym WordPressie, bez widocznej utraty jakości.

Na sam początek musimy zoptymalizować całą bibliotekę mediów, którą mamy już na blogu – w darmowej wersji możemy jednorazowo optymalizować po 50 plików graficznych w jednym zapytaniu. Przy stronach z większą ilością zdjęć będzie trzeba na pewno trochę poczekać na optymalizację, ale efekt będzie odczuwalny.
Dodatkowo zaznaczając opcję „Smush images on upload” każde kolejne zdjęcie wgrywane do WordPressa w przyszłości, będzie już automatycznie optymalizowane przez wtyczkę.

Tak to wyglądało na jednej z moich stron www po optymalizacji:

WP Smush wysyła pliki do optymalizacji na swój serwer i zwraca nam już zoptymalizowane pliki. Jeśli z jakiegoś powodu chcemy optymalizować całość lokalnie to możemy skorzystać z wtyczki EWWW Image Optimizer, która działa na podobnej zasadzie, ale to nasz serwer zajmuje się optymalizacją. Minus jest taki, że ta wtyczka może nie działać poprawnie na większości serwerów współdzielonych.

Optymalizuj bazę danych

Baza danych jest podstawą każdego serwisu opartego o WordPress. To własne tam trzymane są wszystkie dane, ustawienia, treści i informacje niezbędne do prawidłowego działania naszego serwisu.
Warto więc raz na jakiś czas usunąć zbędne i nadmiarowe dane z bazy. Tym bardziej że w niektórych przypadkach potrafi wpłynąć to korzystnie na szybkość ładowania się strony.

Polecaną przeze mnie wtyczką do WordPress w tym zakresie jest WP-Sweep, który sprawdza całą bazę danych WordPressa i pozwala jednym kliknięciem usunąć nadmiary danych zgromadzonych w bazie.

Po zainstalowaniu wystarczy znaleźć ją w menu Narzędzia -> Sweep i kliknąć przycisk Sweep przy danych, które chcemy usunąć z bazy.

Jak często optymalizować bazę danych? To zależy od tego, jak duża jest nasza strona i jak często mieniamy coś w konfiguracjach – ja zazwyczaj staram się robić to raz na kwartał, ale równie dobrze bazę możemy optymalizować raz na miesiąc czy raz w tygodniu przy dużych serwisach.

Oczywiście, pamiętajmy o wykonaniu kopii bazy danych, zanim damy działać tej wtyczce.

Usuń zbędne wersje wpisów i usunięte wpisy

WordPress podczas tworzenia każdego nowego wpisu, zapisuje sobie co pewien czas aktualną jego wersję. Dzięki temu, gdy przypadkowo zamkniemy przeglądarkę, czy z innego powodu przerwiemy nieoczekiwanie jego tworzenie, możemy w każdej chwili powrócić do ostatnio zapisanej wersji.
Te wersje wpisu trzymane są w bazie danych dla wszystkich treści tworzonych w WordPressie od początku istnienia bloga. Tym sposobem np. dziś mogę wrócić do kilkunastu zapisanych wersji, które są przy pierwszym wpisie na moim blogu.

Nie zawsze wersje wpisów (szczególnie tych starszych) są nam potrzebne, w związku z tym możemy je w większości przypadków usunąć z bazy danych.

Tu z pomocą przychodzi wtyczka WP-Sweep, opisana przy okazji czyszczenia bazy danych, która pozwala na usunięcie automatycznie zapisywanych wersji wpisów, jak i usuniętych wpisów, które cały czas są w naszej bazie danych.
Wystarczy po instalacji wtyczki kliknąć przycisk Sweep przy polach Auto drafts i Deleted posts. I już WordPress lżejszy :-)

Trzeba pamiętać, aby przed jakimikolwiek zmianami w bazie danych wykonać kopię całej bazy danych.

Wyłącz pingbacki i trackbacki

Pingbacki i trackbacki to mechanizm wbudowany w WordPressa, który odpowiada za powiadamianie blogów między sobą o tym, że w opublikowanym wpisie jest link do danego bloga. Założenie było takie, że jeśli np. ja pisząc ten wpis, podlinkuję w nim artykuł z innego bloga, który korzysta z tego mechanizmu, to podlinkowany bloger otrzyma o tym powiadomienie (podobne do nowego komentarza na blogu) i będzie mógł po zatwierdzeniu pod komentarzami tego wpisu umieścić informację, że wspomniałem o nim na swoim blogu.

Mechanizm jest obecnie na wymarciu i w 99% wykorzystywany jest przez spamerów, którzy używają pingbacków i trackbacków to generowania fałszywych powiadomień, licząc na to, że pojawi się ono jako link pod wpisem na blogu.

Zastanów się więc czy korzystasz z tego mechanizmu, czy jest on Ci potrzebny i kiedy ostatnio dostałeś takie powiadomienie. Jeśli nie wiesz nawet co to jest, to możesz śmiało je wyłączyć w panelu zarządzania WordPressem wchodząc w Ustawienia -> Dyskusja i odznaczając opcję „Zezwól innym blogom na powiadamianie o zamieszczeniu odnośnika (pingbacki i trackbacki) do nowo dodanych artykułów„.

Ustaw DNS-prefetch dla zewnętrznych źródeł

Jeśli nasza strona pobiera jakieś elementy z zewnętrznych źródeł warto dodać na początku kodu strony tag dns-prefetch. Pozwoli to przeglądarce już podczas rozpoczęcia wczytywania strony na odpytanie DNSów o adresy IP zewnętrznych źródeł, z których pobierane będą treści, więc w konsekwencji – szybsze ich wczytanie na późniejszym etapie ładowania strony.

Najczęstszymi zewnętrznymi źródłami są:

• czcionki i skrypty z serwerów Google
• skrypty statystyk i reklam
• pliki z CDNów

Aby zrobić to u siebie, najpierw sprawdźmy z jakich zewnętrznych źródeł strona pobiera dane – możemy to zrobić za pomocą narzędzia WebPageTest, po sprawdzeniu strony wchodząc w zakładkę „Domains”. Znajdziemy tam listę wszystkich domen, do których odwołuje się przeglądarka wczytując naszą stronę.

Następnie na początku tagu <head> na naszej stronie dodajemy wpisy dla każdego zewnętrznego źródła wyglądające tak:

<link rel="dns-prefetch" href="//fonts.googleapis.com"/>

Na moim blogu całość w kodzie prezentuje się w ten sposób:

Używaj CloudFlare

O CloudFlare pisałem już na blogu to proste i dla większości zastosowań darmowe narzędzie, którego jednym z zadań jest optymalizacja strony pod kątem szybkości.

Po podpięciu domeny pod tę usługę powinniśmy zainteresować się zakładką „Speed” w której mamy dwa, całkiem ciekawe i skuteczne sposoby przyspieszenia strony:

• Auto Minify
  Jest o opcja zmniejszenia rozmiaru plików HTML, CSS i JavaScript w kodzie źródłowym naszej strony, poprzez usuniecie wszelkich zbędnych elementów z kodu.
• Rocket Loader™
  Autorska usługa CloudFlare, która skupia się na szybkim ładowaniu stron zawierających skrypty JavaScript. Zmniejsza ilość zapytań, ładuje skrypty asynchronicznie i umieszcza je w cache.

Dobrym pomysłem jest włączenie obu z nich, co dodatkowo pozwoli na przyspieszenie ładowania się naszej strony.

Słowo na koniec

I to już koniec poradnika. Mam nadzieję, że okaże on się od przydatny dla Ciebie i pomoże Ci przyspieszyć Twoją stronę czy blog oparty na WordPressie. W przyszłości postaram się rozbudowywać ten wpis o nowe rozwiązania i pomysły, więc śmiało możesz wracać do wpisu za każdym razem, gdy pracujesz nad szybkością ładowania się strony.

Na koniec chciałbym poprosić Cię o podzielenie się tym wpisem na Facebooku, czy w innych social mediach – odwdzięczysz się w ten sposób za pracę, którą włożyłem w jego przygotowanie, oraz sprawisz, że Internet stanie się szybszy :-)