JustPaste.it

Przyspieszenie wczytywania strony internetowej

W jaki sposób przeprowadzić optymalizację kodu strony internetowej tak, aby przyspieszyć jej działanie na urządzeniach mobilnych i dostosować ją do wymagań Google?

W jaki sposób przeprowadzić optymalizację kodu strony internetowej tak, aby przyspieszyć jej działanie na urządzeniach mobilnych i dostosować ją do wymagań Google?

 

Problem ten jest na tyle poważny, że nawet Google wprowadziło wytyczne dotyczące optymalizacji kodu strony internetowej i udostępniło specjalne narzędzie - PageSpeed Insighst , które analizuje kod wskazanej strony i określa zmiany jakie należy dokonać na stronie, aby ją "przyspieszyć". Narzędzie to w kolka sekund przygotowuje stosowny raport, określa zmiany jakie należy wykonać na stronie aby przyspieszyć jej działanie i wystawia ocenę w skali od 0 do 100. Ocena ta jest generowana osobno dla komputerów i urządzeń mobilnych. Jeśli ocena za całokształt przekroczy 80, to oznacza, że kod strony jest bardzo dobrze zoptymalizowany (na tle komputera i telefonu komórkowego wyświetla się wówczas zielony obrazek).

Na poniższej grafice zaprezentowana jest analiza mojej strony.

Żółty wykrzyknik oznacza, że warto poprawić pewne rzeczy, ale nie są one jakoś szczególnie uciążliwe. Jeśli natomiast pojawi się czerwony wykrzyknik, to koniecznie należy wyeliminować problem, gdyż ceną za zlekceważenie komunikatu może być nawet niższa pozycja w rankingu wyszukiwania.

Oto najczęstsze błędy jakie wytyka stronom internetowym to narzędzie i sposoby ich niwelowania:

1. Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie.
Stara szkoła wykonywania stron internetowych uczy, aby użyty na stronie kod JS i CSS wstawić do sekcji HEAD. Google zwraca uwagę na to, że podczas wczytywania strony internetowej na monitorze widoczna jest tylko jej niewielka część i w pierwszej kolejności powinny zostać wczytane style i skrypty odpowiedzialne za  wyświetlenie właśnie tej części strony, a dopiero później reszta.

Rozwiązanie tego problemu polega na podzielenie arkuszy stylów i skryptów. W sekcji HEAD należy pozostawić te które odpowiadają za wyświetlenie tej części strony która w pierwszej kolejności wyświetlana jest na monitorze, a resztę należy wstawić na końcu strony.

2. Włącz kompresję strony.

Niemal każdy serwer zapewnia taka możliwość, ale na każdym z nich proces ten przeprowadza się nieco inaczej. Najlepiej będzie, jeśli skontaktujesz się z centrum pomocy Twojego dostawcy hostingu i poprosisz go o włączenie kompresji strony, lub udzielenie instrukcji dotyczącej samodzielnego włączenia kompresji.

2. Zmniejsz HTML, CSS i JS.

W sieci jest wiele narzędzi umożliwiających szybkie zmniejszenie wyżej wymienionych plików, ale nie musisz z nich korzystać, gdyż Page Speed Insights zrobi to za Ciebie. Jeśli narzędzie to będzie miało tego typu uwagi odnośnie Twojej strony, to pod tą wytyczną pojawi się do pobrania folder zawierający zmniejszone pliki Twojej strony.

3. Zoptymalizuj obrazy.

Normą jest to, że nawet telefony komórkowe wyposażone są w wysokiej rozdzielczości aparaty fotograficzne. Zamieszczenie na stronie internetowej zdjęcia wykonanego w wysokiej rozdzielczości znacznie spowolni proces jej wczytywania. Rozwiązaniem jest optymalizacja zdjęcia przy użyciu programu do obróbki grafiki, lub pobranie zdjęć, które podczas analizy automatycznie obrobi dla nas Page Speed Insights (podobnie jak w przypadku plików HTML, CSS i JS)