Zasady optymalizacji ON-PAGE – cz.5 – Popraw wydajność

Popraw czas ładowania strony

Strona nie może ładować się w nieskończoność. Google potrafi porzucić indeksowanie strony ze względu na długi czas jej ładowania. Po długim czasie ładowania lub braku odpowiedzi robot opuści stronę, nie indeksując jej zawartości.

Zmierz czas ładowania strony za pomocą Google PageSpeed Insights.

1. Serwer/zasoby

Zanim przeglądarka wyrenderuje stronę, musi ją przeanalizować. Jeśli w trakcie analizy napotka na nieasynchroniczny, blokujący skrypt zewnętrzny, musi się zatrzymać i pobrać te zasoby. Każda taka operacja to dodatkowy transfer danych w obie strony, który oznacza opóźnienie pierwszego wyrenderowania.

Strona nie może ładować się w nieskończoność. Google potrafi porzucić indeksowanie strony ze względu na długi czas jej ładowania. Po długim czasie ładowania lub braku odpowiedzi robot opuści stronę, nie indeksując jej zawartości.

Szybko ładujące się strony poprawiają ogólną jakość i zwiększają satysfakcję po stronie użytkownika. Opóźnienia wczytywania strony zrażają użytkowników, którzy już później często nie wracają.

  1. Korzystaj z CDN (Content Delivery Network), żeby uzyskać szybszy dostęp do zasobów. CDN to duży, rozproszony system dostarczania treści do wielu centrów danych ( data center) i punktów wymiany ruchu w Internecie. Zastosowanie CDN ma na celu szybsze dostarczenie zawartości o wysokiej dostępności i wydajności końcowym użytkownikom. Podczas żądania strony sprawdzane jest położenie geograficzne adresu IP, z którego wyszło żądanie, a następnie zawartość serwowana jest z serwerów CDN położonych najbliżej lokalizacji użytkownika.
  2. Ustaw Keep-Alive – Metoda ta pozwala utrzymać to samo połączenie HTTP zamiast otwierania nowego przy każdym kolejnym nowym requescie. Jest to komunikacja między serwerem WWW a przeglądarką internetową, która mówi: „można pobrać więcej niż jeden plik na raz”.Metoda ta pozwala utrzymać to samo połączenie HTTP zamiast otwierania nowego przy każdym kolejnym nowym requescie.
  3. Cache’uj zasoby – ustaw Expires dla zasobów na serwerach. Efektywnie wykorzystaj pamięć podręczną przeglądarki – dla wszystkich typów danych ustaw długi okres ważności a dla często zmieniających się danych użyj „odcisku palca” w URL ( np. timestamp) i/lub ustaw odpowiednio nagłówek „Expires” ( zamiast cache-control). Expires ustawiamy maksymalnie na 1 rok.  Przykład: http://twojadomena.pl/css/style.cssgz?1435729757595. Patrz wytyczne Google Developers: Wykorzystaj pamięć podręczną przeglądarki
  4. Włącz obsługę nagłówków HTTP If-Modified-Since – Określa, czy treść witryny zmieniła się od czasu jej ostatniego pobrania przez przeglądarkę. Jeśli użytkownik pobiera stronę  a dokument nie został zmodyfikowany od daty i czasu określonego w If-Modified-Since, serwer odpowie kodem 304 – Not Modified, przez co dokument nie zostanie ponownie wysłany do przeglądarki. Korzystając w ten sposób z pamięci podręcznej przeglądarki, zmniejszamy obciążenie łącza.
  5. Włącz kompresję plików np. gzip – patrz wytyczne Google Developers: Włącz kompresję
  6. Monitoruj wydajność Popraw czas odpowiedzi serwera
  7. Użyj DNS Prefetching 

dns-prefetch identyfikuje zapytania DNS.  Dzięki temu jeśli będzie wysłane żądanie, będzie ono obsłużone szybciej

<link href=”http://www.mojadomena1.pl” rel=”dns-prefetch” />
<link href=”http://www.mojadomena2.pl” rel=”dns-prefetch” />

IE11 wspiera tylko do 10 żądań prefetch, pozostałe są ignorowane.

Kody JavaScript i CSS niezbędne do wyrenderowania widocznej części strony powinny więc być wbudowane, a JavaScript lub CSS umożliwiające uzyskanie dodatkowych efektów muszą ładować się już po wyrenderowaniu części strony widocznej na ekranie.

