668 145 480 [email protected]

Gdy otworzymy przeglądarkę i uruchomimy w niej naszą witrynę to musi ona załadować ogromne ilości elementów zanim przed naszymi oczyma ukaże się strona w pełnej okazałości. W większości stron mamy przecież logo, pliki CSS czy JavaScript jak i masę innych grafik, dodatków etc.

Wykorzystując pamięć podręczną przeglądarki (tzw. cache) sprawiamy, że w momencie gdy użytkownik wejdzie na naszą stronę i załaduje wszystkie, potrzebne do jej wyświetlenia elementy to przechodząc na inną podstronę nie będzie już musiał tego robić ponownie, chodzi przede wszystkim o CSS’y i zdjęcia (jak logo), które powtarzają się na każdej podstronie bądź te, które zostały już raz załadowane. Oczywiście nie użytkownik je „ładuje”, a przeglądarka, ale dzięki temu odwiedzający każdą kolejną podstronę dostaje znacznie szybciej niż poprzednie.

[showmyads]

Jeśli więc testowaliście Wasze strony pod kątem prędkości ładowania i otrzymaliście sugestie mówiącą o wykorzystaniu pamięci podręcznej przeglądarki to poniżej znajdziecie sposoby na wdrożenie takowych zmian.

Jak wykorzystywać pamięć podręczną przeglądarki?

W większości przypadków wystarczy dodać odrobinę kody do pliku na serwerze, który nazywa się .httaccess. Użytkownicy WordPressa po zainstalowaniu wtyczki Yoast WordPress SEO mają sprawę ułatwioną, gdyż z poziomu panelu administracyjnego mogą edytować wspomniany plik. Cała reszta musi zalogować się przez ssh bądź ftp i samodzielnie go wyedytować.

Plik .htaccess pełni rolę kontrolą, pozwala nam zarządzać wieloma rzeczami związanymi z naszą witryną i wbrew pozorom nie służy tworzeniu „jedynie” przekierowań.

ZOBACZ:  Matt atakuje blogi z wpisami gościnnymi!

 

[sociallocker]

Teraz wystarczy wkleić do pliku .htaccess (dla serwerów na Apache) poniższy kod, zróbcie to na końcu, ale nie pozostawiajcie żadnych białych znaków tuż po nim, zero spacji czy enterów.

Zapisujemy edytowany plik i przechodzimy do naszej strony. Używając kombinacji CTRL+F5 odświeżamy witrynę i sprawdzamy uzyskane rezultaty.

[/sociallocker]

 

Jeśli powyższy kod nie odniósł pożądanego efektu to warto spróbować dokleić kod, który znajduje się poniżej:

Wartość max-age to liczba sekund, więc możecie to modyfikować jak tylko to się wam podoba.

ZOBACZ:  Chwila chwila, czyli "chwilówki" w SERP'ach

Dla serwerów na Nginx:

Powyższe regułki zadziałają jedynie na pliki znajdujące się fizycznie na serwerze, wszelkie zewnętrzne zasoby nie zostaną objęte.

Ale o co chodzi z tymi datami?

W kodzie widzicie zapiski takie jak „1 year” czy „1 month” przy konkretnych rozszerzeniach plików. Oznacza to, że przykładowo pliki .jpg powinny być pamiętane przez przeglądarkę przez jeden rok od czasu pierwszej odsłony. Wszystko się zmienia jeśli ręcznie wyczyścimy cache przeglądarki, wtedy po ponownym wejściu na witrynę przeglądarka zapisze je w swojej pamięci na nowo.

[showmyads]

Oczywiście daty „trwałości” – tak sobie je nazwę – możecie zmieniać dowolnie i „1 year” śmiało możecie zastąpić „1 month” i odwrotnie.

Czy nie będzie żadnych problemów?

Oczywiście, że będą, ale zmiany te wpłyną w większości wypadków na plus aniżeli na minus. Pamiętajmy że gdy ustawimy pliki html bądź zdjęcia z okresem „trwałości” jednego roku to jeśli przed jego upłynięciem naniesiemy na witrynę jakieś zmiany to mogą one nie być widoczne dla wszystkich użytkowników, zwłaszcza dla tych, którzy przykładowo dzień wcześniej odwiedzili daną podstronę.

Przy częstych zmianach w stylach na stronie możemy skorzystać z pewnego triku, który pozwoli zaprezentować każdą zmianę powracającym użytkownikom bez potrzeby czyszczenia cachu przeglądarki po ich stronie. Zamiast tworzyć plik style.css warto nazwać go style_1.css i po kolejnych zmianach zmienić mu nazwę na style_2.css. I tak dalej…

ZOBACZ:  Rel=Publisher i Rel=Author na stronie, jak to ugryźć?

Na koniec pamiętajmy, aby używać nagłówków Expires LUB Cache-Control: max-age. Tak samo używamy nagłówka ETag albo Last-Modified. W obu przypadkach nie korzystajcie z dwóch metod jednocześnie, gdyż to nie ma najmniejszego sensu.