Optymalizacja strony www pod Google - Jak przyspieszyć?

Z okazji migracji strony FarmaStron do chmury AWS, przygotowałem listę rzeczy, na które musisz wprowadzić, aby zoptymalizować stronę www pod Google jeśli chodzi o aspekty związane z czasem ładowania strony internetowej. Obecnie ma to kluczowe znacznie dla Google, a tym samym na pozycję w wynikach wyszukiwania.

Najlepsze efekty osiągniesz wprowadzając wszystkie porady, lecz każda z osobna również może znacznie przyspieszyć ładowanie, stąd zapraszam do lektury i zachęcam do iteracyjnego wprowadzania każdej z wymienionych technik.

Google udostępnia narzędzie PageSpeed Insights, w którym możesz podać adres swojej strony internetowej i "zlecić" Googlowi jej przeanalizowanie. Otrzymasz wynik wraz z sugestiami co możesz jeszcze zoptymalizować. Wygląda to następująco:

Wynik dla urządzeń mobilnych przed wprowadzeniem opisanych porad optymalizujących

Google indeksuje i "ocenia" optymalizację strony www przede wszystkim pod kątem szybkości ładowania i wygody użytkowania na urządzeniach mobilnych (ilość ruchu w internecie z urządzeń mobilnych przewyższa ruch z komputerów stacjonarnych i laptopów). Z tego też powodu szybka strona internetowa to podstawa do zadowolenia odwiedzających, przez bycie tzw. "Mobile Friendly" i tym samym wysokiej pozycji w wynikach wyszukiwania.

Jeśli Twoja strona internetowa ładuje się wolno na komputerze, to zapewne ładuje się jeszcze wolniej na smartfonach. A kiedy strona się ładuje wolno, to więcej użytkowników traci cierpliwość i zaczyna szukać innych stron, a pozycja Twojej strony w Google spada, tracąc jednoczenie ruch, który kieruje się do innych, szybszych stron.

Koniecznie czytaj dalej, aby poznać sposoby optymalizacji przyspieszania stron www. Część można zrobić nawet bez umiejętności deweloperskich. Inne trzeba zlecić osobie opiekującej się stroną internetową. Jednak każda z porad może być wdrażana osobno i będzie mieć duży wpływ na czas ładowania strony.

Jednym z główych składników czasu potrzebnego na wyświetlenie strony internetowej w przeglądarce jest czas, jaki potrzebuje serwer www, żeby odpowiedzieć stroną HTML. Na czas odpowiedzi serwera wpływa szybkość samego hostingu oraz kod strony internetowej wykonywany po stronie serwera, który przygotowuje kod HTML oczekiwany przez przeglądarkę.

W przypadku stron postawionych na WordPress na serwerze najpierw przetwarzany jest kod PHP, dzięki któremu strona jest dynamiczna i może być zarzadzana z poziomu panelu administracyjnego. Warto wtedy sprawdzić, która wersja PHP jest uruchomiona i czy można zmienić na nowszą – nowe wersje PHP mogą być zdecydowanie szybsze.

"Cache" – bez niego wiele stron nie było by wstanie być dobrze zoptymalizowana

Innym rozwiązaniem jest cachowanie (zapamiętywanie) raz już wygenerowanej wersji statycznej HTML i przy kolejnym zapytaniu o tą samą stronę zamiast generować ją od nowa to wysyłać od razu z cache. W przypadku WordPress robi się to dodatkowym pluginem np. W3 Total Cache. Wiele stron generuje odpowiedź tak wolno, że by nie byłyby w stanie działać bez cachowania.

Mając włączony system cachowania trzeba pamiętać o jego czyszczeniu po zaktualizowaniu oryginalnej treści, która znajduje się na danej stronie. Inaczej użytkownikom niezalogowanym ciągle będzie serwowana niezaktualizowana treść. Z doświadczenia wiem, że pamiętanie o istnieniu cache, może być szczególnie trudne dla mniej doświadcznonych użytkowników.

Kolejnym dużym składnikiem czasu potrzebnego na wyświetlenie strony internetowej w przeglądarce jest czas pobierania wszelkich plików. Chodzi tutaj o kod strony HTML, wszelkie skrypty JavaScript, pliki ze stylami CSS i  najwięszke – zdjęcia oraz inne pliki graficzne. Na przykład każdy zbędny znak w plikach tekstowych, taki jak np. znak spacji, to niepotrzebnie dodane bajty potrzebne do przesłania do odbiorcy.

