Nowoczesne strony www. Część IV: szybkie strony

Szybkie strony www

W niniejszej części instruktażu dotyczącego dobrych praktyk projektowania i tworzenia witryn internetowych mam zamiar przedstawić podstawowy zakres wiedzy związanej z poprawieniem szybkości wyświetlania się stron w przeglądarce internetowej. Temat jest bardzo rozległy, więc skupię się na kilku praktycznych poradach, jednak z odrobiną koniecznej teorii na wstępie.

Odrobina teorii

Za każdym razem gdy strona www jest wyświetlana w przeglądarce internetowej muszą zostać pobrane z serwera wszystkie jej elementy, takie jak sam kod HTML, różne skrypty JavaScript, ewentualne obrazki, style CSS i tym podobne. Niektóre strony mogą składać się tylko z kilku plików i mieć małe rozmiary – może kilka kilobajtów, a wówczas strona powinna się ładować dość szybko. Jednak inne strony mogą składać się z dziesiątek, a nawet z setek plików, a ich całkowita waga może wynosić nawet kilka megabajtów. Może to być powodem spowolnionego wyświetlania się takich stron. Problem jest zauważalny szczególnie wtedy, gdy łącze internetowe nie należy do zbyt szybkich. Dodatkowo, należy pamiętać o tym, że dla każdego pliku, który stanowi część strony, a mogą to być przykładowo obrazki lub arkusze CSS, przetwarzane są osobne, dodatkowe żądania HTTP, które umożliwiają pobranie zawartości pliku z serwera. Im więcej osobnych plików będących częścią strony, tym więcej osobnych żądań HTTP i tym większy ruch zapytań i odpowiedzi pomiędzy klientem a serwerem, co może stać się jedną z przyczyn powolnego wyświetlania się strony.

Protokół HTTP
Protokół HTTP

Powolne strony nie tylko zniechęcają odwiedzających do dalszych działań w witrynie, ale psują ogólną reputację witryny w sieci. Jest bowiem wiele serwisów internetowych, takich jak Alexa.com, które nieustannie gromadzą dane o jakości witryn obecnych w sieci i można w nich podejrzeć, między innymi, informacje o szybkości danej witryny, ilości odwiedzających ją użytkowników i tym podobne. Pomimo iż algorytm pozycjonowania stron w wynikach wyszukiwania Google nie jest do końca znany i nieustannie się zmienia, to wedle pogłosek krążących wśród zawodowych projektantów witryn internetowych, a także ekspertów SEO, szybkość wyświetlania się stron może mieć niemały efekt na ich docelową pozycję w wyszukiwarce, a przecież właśnie na dobrej pozycji w wyszukiwarkach najbardziej wszystkim wlaścicielom witryn zależy. Warto zatem zadbać o to, by strony wyświetlały się tak szybko, jak tylko jest to możliwe.

W związku z powyższym należy wiedzieć, że powolne strony nie wróżą niczego dobrego i warto jak najszybciej sprawić, aby strony ładowały się szybko. Jak to zrobić? Otóż postaram się w tym zakresie udzielić kilku podstawowych porad.

Pamięć podręczna przeglądarki

Pamięć podręczna przeglądarki może służyć sporą pomocą w przyśpieszeniu wyświetlania się stron www, przechowując niektóre z plików lokalnie, w swojej pamięci podręcznej, przez określony czas, zaraz po pierwszym pobraniu wszystkich elementów strony. Oczywiście strona może się wciąż wolniej wyświetlać przy pierwszym jej odwiedzeniu, jednak przy kolejnych wizytach na stronie nie ma konieczności ponownego pobierania przechowywanych lokalnie elementów, aż do czasu ich terminu przedawnienia. Korzystanie w odpowiedni sposób z pamięci podręcznej przeglądarki internetowej znacznie przyśpiesza wyświetlanie się strony w przeglądarce.

Zatem warto jest określić dłuższy termin przydatności dla tych elementów strony, które z małym prawdopodobieństwem będą się często i regularnie zmieniać. Takie elementy mogą być pobierane raz na określony czas. Przykładem może być logo firmowe obecne w witrynie. Twoje logo w witrynie internetowej, na przykład, prawdopodobnie nie zmieni się z dnia na dzień, więc można dla niego ustawić dłuższy termin przydatności, tak aby jego pobieranie nie powtarzało się za każdym razem gdy użytkownik odświeża stronę.

Jak ustalić terminy ważności różnego rodzaju treści? Jeśli chodzi o popularny serwer Apache, przedstawię prostą metodę polegającą na dodaniu odpowiednich dyrektyw do pliku .htaccess.

Oto przykładowe dyrektywy określające terminy ważności niektórych rodzajów treści:

