Tym razem zajmiemy się prostą optymalizacją wydajności, związaną z cache’owaniem zasobów internetowych.
Większość plików, jakich potrzebuje przeglądarka, żeby wyświetlić stronę internetową, ma możliwość ponownego wykorzystania, czy to w obrębie całego serwisu, czy pojedynczej strony. Dla przykładu: za pomocą jednego pliku CSS można określić wygląd wszystkich elementów strony internetowej. Ten plik jest pobierany przez przeglądarkę na każdej podstronie serwisu.
Gdyby tak pobrać ten plik tylko przy pierwszym wejściu na stronę i przechowywać gdzieś na naszym komputerze… Oznaczałoby to, że nie będzie trzeba tego pliku pobierać ponownie przy przejściu na kolejną podstronę.
I takie rozwiązanie jak najbardziej istnieje – nazywa się właśnie cache’owaniem.
Przechowywanie podręczne – pamięć podręczna (ang. cache) jest pewną formą buforowania, której celem jest poprawa efektywności realizacji operacji. Polega na gromadzeniu kopii danych w pamięci w celu poprawy efektywności ich przetwarzania
Pamięć podręczna (ang. cache) – mechanizm, w którym część spośród danych zgromadzonych w źródłach o długim czasie dostępu i niższej przepustowości jest dodatkowo przechowywana w pamięci o lepszych parametrach. Ma to na celu poprawę szybkości dostępu do tych informacji, które przypuszczalnie będą potrzebne w najbliższej przyszłości.
Źródło: Materiały wykładowe PUT
Informację na temat możliwości cache’owania konfiguruje się zazwyczaj po stronie serwera. W moich rozważaniach skupimy się na najpopularniejszym chyba systemie serwerowym, jaki oferują hostingodawcy – Apache. Istnieją oczywiście inne rozwiązania umożliwiające hosting stron internetowych jak nginx, jednak w naszym przypadku oprzemy się właśnie na Apache.
Za pomocą małego pliku o nazwie .htaccess mamy możliwość edytowania konfiguracji Apache dla poszczególnej strony www. Opcję tę musi włączyć hostingodawca, jednak z własnego doświadczenia wiem, że zazwyczaj domyślnie możliwość takiej konfiguracji jest włączona.
Istnieje też kilka technik pozwalających na określenie zasad, na bazie których ma działać cache’owanie w przeglądarce, ja jednak skupię się na sposobie najbardziej wygodnym, w mojej ocenie, dla deweloperów – czyli technice, która określa, jakiego typu jest dany plik (MIME Type) na serwerze oraz w zależności od typu ustala, jak długo ma być ważny. Ale po kolei.
Co to jest MIME type?
Media type, lub zwany inaczej MIME type (…) jest identyfikatorem formatu plików. Identyfikatory te w sposób ogólny mają stanowić podpowiedź jaki typ danych zawiera plik. Taki typ składa się z 2 części – atrybutu określającego ogólny typ danych oraz wartości, która definiuje konkretne rozszerzenie pliku. Pierwotnie stworzony z myślą o załącznikach w mailach z powodzeniem został wykorzystany również w innych zastosowaniach.
Źródło: RFC2046
Typów MIME jest tyle, ile jest rozszerzeń plików (blisko 2 tysiące), jednak tylko garstka rozszerzeń jest na co dzień wykorzystywana przy budowie stron internetowych.
Krok pierwszy
W pliku .htaccess za pomocą dowolnego edytora tekstu dodajemy następujący kod:
AddType text/html html
AddType text/css css
Co konkretnego wykonaliśmy? Powiedzieliśmy serwerowi, że plik html na serwerze ma być uznawany za plik tekstowy przechowujący kod html. Druga linijka kodu robi to samo, ale w tym przypadku pliki .css będą uznawane za pliki tekstowe przechowujące kod CSS.
W rzeczywistości podstawowe pliki, takie jak .html, .jpg, .gif, .css, w standardowej konfiguracji serwera posiadają już poprawnie skonfigurowane typy MIME. Jednak, dla porównania, pliki fontów pobierane przez przeglądarki już takich oznaczeń w domyślnej konfiguracji mogą nie posiadać, dlatego warto przy okazji skonfigurować wszystkie typy, z jakich możemy w przyszłości skorzystać.
Krok drugi
Dla danego typu MIME należy określić, jaki ma on termin ważności. Tutaj też warto rozważyć, które pliki i z jaką częstotliwością się zmieniają. Jeżeli chodzi o pliki graficzne, w tych zazwyczaj nie widać zmian. Co najwyżej występuje plik o innej nazwie w tym samym miejscu. Pliki CSS nie zmieniają się po odpaleniu serwisu. Mogą występować pewne modyfikacje, ale mają one charakter okresowy, np. co pół roku, kiedy poprawiamy jakiś element strony lub dodajemy coś nowego. Natomiast pliki z rozszerzeniem html mają tendencję do ciągłej zmiany (jak np. strona z najnowszymi wiadomościami ze świata) i takich plików nie powinniśmy cache’ować, jeżeli zależy nam na tym, by użytkownik zawsze widział najnowsze wiadomości.
Żeby określić „datę ważności”, należy w pliku .htaccess dodać następującą linijkę kodu:
ExpiresByType text/html „access plus 0 seconds”
ExpiresByType text/css „access plus 1 year”
Za pomocą tego kodu serwer będzie traktować pliki html jako zawsze przeterminowane – przy każdym zapytaniu o dany plik, serwer prześle plik do użytkownika.
Natomiast plik CSS będzie ważny przez rok od momentu pobrania zasobu przez przeglądarkę. W przypadku ponownego zapytania o ten plik, serwer wyśle odpowiedź: „Hej, ten plik już kiedyś pobrałeś, nadal go masz, więc skorzystaj ze swojej kopii!”.
Bardziej technicznie mówiąc: zostanie zwrócony kod 304 not modified, w odróżnieniu do nie cache’owanych zasobów, dla których zazwyczaj zwracany jest kod 200 OK (przesłano zawartość pliku).
No dobra, ale co nam to daje?
Dobrze skonfigurowany serwer sprawia, że przy kolejnym wejściu na niego nie będzie trzeba ściągać całej zawartości strony. Dla przykładu: ta strona, którą właśnie czytasz, składa się z około 125 zasobów pobieranych przez przeglądarkę. Jeżeli nie jest to twój pierwszy artykuł na tym blogu, to jest szansa, że kiedy tutaj się znalazłeś, przeglądarka musiała pobrać na nowo tylko 27 z 125 plików, ponieważ pozostałe były w pamięci podręcznej komputera.
Podsumowując
Dobre cache’owanie oznacza, że nie tylko zyskujemy na czasie, ponieważ nie musimy czekać na przesłanie wszystkich materiałów przez serwer, ale również nie „spalamy” transferu po stronie serwera, który w większości ofert pakietów ekonomicznych na rynku potrafi być limitowany w skali miesiąca. Zyskujemy my, jako dostarczyciele usługi, a także nasi odbiorcy, ponieważ nie muszą niepotrzebnie czekać na wyświetlenie swojej strony internetowej.
A jeżeli jeszcze uwzględnimy fakt, że zacache’owane pliki oszczędzają np. pakiet danych na telefonach, staje się jasne, że dzięki tej technologii korzystają wszyscy.