2. Zasoby

  1. Zmniejsz ilość requestów
    • Zmniejsz zasoby – zmniejsz rozmiar plików css, js, html
      • Usuń puste znaczniki, usuń przestarzały kod, jeśli coś można napisać krócej, napisz tak
      • Zminifikuj i włącz kompresję gzip dla stylów CSS, kodu HTML i javascript – taki plik będzie ważył znacznie mniej – link do wytycznych Google Developers dotyczącego Zmniejszenia zasobów
    • Połącz zasoby – kilka plików CSS połącz w jeden, kilka plików javascript połącz w jeden – możesz łatwo sprawdzić, ile plików z zasobami masz na stronie, wykorzystując narzędzie: https://varvy.com/tools/ – dzięki temu zmniejszyć ilość żądań wysyłanych do serwera. W miarę możliwości usuń lub połącz zewnętrzne pliki css i js.
    • Unikaj przekierowań stron docelowych – czyli unikamy wielokrotnego przekierowania z danego URLa do docelowej strony. Dokładny opis znajdziecie na stronie Google Developers: Unikaj przekierowań stron docelowych
    • Połącz obrazy w spritesprite to jeden duży plik z obrazem zawierający wszystkie inne obrazki ( tworzące dekorację strony, ikony). Pozwoli to zredukować ilość requestów do 1. Jeśli na stronie używamy dużo obrazków, które stanowią element dekoracyjny serwisu i jest ich np. 100, przeglądarka, żeby musi wykonać 100 requestów żeby pobrać każdy z obrazów. Opóźnia to ładowanie strony. Włączając te obrazki do jednego sprite’a – ze 100 requestów robimy 1.
  2. Popraw dostępność strony
    • Strona powinna wyświetlać się prawidłowo po wyłączeniu w przeglądarce obsługi JavaScript. Po wyłączeniu js, strona nie powinna być pusta, obrazy również nie powinny być ukryte ( usuń lazy loading – przynajmniej dla elementów witryny znajdujących się w obszarze widocznym na ekranie w momencie ładowania strony. Atrybut src nie może być pusty. Inaczej google będzie widział stronę z pustymi obrazami) – reguła jest jedna: ważnych informacji w żaden sposób nie ukrywajmy na stronie. Istotne treści nie powinny być w zakładkach, nie powinny być obrazkiem, powinny być dostępne bez ingerencji użytkownika ( np. przełączanie się między zakładkami)
    • Strona powinna wyświetlać się prawidłowo i być dostępna po zablokowaniu cookies w minimalnej funkcjonalności
  3. Javascripty załączaj na końcu dokumentu, tuż przed zamknięciem znacznika <body>, natomiast osadzając skrypt bezpośrednio w dokumencie pamiętaj, że najlepiej jest osadzić go w jednym bloku koduMałe skrypty zewnętrzne również osadź w dokumencie. Link do wytycznych GD: Usuń blokujący renderowanie kod JavaScript
  4. Skrypty javascript ładuj asynchronicznie – dzięki temu renderowanie strony nie będzie blokowane. Blokowanie renderowania przez js jest wyjaśnione na stronie GD: Usuń blokujący renderowanie kod JavaScriptŁadując skrypty asynchronicznie, przeglądarka nie musi czekać na pobranie JSów, tylko analizuje stronę dalej. Asynchroniczne ładowanie następuje wtedy, gdy do znacznika <script> dodamy atrybut async.
    <script src="link-do-skryptu" async></script>

    Wytyczna GD: Używaj skryptów asynchronicznych.

  5. Zoptymalizuj przesyłanie CSS – zewnętrzne pliki CSS blokują przegląrki, zanim wyrenderują na ekranie zawartość strony, a to wpływa na wydłużenie czasu ładowania. Małe pliki CSS możesz umieścić w dokumencie – w sekcji <head> między znacznikami <style></style> ( dzięki temu zlikwidujesz requesty bo przeglądarka nie będzie musiała pobrać plików z zewnętrznymi arkuszami stylów) GD: Zoptymalizuj przesyłanie CSS
  6. Wyodrębnij style krytyczne – jeśli plik ze stylami jest duży, możesz wybrać te style, które odpowiadają za wyrenderowanie górnej, widocznej po załadowaniu w przeglądarce części strony i umieścić te style bezpośrednio w dokumencie – tj. w punkcie poprzednim. Na dole pokazałam przykład strony internetowej – część zaznaczona w czerwonym prostokącie to część strony widoczna po załadowaniu.Layout
  7. Zadbaj o prawidłowe pokazanie tylko tej części witryny, która jest widoczna na ekranie, od razu po wczytaniu strony. Resztę stylów ( plik zewnętrzny CSS ) załaduj po wczytaniu strony. Wytyczne GD: Nadaj priorytet widocznej treści

zoom

