„Wykorzystaj pamięć podręczną przeglądarki”, czyli jak serwować witrynę użytkownikom jeszcze szybciej?

10 Comments

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.

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ń.

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.

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.

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.

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…

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.

ZNAJDZIESZ NAS NA FACEBOOKU

Polecamy także inne artykuły

Zobacz wszystkie artykuły
10 Comments
    • Michał
    • 21 marca 2017
    Odpowiedz

    A mi pomogło wg danych z google’owego PageSpeed Insights + 8 punktów. To chyba nie jest zły wynik? Kwestia dostosowania długości czasu ważności – zobaczymy w praktyce. Dziękuję tak czy siak. 🙂

    • Damian
    • 7 listopada 2016
    Odpowiedz

    Jeśli strona stoi na WordPressie można skorzystać z wtyczki w3 total cache. Mnóstwo opcji cachowania. Do tego środowisko testowe, gdzie każdą opcję możemy bezpiecznie przetestować na naszej stronie przed wprowadzeniem danych zmian.

    • Odpowiedz

      Wziąłeś pod uwagę jak duże obciążenie generuje wspomniana przez Ciebie wtyczka? Dodatkowo jej implementacja na wielu stronach kończy się niepowodzeniem, zwłaszcza jeśli użytkownik nie wie dokładnie co robi i po co zaznacza kolejne opcje.

    • Paweł
    • 6 sierpnia 2016
    Odpowiedz

    Mi po wklejeniu pozostaje taki komunikat i co teraz?

    Skorzystaj z pamięci podręcznej przeglądarki w przypadku następujących zasobów:

    http://connect.facebook.net/pl_PL/all.js (20 minut)
    http://platform.twitter.com/widgets.js (30 minut)
    https://apis.google.com/js/plusone.js (30 minut)
    https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 minut)

      • Jacek Jagusiak
      • 6 sierpnia 2016
      Odpowiedz

      To są zewnętrzne zasoby, aby kod zadziałał musiałyby te skrypty byc lokalnie. Na zewnętrzne nie zadziała.

    • Igor
    • 24 lipca 2015
    Odpowiedz

    Testuje nie tylko szybkość. Nna zachodnich guglach znalazłem, że ten kod trzeba go wkleić na początku htaccess no i mam 2 punkty w górę. Ale to tyle co nic.

    • Igor
    • 24 lipca 2015
    Odpowiedz

    Nie sknociłem, po prostu testuje różne wtyczki. Włączam, wyłączam i ustawiam chyba od 2 godzin.
    Z tym że głównie walczę o optymalizację na komórki.

      • Jacek Jagusiak
      • 24 lipca 2015
      Odpowiedz

      A na co Ci tutaj wtyczki, wklejasz kod do htacces i po sprawie 😉

    • Igor
    • 24 lipca 2015
    Odpowiedz

    U mnie ten wpis nic nie zmienia.

      • Jacek Jagusiak
      • 24 lipca 2015
      Odpowiedz

      Bo nie zrobiłeś tego pewnie tak jak trzeba, widać że nie działa cachowanie, więc coś sknociłeś przy wklejaniu do htacces

 

Leave a Comment