Zmniejszanie plików tekstowych obywa się używając narzędzi, które zbiorczo nazywa się po angielsku "Minifiers". Ręcznie można to zrobić nawet przez stronę internetową, wklejając treść pliku do pola textarea. Spróbuj wyszukać takie frazy jak: "HTML MINIFIER", "CSS MINIFIER", "JS MINIFIER", a na pewno znajdziesz dużo tego typu narzędzi.

Zmniejszanie wielkości plików graficznych to osobny temat. Można to zrobić na kilka sposobów, najlepiej stosując wszystkie na raz:

1. Zmniejsz rozdzielczość pliku w programie graficznym (np. Photoshop, czy darmowy GIMP).

   Zdjęcia zrobione przez aparat mają bardzo dużą rozdzielczość rzędu np. 3000 czy 5000 pikseli. Im więcej pikseli tym większa wielkość pliku. Zdjęcia na stronę internetową często zmniejsza się do niższej rozdzielczości, która zależy od projektu graficznego danej strony internetowej oraz od urządzenia na którym ma być wyświetlana strona. Można bowiem przygotowywać, wiele wersji o różnych rozdzielczościach dopasowanych do różnych urządzeń.

2. Optymalizuj jakość pliku graficznego. Znowu dokonasz tego podczas zapisywania pliku z programie graficznym.

   

   Zapisywanie pliku w programie GIMP

3. Stosuj odpowiedni format pliku. Różne grafiki mają różną wielkość pliku w zależności od formatu w którym są zapisane. Dla przykłądu zdjęcie z aparatu będzie mniejsze w formacie JPG niż w formacie PNG. Są to dwa od lat istniejące formaty. Jednak specjalnie dla grafik internetowych powstał format WebP (wspierane przeglądarki) w którym grafiki będą najmniejsze zachowując jakość prawie nie do odróżnienia, nawet jeśli plik będzie aż 75% mniejszy. Do konwersji na format WebP możesz użyć narzędzia squoosh.app.

   

   Zamiana grafiki na format WebP w squoosh.app

Poniżej znajdziesz przykładowy kod HTML do zastosowania na własnej stronie www:

<picture>
  <source type="image/webp" media="(max-width: 782px)" srcset="Mobile.webp 1x" />
  <source type="image/webp" srcSet="Desktop.webp 1x" />
  <img src="Desktop.jpg" alt="Moje zdjęcie" />
</picture>

Przeglądarka najpierw pobiera kod HTML Twojej strony internetowej, a następnie go parsuje – czyli czyta co się tam znajduje. Kiedy napotka na zewnętrzny zasób do pobrania którym może być np. plik ze skryptem JavaScript, ze stylami CSS, czy zdjęcie, to zaczyna go pobierać.

Skrypty i pliki CSS umieszczone w sekcji head wstrzymują przeglądarkę przed dalszym parsowaniem dopóki nie pobiorą i przeparsują zewnętrzny zasób. Dlatego od lat stosowana była zasada "umieszczaj skrypty przez zamknięcie tagu body", czyli na samym dole strony.

Dziś przeglądarki wspierają dodatkowe atrybutu, które umożliwiają developerom wskazanie czy przeglądarka ma pobierać zasób niepowstrzumując parsowania (atrybut async) oraz opuźnić wykonanie skryptu po załadowaniu strony (atrybut defer).

<script src="script.js" async defer></script>

Atrybut defer działa tylko z zewnętrznymi skryptami (umieszczonymi w osobnych plikach).

Kombinacje defer i async:

• defer + async – kod jest wykonywany asynchronicznie wraz z dalszym parsowaniem strony

• defer bez async – kod jest wykonywany po skończonym parsowaniu strony

• bez defer bez async – kod jest pobierany i wykonywany natychmiast blokując dalsze parsowanie strony

rel="preload" – inne rozwiązanie na ładowanie zasobów

Z liczących się przeglądarek w momencie pisania tylko Firefox jeszcze wprowadza wsparcie dla rozwiązania rel="preload" . Polega ono na wskazywaniu przeglądarce zasobu, który zaraz będziemy potrzebować wyświetlić, więc niech go już zacznie pobierać parsując stronę dalej. Atrybut rel="preload" działa wraz z tagiem link.

Przykładowy kod strony HTML:

<head>
<meta charset="utf-8">
<title>Przykład rel=preload</title>

