{"id":7574,"date":"2023-12-05T10:57:07","date_gmt":"2023-12-05T08:57:07","guid":{"rendered":"https:\/\/www.supermonitoring.pl\/blogpl\/?p=7574"},"modified":"2023-12-18T10:58:08","modified_gmt":"2023-12-18T08:58:08","slug":"wtyczki-do-wordpressa-do-optymalizacji-wynikow-google-page-speed","status":"publish","type":"post","link":"https:\/\/www.supermonitoring.pl\/blogpl\/wtyczki-do-wordpressa-do-optymalizacji-wynikow-google-page-speed\/","title":{"rendered":"Wtyczki do WordPressa, kt\u00f3re pomoc\u0105 Ci zoptymalizowa\u0107 wyniki Google Page Speed"},"content":{"rendered":"

Szybko\u015b\u0107 wczytywania strony jest oficjalnie czynnikiem rankingowym Google od 2010 roku. R\u00f3wnie\u017c mocno zwi\u0105zane z szybko\u015bci\u0105 wska\u017aniki Core Web Vitals do\u0142\u0105czy\u0142y do czynnik\u00f3w wp\u0142ywaj\u0105cych na pozycje w wynikach wyszukiwania Google w 2021 roku.<\/p>\n

Wiedz\u0105c, jaki wp\u0142yw na wyniki biznesowe ma pozycja w Google, w\u0142a\u015bciciele stron po\u015bwi\u0119caj\u0105 coraz wi\u0119cej czasu i energii optymalizacji. Ich celem s\u0105 “zielone” wyniki Google Page Speed Insights \u2013 szczeg\u00f3lnie w kategorii “Wydajno\u015b\u0107” w wersji mobile.<\/p>\n

\"Google<\/p>\n

Je\u017celi Twoja strona jest zbudowana na WordPressie, masz do dyspozycji wiele wtyczek u\u0142atwiaj\u0105cych optymalizacj\u0119. W tym artykule znajdziesz rekomendacje sprawdzonych wtyczek do optymalizacji, wymienionych wed\u0142ug poszczeg\u00f3lnych sugestii wy\u015bwietlanych przez Google Page Speed Insights.<\/p>\n

Grafika<\/h2>\n

Pliki graficzne \u2013 w szczeg\u00f3lno\u015bci bitmapy \u2013 to zazwyczaj najwi\u0119ksze (najci\u0119\u017csze) sk\u0142adniki stron internetowych. Jednocze\u015bnie s\u0105 one naj\u0142atwiejsze do zoptymalizowania. Dlatego optymalizacj\u0119 strony internetowej najlepiej zacz\u0105\u0107 od bitmap. Efekty tego dzia\u0142ania b\u0119d\u0105 mia\u0142y bardzo wyra\u017ane prze\u0142o\u017cenie na wyniki Google Page Speed.<\/p>\n

“Od\u0142\u00f3\u017c \u0142adowanie obraz\u00f3w poza ekranem”<\/h3>\n

W tej technice optymalizacyjnej chodzi o to, \u017ceby wczytywa\u0107 tylko te grafiki, kt\u00f3re s\u0105 widoczne w oknie przegl\u0105darki. Od razu po wej\u015bciu na stron\u0119 wy\u015bwietlany jest tylko jej g\u00f3rny fragment, nierzadko stanowi\u0105cy niewielki procent ca\u0142o\u015bci. Przegl\u0105darki domy\u015blnie wczytuj\u0105 wszystkie osadzone na stronie obrazy \u2013 a przecie\u017c w danej chwili niewidoczne grafiki nie s\u0105 potrzebne. I mo\u017ce nigdy nie b\u0119d\u0105, je\u017celi u\u017cytkownik nie przewinie strony.<\/p>\n

Lazy loading<\/strong> polega na doczytywaniu kolejnych obraz\u00f3w (ale r\u00f3wnie\u017c video oraz zawarto\u015bci iFrames) w miar\u0119 przewijania strony. Mo\u017cna to realizowa\u0107 za pomoc\u0105 JavaScript, lub wykorzystuj\u0105c natywn\u0105 funkcj\u0119 przegl\u0105darek (loading=\"lazy\"<\/code>), wprowadzon\u0105 w 2019 roku.<\/p>\n

Sprawdzon\u0105 wtyczk\u0105 dedykowan\u0105 do funkcji jest a3 Lazy Load<\/a>. Ale r\u00f3wnie\u017c inne wtyczki optymalizacyjne, o kt\u00f3rych b\u0119dzie mowa w dalszej cz\u0119\u015bci tekstu, oferuj\u0105 lazy loading jako jedn\u0105 z wielu funkcji \u2013 Autoptimize<\/a>, Smush<\/a>.<\/p>\n

“Zmie\u0144 rozmiar obraz\u00f3w”<\/h3>\n

Je\u017celi osadzisz na stronie grafik\u0119 wi\u0119ksz\u0105 ni\u017c rozmiar, w jakim ma by\u0107 wy\u015bwietlana, przegl\u0105darka wy\u015bwietli j\u0105 poprawnie i nie b\u0119dzie wida\u0107, co jest nie tak. W rzeczywisto\u015bci pobierany b\u0119dzie oryginalny obraz (za du\u017cy), kt\u00f3ry nast\u0119pnie b\u0119dzie “zgniatany” przez przegl\u0105dark\u0119 przy wy\u015bwietlaniu. To zupe\u0142nie niepotrzebnie spowalnia wczytywanie strony i konsumuje nadmiarowy transfer na urz\u0105dzeniach mobilnych.<\/p>\n

Smush<\/a>, ShortPixel<\/a> i EWWW Image Optimizer<\/a> to trzy najlepsze wtyczki do optymalizacji plik\u00f3w graficznych. Jedn\u0105 z oferowanych przez nie funkcji jest wykrywanie bitmap o niew\u0142a\u015bciwych rozmiarach i skalowanie ich do w\u0142a\u015bciwych wymiar\u00f3w.<\/p>\n

Warto tutaj wspomnie\u0107 jeszcze o Adaptive Images<\/strong>, czyli technice polegaj\u0105cej na u\u017cywaniu r\u00f3\u017cnych rozmiar\u00f3w zdj\u0119\u0107 w zale\u017cno\u015bci od rozdzielczo\u015bci urz\u0105dzenia u\u017cytkownika. Przy publikowaniu grafik generowane s\u0105 osobne pliki dla komputer\u00f3w, smartfon\u00f3w oraz dla u\u017cytkownik\u00f3w pracuj\u0105cych w bardzo du\u017cych rozdzielczo\u015bciach (np. Retina).
\nWszystkie trzy wspomniane wy\u017cej wtyczki optymalizacyjne oferuj\u0105 t\u0119 funkcj\u0119.<\/p>\n

“U\u017cyj efektywnego kodowania obraz\u00f3w”<\/h3>\n

Wi\u0119kszo\u015b\u0107 aparat\u00f3w fotograficznych i smartfon\u00f3w, jak te\u017c spora cz\u0119\u015b\u0107 program\u00f3w graficznych nie ma wbudowanej funkcji optymalizacji (kompresji) plik\u00f3w graficznych. Stosuj\u0105c nowoczesne algorytmy bezstratnej kompresji<\/strong>, mo\u017cna zmniejszy\u0107 wag\u0119 plik\u00f3w graficznych o kilkadziesi\u0105t procent. <\/p>\n

Tak\u0105 optymalizacj\u0119 mo\u017cna wykonywa\u0107 r\u0119cznie \u2013 za pomoc\u0105 narz\u0119dzi online takich jak TinyPNG<\/a>. Ale oczywi\u015bcie najlepiej to zautomatyzowa\u0107 za pomoc\u0105 wtyczek do WordPressa. Bezstratna kompresja bitmap to g\u0142\u00f3wna funkcja wspomnianych wy\u017cej wtyczek Smush<\/a>, ShortPixel<\/a> i EWWW Image Optimizer<\/a>.<\/p>\n

“Wy\u015bwietlaj obrazy w formatach nowej generacji”<\/h3>\n

WebP<\/strong> to stosunkowo nowy format zapisu grafik bitowych, stworzony przez Google i zaprezentowany w 2010 roku. Mimo \u017ce nie wszyscy o nim s\u0142yszeli, wszystkie nowoczesne przegl\u0105darki internetowe go obs\u0142uguj\u0105.
\nObrazy WebP s\u0105 \u015brednio mniejsze (l\u017cejsze) o 26% od PNG i o 25-34% od JPG<\/a>. <\/p>\n

Podobnie jak w przypadku wspomnianej wy\u017cej kompresji, konwertowa\u0107 obrazy do WebP mo\u017cna r\u0119cznie \u2013 albo automatycznie, za pomoc\u0105 Smush<\/a>, ShortPixel<\/a> lub EWWW Image Optimizer<\/a>. Czyli, mo\u017cesz dalej przygotowywa\u0107 ilustracje w postaci PNG oraz zdj\u0119cia jako JPG \u2013a wtyczki przekonwertuj\u0105 je do WebP w momencie publikacji.
\nZachowaj\u0105 one oryginalne wersje i wy\u015bwietl\u0105 na stronie, je\u017celi rozpoznaj\u0105 u\u017cytkownika korzystaj\u0105cego ze starej przegl\u0105darki, niewspieraj\u0105cej tego formatu (tzw. fallback).<\/p>\n

Kod<\/h2>\n

Kod programistyczny to tekst, wi\u0119c “wa\u017cy” du\u017co mniej ni\u017c obrazki (bitmapy). Ale jego wp\u0142yw na szybko\u015b\u0107 strony nie ogranicza si\u0119 tylko do czasu pobierania go z serwera. Kod wp\u0142ywa bezpo\u015brednio na renderowanie<\/strong>, czyli proces konstruowania strony do wy\u015bwietlenia przez przegl\u0105dark\u0119. Realizuje on te\u017c wszystkie funkcje na stronie \u2013 a ka\u017cda z nich mo\u017ce w jaki\u015b spos\u00f3b wp\u0142ywa\u0107 na czas potrzebny do wy\u015bwietlenia strony.<\/p>\n

“Minifikuj CSS i JavaScript”<\/h3>\n

Kod programistyczny \u2013 w tym przypadku HTML, CSS i JavaScript \u2013 wyj\u015bciowo ma posta\u0107 czyteln\u0105 dla cz\u0142owieka. Ka\u017cda instrukcja w osobnej linii, du\u017co wci\u0119\u0107, komentarze.<\/p>\n

\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/ This snippet will prevent the viewer from being able to right-click on your page. \r\n\r\nfunction f1() {\r\n  if(document.all) { return false; }\r\n}\r\n\r\nfunction f2(e) {\r\n  if(document.layers || (document.getElementById &! document.all)) {\r\n    if(e.which==2 || e.which==3) { return false; }\r\n  }\r\n}\r\nif(document.layers) {\r\n  document.captureEvents(Event.MOUSEDOWN);\r\n  document.onmousedown = f1;\r\n}\r\nelse {\r\n  document.onmouseup = f2;\r\n  document.oncontextmenu = f1;\r\n}\r\n\r\ndocument.oncontextmenu = new function(\"return false\");\r\n\r\n<\/script>\r\n<\/pre>\n
Przyk\u0142adowy kod JavaScript w postaci czytelnej<\/span><\/p>\n
Przegl\u0105darka nie potrzebuje tych sk\u0142adnik\u00f3w i tak samo wyrenderuje kod zupe\u0142nie ich pozbawiony. B\u0119dzie on du\u017co l\u017cejszy \u2013 nawet o 50%. Przy du\u017cej ilo\u015bci kodu mo\u017ce to mie\u0107 znacz\u0105cy wp\u0142yw na czas wczytywania.<\/p>\n
\r\n<script type=\"text\/javascript\">function f1(){if(document.all)return!1}function f2(n){if((document.layers||document.getElementById&!document.all)&&(2==n.which||3==n.which))return!1}document.layers?(document.captureEvents(Event.MOUSEDOWN),document.onmousedown=f1):(document.onmouseup=f2,document.oncontextmenu=f1);document.oncontextmenu = new function(\"return false\");<\/script>\r\n<\/pre>\n
Przyk\u0142adowy kod JavaScript w postaci zminifikowanej<\/span><\/p>\n
Tak zoptymalizowany kod nie b\u0119dzie komfortowo czytelny dla cz\u0142owieka. Dlatego zazwyczaj utrzymuje si\u0119 dwie wersje \u2013 czyteln\u0105, na kt\u00f3rej pracuje programista, oraz zminifikowan\u0105 \u2013 publikowan\u0105 w Internecie.<\/p>\n
Niekt\u00f3re edytory kodu<\/a> (narz\u0119dzia programistyczne) posiadaj\u0105 wbudowan\u0105 funkcj\u0119 minifikacji. <\/p>\n
Mo\u017cna te\u017c u\u017cywa\u0107 online-owych narz\u0119dzi, takich jak Code Beautify<\/a>, kt\u00f3ry potrafi nie tylko minifikowa\u0107 kod r\u00f3\u017cnych j\u0119zyk\u00f3w programistycznych, ale mo\u017ce r\u00f3wnie\u017c dzia\u0142a\u0107 w drug\u0105 stron\u0119 \u2013 zwi\u0119kszaj\u0105c czytelno\u015b\u0107 zminifikowanego kodu.<\/p>\n
Kolejny spos\u00f3b to wtyczki. Minifikacja to bardzo prosta funkcja, wi\u0119c zazwyczaj jest sk\u0142adnikiem wtyczek realizuj\u0105cych r\u00f3\u017cne zadania optymalizacyjne \u2013 np. Autoptimize<\/a>, LiteSpeed Cache<\/a>.<\/p>\n
Jeszcze jedna opcja to minifikacja kodu “w locie” przez platformy CDN, takie jak CloudFlare<\/a>. CloudFlare oferuje bardzo szczodre konto darmowe i r\u00f3wnie\u017c oferuje wtyczk\u0119 do WordPressa<\/a>.<\/p>\n
“Ogranicz nieu\u017cywany JavaScript i kod CSS”<\/h3>\n
Cz\u0119\u015b\u0107 danych pobieranych przez u\u017cytkownik\u00f3w przy wczytywaniu strony internetowej jest, tak naprawd\u0119, zb\u0119dna. Najcz\u0119\u015bciej s\u0105 to popularne frameworki (jak jQuery w JavaScript lub Bootstrap w CSS), z kt\u00f3rych na stronie wykorzystywana jest tylko cz\u0119\u015b\u0107. <\/p>\n
Eliminacja takiego nadmiarowego kodu niestety wymaga r\u0119cznej pracy programisty. Mo\u017cna posi\u0142kowa\u0107 si\u0119 takimi narz\u0119dziami Unused CSS<\/a>, kt\u00f3ry skanuje serwis internetowy pod k\u0105tem fragment\u00f3w kodu CSS, kt\u00f3re w \u017cadnej sytuacji nie s\u0105 wykorzystywane.<\/p>\n
Specyficznym rodzajem nadmiarowego kodu s\u0105 skrypty, kt\u00f3re s\u0105 potrzebne tylko w okre\u015blonej sytuacji (np. w jednym formularzu), a s\u0105 wczytywane wsz\u0119dzie w serwisie. <\/p>\n
Tej sytuacji du\u017co \u0142atwiej zaradzi\u0107 \u2013 np. za pomoc\u0105 wtyczki Asset CleanUp<\/a>. Wtyczka ta pomo\u017ce uporz\u0105dkowa\u0107 nie tylko pliki z kodem JavaScript i CSS, ale r\u00f3wnie\u017c inne wtyczki. \u017beby nie by\u0142y wczytywane na podstronach, w kt\u00f3rych nie s\u0105 potrzebne.<\/p>\n
“Wyeliminuj zasoby blokuj\u0105ce renderowanie”<\/h3>\n
Szczeg\u00f3\u0142owy wynik testu szybko\u015bci wczytywania strony prezentowany jest w postaci wykresu kaskadowego. Za pomoc\u0105 poziomych s\u0142upk\u00f3w pokazuje on czasy wczytywania poszczeg\u00f3lnych sk\u0142adnik\u00f3w strony oraz ich wp\u0142yw na inne elementy.<\/p>\n
\"wykres
\nPrzyk\u0142ad wykresu kaskadowego czasu wczytywania strony<\/span><\/p>\n
Na takim wykresie wida\u0107 sytuacje, w kt\u00f3rych wczytywanie jednego elementu blokuje renderowanie innego. Bardzo cz\u0119sto element blokuj\u0105cy wcale nie jest potrzebny do renderowania g\u00f3rnej cz\u0119\u015bci strony, kt\u00f3ra jest wy\u015bwietlana na samym pocz\u0105tku (“above the fold”). <\/p>\n
Tutaj pierwszym krokiem jest zmiana metody wczytywania wybranych komponent\u00f3w z liniowej na asynchroniczn\u0105 (“async” lub “defer”). Realizuj\u0105 to takie wtyczki jak Async Javascript<\/a> (dodatek do wspomnianego wcze\u015bniej Autoptimize<\/a>), Speed Optimizer<\/a> czy WP Optimize<\/a>.<\/p>\n
Ciekawe rozwi\u0105zanie oferuje wtyczka Flying Scripts<\/a> \u2013 umo\u017cliwia ona wczytywanie skrypt\u00f3w JavaScript na danej podstronie, dopiero kiedy rzeczywi\u015bcie s\u0105 one potrzebne.<\/p>\n
Niestety, w wi\u0119kszo\u015bci przypadk\u00f3w to nie wystarczy i trzeba p\u00f3j\u015b\u0107 krok dalej. Ten kolejny krok to zdefiniowanie tzw. kodu krytycznego<\/strong> (zar\u00f3wno CSS jak i JavaScript), niezb\u0119dnego do prawid\u0142owego zrenderowania g\u00f3rnej cz\u0119\u015bci strony \u2013 oraz przeniesienie go z zewn\u0119trznych plik\u00f3w do kodu \u017ar\u00f3d\u0142owego (HTML) samej strony (tzw. osadzenie “inline”).<\/p>\n
Najlepsze efekty da \u2013 znowu \u2013 r\u0119czna edycja kodu wykonana przez programist\u0119. Ale t\u0119 czynno\u015b\u0107 mo\u017cna spr\u00f3bowa\u0107 zautomatyzowa\u0107. Potrafi\u0105 to na przyk\u0142ad wtyczki Autoptimize<\/a>, Hummingbird<\/a>, Nitropack<\/a>.<\/p>\n
“Ogranicz wp\u0142yw kodu spoza witryny”<\/h3>\n
Wczytywanie komponent\u00f3w z wielu r\u00f3\u017cnych \u017ar\u00f3de\u0142 zawsze wp\u0142ywa negatywnie na czas \u0142adowania strony. Ka\u017cdy dodatkowy serwer, z kt\u00f3rego pobierane s\u0105 dane, to dodatkowe po\u0142\u0105czenia, kt\u00f3rych mo\u017cna unikn\u0105\u0107.<\/p>\n
Pierwszy spos\u00f3b to wyb\u00f3r jednego spo\u015br\u00f3d kilku sprawdzonych CDN\u00f3w hostuj\u0105cych popularne pakiety kodu \u2013 np. cdnjs, jsDelivr. Chodzi o to, \u017ceby wszystkie pakiety pobiera\u0107 z jednego serwera, a nie wielu.<\/p>\n
Drugi spos\u00f3b daje jeszcze lepsze efekty, ale troch\u0119 utrudnia aktualizowanie zewn\u0119trznego kodu. Polega na skopiowaniu wszystkich zewn\u0119trznych zasob\u00f3w na w\u0142asny serwer i wczytywanie ich bez \u0142\u0105czenia si\u0119 z \u017cadnymi innymi serwerami.<\/p>\n
“Zapewnij widoczno\u015b\u0107 tekstu podczas \u0142adowania czcionek internetowych”<\/h3>\n
To komunikat dotycz\u0105cy bardziej wra\u017ce\u0144 u\u017cytkownika (UX) ni\u017c wydajno\u015bci strony. Ale uwzgl\u0119dniamy go tutaj, bo porusza temat czcionek internetowych, kt\u00f3ry r\u00f3wnie\u017c jest zwi\u0105zany z wydajno\u015bci\u0105.<\/p>\n
Ka\u017cda czcionka (font) u\u017cyta na stronie, to dodatkowe dane do wczytania. Niezale\u017cnie od tego, czy czcionka jest wczytywana z serwera strony, czy z CDNa (np. Google Fonts), potrzebuje niezerowego czasu na za\u0142adowanie. <\/p>\n
\u017beby zminimalizowa\u0107 negatywny wp\u0142yw czcionek na czas wczytywania oraz unikn\u0105\u0107 chwilowej nieczytelno\u015bci tekstu (przed pe\u0142nym za\u0142adowaniem fontu), warto u\u017cy\u0107 jednej ze sprawdzonych wtyczek optymalizacyjnych \u2013 Autoptimize<\/a>, WP Optimize<\/a>, Speed Optimizer<\/a>.<\/p>\n
Serwer i sie\u0107<\/h2>\n
Serwer webowy (sprz\u0119t), na kt\u00f3rym jest zainstalowana strona, jego oprogramowanie, konfiguracja, przep\u0142ywno\u015b\u0107 \u0142\u0105czy internetowych, jak r\u00f3wnie\u017c stopie\u0144 obci\u0105\u017cenia serwera i \u0142\u0105czy \u2013 wszystko to ma wp\u0142yw na szybko\u015b\u0107, z jak\u0105 strona WWW jest wczytywana.<\/p>\n
Czasem niezb\u0119dna jest zmiana us\u0142ugi hostingowej<\/a> \u2013 np. na tak\u0105, kt\u00f3ra lepiej wspiera WordPressa \u2013 lub przej\u015bcie na poziom wy\u017cej \u2013 z hostingu wsp\u00f3\u0142dzielonego na VPS lub serwer dedykowany, albo zwi\u0119kszenie parametr\u00f3w rozwi\u0105zania chmurowego.<\/p>\n
“Skr\u00f3\u0107 wst\u0119pny czas reakcji serwera”<\/h3>\n
Czas reakcji serwera w bardzo du\u017cej mierze zale\u017cy od samego serwera \u2013 czyli jako\u015bci us\u0142ugi hostingowej. Zak\u0142adaj\u0105c, \u017ce nie planujesz zmiany dostawcy, mo\u017cesz w pewnym zakresie poprawi\u0107 ten wynik, wdra\u017caj\u0105c w WordPressie cache.<\/p>\n
Cache serwerowy<\/strong> polega na tym, \u017ce ka\u017cda podstrona czy wpis jest zapisywana na dysku serwera w postaci statycznej i nast\u0119pnie serwowana u\u017cytkownikom bezpo\u015brednio z tego statycznego zapisu. Dzi\u0119ki temu jest generowana (przez skrypty oraz baz\u0119 danych) tylko raz zamiast przy ka\u017cdej wizycie.<\/p>\n
Trzy najlepsze wtyczki realizuj\u0105ce cache serwerowy w WordPressie to WP Super Cache<\/a>, W3 Total Cache<\/a> i WP Rocket<\/a>. Przy czym ta ostatnia nie posiada wersji bezp\u0142atnej, oferowana jest wy\u0142\u0105cznie komercyjnie.
\nBardzo popularny jest jeszcze LiteSpeed Cache<\/a>, ale do dzia\u0142ania wymaga hostingu wspieraj\u0105cego LiteSpeed.<\/p>\n
“Wy\u015bwietlaj zasoby statyczne, stosuj\u0105c efektywne zasady pami\u0119ci podr\u0119cznej”<\/h3>\n
Obok wspomnianego wy\u017cej cache serwerowego istnieje te\u017c cache przegl\u0105darkowy<\/strong> \u2013 czyli tzw. pami\u0119\u0107 podr\u0119czna przegl\u0105darki. \u017beby optymalnie go wykorzysta\u0107, serwer przy pobieraniu z niego plik\u00f3w powinien wysy\u0142a\u0107 odpowiednie nag\u0142\u00f3wki http informuj\u0105ce przegl\u0105dark\u0119, jak cz\u0119sto powinna od\u015bwie\u017ca\u0107 (pobiera\u0107 ponownie z serwera) pliki danego typu.<\/p>\n
Pliki statyczne (np. graficzne, ale r\u00f3wnie\u017c dokumenty PDF, skrypty) z definicji si\u0119 nie zmieniaj\u0105, wi\u0119c w ich przypadku czas pomi\u0119dzy od\u015bwie\u017ceniami powinien by\u0107 jak najd\u0142u\u017cszy (np. 6 miesi\u0119cy). Dzi\u0119ki temu, po pierwszej wizycie na stronie, przy wi\u0119kszo\u015bci kolejnych zasoby statyczne b\u0119d\u0105 wy\u015bwietlane przy wykorzystaniu cache przegl\u0105darkowego \u2013 czyli plik\u00f3w zapisanych lokalnie na dysku u\u017cytkownika.<\/p>\n
Cache przegl\u0105darkowy mo\u017cna skonfigurowa\u0107 edytuj\u0105c ustawienia hostingu (np. w pliku .htaccess), ale najwygodniej u\u017cy\u0107 jednej ze wtyczek do cache serwerowego. Ka\u017cda z nich pozwala konfigurowa\u0107 r\u00f3wnie\u017c cache przegl\u0105darkowy.<\/p>\n
“Wcze\u015bniej nawi\u0105\u017c po\u0142\u0105czenia z wymaganymi \u017ar\u00f3d\u0142ami”<\/h3>\n
“Preconnect<\/strong>” to metoda polegaj\u0105ca na nawi\u0105zaniu po\u0142\u0105czenia z zewn\u0119trznym \u017ar\u00f3d\u0142em danych (skrypt\u00f3w, czcionek, grafik itd.) tak szybko, jak tylko si\u0119 ta \u2013 ju\u017c w nag\u0142\u00f3wku strony. Dzi\u0119ki temu, kiedy nadejdzie kolej na wczytanie zasobu z tego serwera, potrwa to u\u0142amek sekundy kr\u00f3cej.<\/p>\n
Opcj\u0119 t\u0119 oferuj\u0105 min. wtyczki Autoptimize<\/a>, Speed Optimizer<\/a>, Hummingbird<\/a>.<\/p>\n
“Za\u0142aduj wst\u0119pnie kluczowe \u017c\u0105dania”<\/h3>\n
“Preload<\/strong>“, w przeciwie\u0144stwie do “preconnect”, to nie tylko nawi\u0105zanie po\u0142\u0105czenia z serwerem, ale wcze\u015bniejsze wczytanie danego zasobu (np. czcionki, grafiki). Ma sens oczywi\u015bcie tylko dla g\u00f3rnej cz\u0119\u015bci strony (“above the fold”).<\/p>\n
Potrafi to WP Optimize<\/a>, ale r\u00f3wnie\u017c niekt\u00f3re wtyczki cache\u2019uj\u0105ce \u2013 np. WP Super Cache<\/a>, LiteSpeed Cache<\/a>.<\/p>\n
“W\u0142\u0105cz kompresj\u0119 tekstu”<\/h3>\n
Podobnie, jak za pomoc\u0105 ZIP lub RAR mo\u017cna zmniejszy\u0107 wag\u0119 plik\u00f3w, da si\u0119 te\u017c zmniejszy\u0107 wag\u0119 strony internetowej, kompresuj\u0105c jej zawarto\u015b\u0107 tekstow\u0105. Oczywi\u015bcie chodzi o kompresj\u0119 w locie, na czas transmisji danych \u2013 praktycznie niezauwa\u017caln\u0105 dla u\u017cytkownik\u00f3w.<\/p>\n
Serwer, wysy\u0142aj\u0105c dane, kompresuje je za pomoc\u0105 algorytmu GZIP<\/strong> lub BROTLI<\/strong> \u2013 a przegl\u0105darka je dekompresuje. <\/p>\n
Sprawdzi\u0107, czy dane tekstowe wskazanej strony s\u0105 kompresowane mo\u017cna za pomoc\u0105 narz\u0119dzia Gzip Test<\/a>.<\/p>\n
W przypadku negatywnego wyniku kompresj\u0119 trzeba w\u0142\u0105czy\u0107 w konfiguracji serwera \u2013 lub danego serwera wirtualnego. Taka opcja mo\u017ce by\u0107 dost\u0119pna w panelu hostingowym, ale w niekt\u00f3rych sytuacjach konieczna b\u0119dzie edycja pliku .htaccess lub wsparcie administratora.<\/p>\n
Kt\u00f3re wtyczki do optymalizacji WordPressa wybra\u0107<\/h2>\n
Je\u017celi Google Page Speed Insights wy\u015bwietla tylko pojedyncze sugestie optymalizacyjne dla Twojej strony, mo\u017cesz za\u0142atwi\u0107 spraw\u0119 pojedynczymi wtyczkami. Je\u015bli natomiast uwag jest sporo, prawdopodobnie najlepszym wyj\u015bciem b\u0119dzie skorzystanie z jednej z uniwersalnych wtyczek optymalizacyjnych.<\/p>\n
Oto zestawienie rekomendowanych przez nas wtyczek, kt\u00f3rych nazwy pad\u0142y w niniejszym artykule:<\/p>\n