2. Obrazy

  • Zmniejsz ilość obrazów na stronie
  • Włącz kompresję plików graficznych
  • Stosuj odpowiednie formaty zapisu grafik
  • W miarę możliwości zamień obrazy na efekty CSS3 i web fonty. Zrób to dla wszelkich borderów, gradientów, bulletów, jeśli się da – dla symboli
  • z webfontów wybierz tylko te, które wykorzystujesz w projekcie. Jeśli np pobierasz z Google Fonts konkrenty typ, ale np nie używasz kursywy ani bolda, to nie ściągaj całej paczki webfonta, tylko wybrane typy danego fonta ( bez tych, których nie używasz)
  • używaj sprite dla ikon oraz obrazów powtarzalnych wykorzystywanych na stronie jako element dekoracyjny, logotypów
  • cache’uj obrazy – ustaw Expires na serwerze dla obrazów
  • sprite możesz zakodować do base64 i osadzić bezpośrednio w CSS. O tym jak to zrobić jest we wpisie o sprite na stronie www – zamieściłam też linki do przykładowych encoderów/decoderów online
  • encodery base64Kodowanie do base64 ma zarówno zaletę jak i wady. Zaletą jest to, że zmniejszamy ilość requestów do serwera, co ma nam przyspieszyć ładowanie strony. Przy dużej ilości obrazków ma to znaczenie ponieważ można zredukować ilość żądań do serwera nawet o setki. Wadą z kolei jest to, że przeglądarka wolniej odczytuje tak zakodowany obraz niż osadzony w standardowej formie za pomocą <img src=”url-do-obrazka.jpg”>. Poza tym, Googlebot „nie rozumie” obrazów osadzonych za pomocą base64 – nie potrafi ich czytać przez co, obrazy nie pojawią się w wynikach wyszukiwania obrazów. Dlatego też, warto robić testy czy zastosowanie base64 przyniesie oczekiwany rezultat. Sprawdza się w sprite’ach, bo zwykle nie zależy nam żeby roboty wyszukiwarek indeksowały obrazy służące wyłącznie do poprawy atrakcyjności strony, zastosowane w layoucie. Są to też obrazki małe, które generują dużo requestów, a osadzone w dokumecie jako base64 nie robią większej różnicy pod względem wagi strony. Jak już pisałam – warto wyważyć korzyści i wady dla indywidualnego rozwiązania. Base64 nie należy stosować do umieszczania obrazów, które mają być widoczne w wynikach wyszukiwania wyszukiwarek.
  • Stosuj przeskalowane obrazy – tzn. przygotuj kilka wersji rozmiaru obrazka i serwuj je najbardziej zbliżone do obrazu wyświetlanego.
<img src="moj_obraz.jpg" alt="tekst alternatywny" width="300" height="500">

Biorąc pod uwagę powyższy zapis, chcemy wstawić na stronę obraz o nazwie „moj_obraz” i nadać mu szerokość 320px. Często jest tak, że chcemy wstawić obraz mniejszy niż rzeczywiście pobieramy. Jeśli przygotujesz np. 3 wersje obrazka o szerokościach np. 300px, 640px, 1000px – to dla powyższego zapisu, w atrybucie src powinniśmy jako źródło podać link do obrazka o szerokości 320px, bo jest najbardziej zbliżony do zadeklarowanej w atrybucie width szerokości. Możemy też wstawiać obrazy za pomocą <picture> albo <img src=”..” srcset=””…> ale o tym będę pisać w innym artykule, do którego zamieszczę tutaj link.

  • Wstawiając obrazy na stronę za pomocą <img> zawsze podawaj rozmiary obrazów (width, heigt) – dzięki temu unikniemy doczytywania i przeskakiwania ekranu po załadowaniu kolejnych obrazów . Może to przyspieszyć ładowanie strony i poprawić doświadczenia użytkownika.
  • Zastosuj odpowiednie formaty zapisu grafik – dla obrazów rastrowych -> jpg, png, gif – dla obrazów wektorowych -> SVG. Jeśli w plikach np. png nie musisz stosować przeźroczystości, to zapisz je bez kanału przeźroczystości.

Reguły Google Developers dotyczące użyteczności

 

Zachęcam do komentowania. Jeśli chcecie coś dodać, poprzeć, zaprzeczyć – śmiało piszczie, w końcu człowiek uczy się całe życie 🙂

Poprzedni wpis: http://frontendowo.pl/seo/zasady-optymalizacji-on-page-cz-4-strona-dostepna-na-mobile/

Przejdź do początku serii wpisów – Zasady optymalizacji ON-PAGE serwisów nternetowych – cz. 1

Dodaj komentarz