<link rel="preload" href="preloaded-styles.css" as="style">
<link rel="preload" href="preloaded-scripts.js" as="script">

<link rel="stylesheet" href="main-styles.css">
</head>
<body>
<h1>Przykład rel=preload</h1>
<script src="main-scripts.js" defer></script>
</body>

"lazy-loading" – Technika optymalizacji strony www

Technika optymalizacji lazy-loading polega na wstrzymaniu ładowania zasobów do czasu kiedy będą one potrzebne do wyświetlenia. Najbardziej oczywistym zastosowaniem jest wstrzymanie ładowania obrazków umieszczonych daleko na dole strony. Lepiej podczas ładowania załadować tylko obrazki, które jako pierwsze pokażą się użytkownikowi, a reszta kolejno doładowywać kiedy użytkownik zbliższy się scrollem do miejsc w których są umieszczone.

Międzyprzeglądarkowe rozwiązania wymagają dodatkowych skryptów, jednak Chrome już teraz wprowadził natywne rozwiązanie. Żeby z niego skorzystać wystarczy do tagu img dodać atrybut loading="lazy":

<img loading="lazy" src="pies.webp" alt="Mój pies Max" />

Obrazek zostanie automatycznzie dograny kiedy użytkownik zescrolluje się do obrazka. Rozwiązanie działa już w Chrome na desktop i urządzenia mobilne.

Paczkowanie zasobów, albo używanie protokołu HTTP/2

Kolejny ważnym aspektem jest paczkowanie (łącznie) zasobów w mniejszą ilość plików, które są potrzebne do ściągnięcia w momencie ładowania strony. Dla przykładu lepiej połączyć wszystkie skrypty w jeden więszky plik, żeby przeglądarka musiała zrobić tylko jeden request do serwera po skrypty, a nie pobierać każdy z osobna.

Przeglądarki używając protokołu HTTP/1.1 mogą nawiązać z serwerem tylko ograniczoną ilość konkurencyjnych połączeń, a więc część zasobów będzie oczekiwać w kolejce do pobrania.

Dopóki Twój serwer www nie będzie wspierać protokołu HTTP/2, który całkowicie zmienia sposób komunikacji między przeglądarką internetową, a serwerem www, to każdy dodatkowy request "zżera" czas na nawiązanie połączenia.

W przypadku nowej wersji protokołu HTTP (HTTP/2), połączenie będzie nawiązywane raz, wtedy szybciej będzie wysyłać mniejsze paczki.

Sprawdź czy Twój hosting (serwer) obsługuje HTTP/2 czy nie. Jest to dość świeże rozwiązanie i nie jest ono standardem wśród hostingodawców.

Kiedy surfujesz po internecie i wchodzisz na różne strony internetowe, to każda może być wysyłana z innego serwera, który ma swoją fizyczną lokalizację. Polskie strony internetowe są często umieszczane na serwerach z lokalizowanych w Polsce lub Niemczech.

Dzieje się tak nie bez przyczyny, gdyż im bliżej serwer znajduje się potencjalnego odbiory, czyli internauty odwiedzjącego daną stronę, tym krótsza jest droga i szybciej ta strona zostanie odebrana. Najcześciej nie zauważamy, że strony z Australii ładują się wolniej, gdyż po prostu nie chodzimy po takich stronach.

Także decydując się na na serwer powinniśmy wybrać taką lokalizację, która jest jak najbliżej naszego głównego odbiorcy. Zatem sklep internetowy obsługujący polskich klientów może zoptymalizować drogę, która pokojują pakiety sieciowe i zlokalizować swoją stronę na serwerze, który fizycznie jest w Polsce.

Czy to oznacza, że inni internauci są skazani na wolne ładowanie Twojej strony? Otóż nie. Można dodatkowo korzystać z serwerów CDN czyli z angielskiego Content Delivery Network. CDN to sieć serwerów rozsianych po różnych miejscach geograficznych mająca skracać drogę między serwerem Twojej strony, a internautą wchodzącym na nią.

Sieć CDN może dla przykładu być wykorzystana do serwowania największych plików, czyli najczęściej plików graficznych, a cała reszta może być wysyłana bezpośrednio z serwera strony. Taką opcję za darmo daje dodatek do WordPress o nazwie Jetpack.

W innym scenariuszu sieć CDN może być pośrednikiem całej strony i–w–takim przypadku również plik HTML będzie przechodził przez serwery CDN.

Wygląda to tak, że użytkownik wpisuje adres Twojej strony, ustawienia domeny wskazują, że strona jest utrzymywana przez serwery sieci CDN, CDN wybiera najbliższy geograficznie serwer w sieci, następnie sprawdza czy posiada scache'owaną wersję zasobu o który pyta przeglądarka internauty w tej lokalizacji, jeśli tak odpowiada wysyłając posiadaną kopię, a jeśli nie pyta Twój serwer robi kopię, a następnym razem odpowie już kopią bez odpoytywania Twojego serwera, co znacznie skróci czas odpowiedzi.

Przykłady komercyjnych sieci CDN to AWS (Amazon) CloudFront, czy Cloudflare CDN.

Wszystkie zapytania o pobranie zasobu wysyłane przez przeglądarkę zawierają nagłówki rządania, a w odpowiedzi przeglądarka dostaje nagłówki odpowiedzi, które ustawiane są przez serwer www, który odpowiada na dane rządanie. Jednym z takich nagłówków jest nagłówek cache-control, który jest opcjonalny lecz kiedy jest używany może znacznie przyspieszyć ładowanie strony internetowej.

Nagłowek cache-control służy do informowania przeglądarki jak długo powinna trzymać pobrany zasób w swojej lokalnej pamięci podręcznej (cache). Ponieważ obrazki są zasobami, które opublikowane praktycznie się już nie zmieniają, a zarazem są ciężkie do przesyłania, to idalnie się nadają na ustawienie długiego czasu Time-To-Live, czyli czasu który podajemy w omawianym nagłówku. Czas podaje się w sekundach.

Przykładowy nagłówek wygląda nastepująco:

cache-control: max-age=1209600

Powyższy kod instruuje przeglądarkę zapamiętaj to w swojej pamięci cache przez 14 dni. Jeśli odpowedzający ma dane zasoby to przy odświeżeniu przeglądarka w ogóle nie wyśle rządania w świat, a od razu odpowie tym co już wcześniej pobrała znacznie przyspieszając ponowne załadowanie strony.

PWA czyli Progressive Web Apps to aplikacje webowe, napisane w tych samych technologiach co strony i aplikacje internetowe (HTML, CSS, JavaScript). Umożliwiają twórcom aplikacji webowych tworzenie aplikacji podobnych do aplikacji natywnych na urządzeniach mobilnych. Jednak PWA, nie dotyczny tylko mobilek –"zainstalować również" na desktopie. Jednak główne zalety daje urzytkownikom smartfonów.

Instalacja PWA w Chrome na desktopie

Główną cechą jest możliwość działania offline &nbdash;bez dostępu do internetu również otworzysz taką "stronę", możliwość wysyłania urzytkownikom notyfikacji oraz dostęp do zasobów sprzętowych.

Natomiast główną różnicą w porównaniu do aplikacji natywnych, jest brak konieczności instalowania aplikacji przez sklepy z aplikacjami, głównie chodzi o Google Play oraz App Store. Wystarczy wejść na daną stronę, aby ujrzeć zaproszenie do zainstlowania. Od razu zostanie dodana ikonka na pulpicie urządzenia mobilnego z zainstlowaną aplikacją.

Ma to jeszcze jedną zaletę, dalej to twórca strony decyduje kiedy zaktualizuje aplikację, nie musi czekać aż użytkownik sam zainstaluje nowszą wersję. Przeglądarka urządzenia na którym odpala sie aplikacja PWA sama automatycznie cyklicznie sprawdza, czy jest nowsza wersja i ściąga jeśli takowa się pojawiła.

Czemu zoptymalizowana strona internetowa powinna być PWA?

Strona z PWA ładuje się szybko ponownie po pierwszym załadowaniu. Te same zasoby nie muszą być ściągane ponownie przez przeglądarkę. Tak się też dzieje stosując techniką opisaną w poprzednim punkcie, czyli nagłówek Cache-Control. Jednak w przypadku aplikacji PWA dodatkowo te same elementy nie muszą być renderowane ponownie, skracając tym samym czas w którym strona staje się "używalna".

To już wszystko w tym poście o szybkich stronach internetowych, które "lubi" Google i każdy kto łazi po internecie. Zostaw proszę swój komentarz, czy Ci się podobał taki artykuł, pomoże mi to lepiej dobierać treść na stronie. Jeśli masz pytanie lub sugestie również zostaw je w komentarzu.