<IfModule mod_deflate.c>
ExpiresActive on
ExpiresDefault „access plus 1 month”
# CSS
ExpiresByType text/css „access plus 1 year”
# Data interchange
ExpiresByType application/atom+xml „access plus 1 hour”
ExpiresByType application/rdf+xml „access plus 1 hour”
ExpiresByType application/rss+xml „access plus 1 hour”
ExpiresByType application/json „access plus 0 seconds”
ExpiresByType application/ld+json „access plus 0 seconds”
ExpiresByType application/schema+json „access plus 0 seconds”
ExpiresByType application/vnd.geo+json „access plus 0 seconds”
ExpiresByType application/xml „access plus 0 seconds”
ExpiresByType text/xml „access plus 0 seconds”
# HTML
ExpiresByType text/html „access plus 0 seconds”
# JavaScript
ExpiresByType application/javascript „access plus 1 year”
ExpiresByType application/x-javascript „access plus 1 year”
ExpiresByType text/javascript „access plus 1 year”
# Media files
ExpiresByType audio/ogg „access plus 1 month”
ExpiresByType image/bmp „access plus 1 month”
ExpiresByType image/gif „access plus 1 month”
ExpiresByType image/jpeg „access plus 1 month”
ExpiresByType image/png „access plus 1 month”
</IfModule>

Kompresja gzip

Kompresja gzip jest w stanie znacznie przyśpieszyć strony internetowe, redukując wielkość pobieranych z serwera plików nawet o 70%. Jak działa ten mechanizm? Otóż gzip lokalizuje i tymczasowo podmienia powtarzające się ciągi znaków w plikach tekstowych, co sprawia że to rozwiązanie idealnie nadaje się do treści HTML i CSS, w których różne ciągi znaków bardzo często lubią się powtarzać. Jest to bardzo proste, a zarazem bardzo skuteczne rozwiązanie, które należy koniecznie wdrażać do większości projektów witryn internetowych.

Jak uruchomić kompresję gzip? Sposobów może być kilka, także w zależności od stosowanego serwera. Przedstawię tutaj prostą metodę, opartą na dyrektywach dla serwera Apache, umieszczonych w pliku .htaccess:

<IfModule mod_deflate.c.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Optymalizacja plików tekstowych

Im więcej plików do pobrania, tym więcej żądań HTTP, a im większe pliki tym dłużej trwa ich pobieranie z serwera. Co zatem warto zrobić w celu przyśpieszenia pobierania plików z serwera? Otóż przede wszystkim warto zoptymalizować pliki ilościowo. Oznacza co, że jeśli przykładowo korzystamy z wielu osobnych plików CSS, wówczas warto zgrupować pliki do jednego większego pliku. W związku z naturą protokołu HTTP, pobieranie jednego większego pliku tekstowego trwa krócej niż pobieranie tej samej ilości danych, zawartej w kilku mniejszych plikach.

Dodatkowe przyśpieszenie można uzyskać optymalizując pliki jakościowo, czyli eliminując z nich niepotrzebne dane, takie jak przykładowo średniki na końcu wierszy oraz spacje w plikach CSS, lub niepotrzebne spacje w plikach HTML.

Przykładowy niezoptymalizowany krótki fragment CSS (135 bajtów):

html, body {
font-family: ‚PT Sans’, sans-serif; line-height:16pt;
}
h1,h2,h3,h4,h5,h6 {
color: #0c1b28;
}

Ten sam fragment CSS, lecz zoptymalizowany (94 bajty):

html,body{font-family:’PT Sans’,sans-serif;line-height:16pt}
h1,h2,h3,h4,h5,h6{color:#0c1b28}

Optymalizacja grafiki

Typowym błędem, popularnym wśród początkujących projektantów witryn internetowych, jest przesyłanie na serwer nie zoptymalizowanej grafiki, co jest popularną przyczyną powolnego wyświetlania się stron.

Wszelkie obrazki związane ze stronami www powinny zostać zoptymalizowane pod kątem internetu przed ich przesłaniem na serwer. Wiele programów do obróbki grafiki pozwala na osiągnięcie tego efektu w prosty i szybki sposób. Sposób postępowania zależy od stosowanego programu graficznego.

Google zaleca w tym celu korzystać z darmowego programu convert. Jest on popularny i bardzo prosty w użyciu, bezpośrednio z wiersza poleceń. Przykładowe użycie programu convert:

magick convert logo.png -strip logo_min.png

Należy koniecznie pamiętać, że obrazki nie powinny być w żadnym wypadku przesyłane na serwer w rozdzielczości większej, niż ta wymagana do ich prawidłowego wyświetlania w docelowym dla potrzeb stron formacie.

Korzystanie z CDN

CDN (Content Delivery Network) składa się ze zbioru serwerów rozmieszczonych na całym świecie, które regularnie pobierają zawartość danej witryny internetowej i między innymi zachowują w pamięci podręcznej te pliki, które nie muszą być regularnie aktualizowane, takie jak obrazki, czy style CSS.

Ten prosty sposób działania pozwala na bardzo skuteczną optymalizację stron www. W ramach usług oferowanych przez niektóre systemy CDN znajdują się ciekawe rozwiązania, takie jak wysoka optymalizacja przechowywanych w pamięci podręcznej plików. Przechowywane w lokalnej pamięci podręcznej serwerów pliki są kompresowane przed ich przesłaniem do przeglądarki internetowej, co sprawia, że wyświetlanie się stron jest jeszcze szybsze.

CDN
CDN

CDN to bardzo fajne rozwiązanie, poprawiające nie tylko szybkość wyświetlania się stron, lecz także ogólnoświatową dostępność serwisu, co sprzyja również lepszej pozycji stron w wynikach wyszukiwania.

Niestety CDN ma jedną wadę, a mianowicie to dość kosztowna usługa, więc korzystają z niej przeważnie duże przedsiębiorstwa, którym zależy na ogólnoświatowej dostępności ich witryn internetowych.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *