Jak zwiększyć prędkość witryny

59 0
Łukasz Trześniewski

Jak ogólnie wiadomo, prędkość witryny ma bardzo duże znaczenie dla SEO chociażby ze względu na zadowolenie użytkowników, a co za tym idzie wszystkie inne czynniki behawioralne. Co prawda super szybka strona internetowa nie dodaje zbyt wielu dodatkowych punktów jeżeli chodzi o pozycje strony w wynikach wyszukiwania Google ale na pewno te bardzo powolne tracą ich znacznie więcej na każdym kroku.

Możemy śmiało potwierdzić i stanowisko Google w tym temacie jest również takie samo, że gdy strona notorycznie wymaga nadmiernej ilości czasu na całkowite załadowanie się, jej pozycje mogą być z tego powodu zaniżane. Użytkownicy nie lubią czekać, nie zawsze są podpięci do super szybkiego łącza, coraz częściej korzystają z mobilnego internetu poza domem, w kawiarniach itp. i to właśnie w takich chwilach jeżeli nie zadbamy o takie czynniki jak prędkość ładowania witryny oraz dostosowanie wyświetlania do urządzeń mobilnych, możemy stracić ich na dobre. Dlaczego na dobre? ponieważ ludzie kojarzą adresy stron, które w przeszłości nie spełniły ich oczekiwań, a w dodatku Google oznacza odwiedzone przez nas już wcześniej domeny.

Tak więc, jak się do tego zabrać i jak pokonać PageSpeed Insights osiągając wynik 3 razy 100% ? Wystarczy zastosować się do poniższych wskazówek. Dokumentacja narzędzia Google do testowania prędkości witryny oraz zgodności z urządzeniami mobilnymi jest trochę zbyt ogólnikowa i czasami trudno się w niej połapać.

Czy każdy może osiągnąć wynik 3 razy 100% ?

Tak ale nie zawsze ma to sens. Patrząc chociażby na tego bloga, 62,100,90% to wynik przy którym zostanę ponieważ naginanie całego skryptu tylko po to aby móc się chwalić cyferkami nie ma najmniejszego sensu. Moja punktacja została obniżona tylko w przypadku prędkości za co odpowiada między innymi z góry ustalony czas cache (2 godziny) dla kodu śledzenia Google Analytics, oraz nieasynchroniczne ładowanie skryptu powiększającego obrazy (kiedy ładuję go asynchronicznie to nie działa). To cena jaką mogę zapłacić. Dodatkowo pojawia się też rzekomo długi czas odpowiedzi serwera który znika po zmianie sposobu ładowania się lub też usunięciu skryptów javascipt oraz fakt, że ten blog oparty jest o WordPressa, po którego aktualizacji musiałbym wprowadzać za każdym razem wszystkie zmiany w kodzie na nowo. 90% to bardzo dobry wynik i w zupełności wystarczy aby być przed konkurencją zwłaszcza, że po ostatniej aktualizacji narzędzia nagle wszystkim punkty spadły drastycznie w dół. Warto również pamiętać o tym, aby nie przejmować się brakiem zmiany wyniku w przypadku wdrożenia którejś z poprawek do momentu aż nie zastosujemy ich wszystkich ponieważ czasem są na tyle zależne od siebie, że po wdrożeniu innej, zwyczajnie znikają.

familiada

Szybkość działania strony

Najczęstszym i największym wrogiem szybkich witryn jest ładowanie za każdym razem masy zbędnych elementów. Zawsze zalecam zastanowienie się nad sensem dodawania każdego z obrazków, widgetów oraz dodatkowego kodu, który nie jest używany ponieważ może to znacząco wpłynąć zarówno na prędkość wczytywania się strony jak i samą jej czytelność.

Link do narzędzia: PageSpeed Insights

 

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

Aby w pełni zadowolić Google mamy dwie drogi. Albo ładować javascript i CSS asynchronicznie co w niektórych przypadkach sprawia, że strona nie wyświetla się za każdym razem prawidłowo albo wkleić ich zawartość bezpośrednio do pliku, który je wywołuje.

Polecam najpierw sprawdzić ładowanie asynchroniczne poprzez dodanie komendy async w momencie ładowania javascriptu:

<script async src="js/jquery-1.6.4.js"></script>

Jeżeli wszystko jest w porządku i strona wyświetla się prawidłowo to problem załatwiony. Jeżeli natomiast strona wygląda źle, cofamy zmianę i możemy testować ładowanie asynchroniczne wyrywkowo dla pojedynczych skryptów sprawdzając przy tym czy strona wyświetla się dobrze i rozważamy również sens ich ładowania ponieważ czasami nie potrzebujemy każdego z nich. Dodatkowo można zrezygnować z ładowania zbędnych elementów javascript i umieścić instrukcje z pliku który się do niego odwołuje bezpośrednio w pliku z klasą.

Podobnie jest w przypadku plików CSS, gdzie ich ładowanie optymalizujemy jedynie za pomocą wklejenia kodu bezpośrednio do pliku odwołującego się. (header, index itp. zależnie od skryptu)

Przydatna wtyczka do WordPressa, która umożliwi nam zabawę z asynchronicznym wczytywaniem skryptów oraz ładowaniem arkuszy stylów CSS bezpośrednio w pliku, który zazwyczaj je wywołuje to: Async JS and CSS

 

Skróć czas odpowiedzi serwera

Ten punkt możemy zostawić na sam koniec ponieważ wdrożenie wszystkich wymaganych poprawek bardzo często sprawia, że sam znika. Jeżeli jednak tak się nie stanie to warto jest rozważyć zmianę serwera na szybszy.

 

Wykorzystaj pamięć podręczną przeglądarki

Chodzi o nadanie okresowej ważności dla poszczególnych elementów znajdujących się na stronie. Przykładowo możemy ustawić parametry tak aby użytkownicy nie musieli za każdym razem pobierać tych samych obrazków, które już ściągnęli wcześniej. Odwiedzając stronę po raz kolejny będą korzystali bardziej z zasobów pamięci podręcznej przeglądarki niż z naszego serwera do czasu aż termin ważności plików minie, wówczas zostaną one pobrane ponownie.

Bez zbędnego tłumaczenia, regułka do wklejenia na koniec pliku .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>

W przypadku hostingu na home.pl, który posiada inną składnię używamy takiej zawartości: (pliki o podanych rozszerzeniach będą aktualne przez miesiąc)

:Location *.(js|jpg|jpeg|png|gif|css|pdf|swf|ico)
 Expires M2592000

 

Zmniejsz HTML

Sparsuj kod, czyli usuń zbędne elementy z kodu HTML takie jak spacje, komentarze itp. Możemy w tym celu użyć takiego parsera jak na przykład willpeavy. Nie testowałem ponieważ wolę widzieć swój kod w miarę poukładany kiedy potrzebuję szybko coś w nim zmienić. Po optymalizacji podmieniamy kod i gotowe.

 

Nadaj priorytet widocznej treści

I tutaj jest wiele zawodu dla tego również zostawiłbym to na sam koniec. Chodzi o kolejność wczytywania się elementów strony w kodzie tak aby najpierw renderowana była jej górna sekcja. W tym przypadku recepta jest zawsze taka sama ale elementy wymagające przemyślenia i poprawy całkowicie unikalne dla każdej ze stron. Narzędzie od Google pozwala nam podglądnąć, które z elementów nie zostały wczytane w określonym czasie co jest tutaj najcenniejszą wskazówką. Należy poprawić kod tak aby wczytywały się szybciej i powiadomienie powinno zniknąć dodając nam tym samym kilka punktów.

 

Unikaj przekierowań stron docelowych

Ten komunikat może się pojawiać w momencie kiedy strona, którą testujemy zwraca nagłówki o przekierowaniach lub też pobiera za ich pomocą elementy dodatkowe, na przykład obrazki. Bardzo rzadko na to trafiam ale jeżeli istnieje taka potrzeba to należy usunąć przekierowania i wczytywać wszystko z tej samej domeny co testowana.

 

Włącz kompresję

Zdecydowana większość serwerów ma już włączoną kompresję gzip w standardzie. Jeżeli natomiast pojawił się ten komunikat to trzeba wejść do panelu hostingowego i sprawdzić czy istnieje możliwość samodzielnego uruchomienia kompresji lub też skonsultować się w tym celu z administratorem.

 

Zmniejsz CSS

Podobnie jak w przypadku zmniejszania kodu HTML tutaj również chodzi o usunięcie zbędnych spacji oraz komentarzy lecz tym razem z pliku CSS. Do tego zadania polecam cssminifier. Testowałem wiele razy i jestem zadowolony.

 

Zmniejsz JavaScript

Dokładnie tak samo jak w przypadku plików CSS oraz HTML, musimy sparsować kod. Do tego możemy użyć narzędzia takiego jak jscompress. Polecam, bardzo dobre w przeciwieństwie do wielu innych, które dosyć często potrafią zniszczyć skrypty poprzez złą interpretację niektórych komend.

 

Zoptymalizuj obrazy

I tutaj jest zawsze największa zabawa. Do optymalizacji obrazów polecam programy scriptjpg oraz scriptpng (pod Windows) z ustawieniami na opcję nr. 3 lub 4 (kompresują też hurtowo) aczkolwiek lepszym rozwiązaniem mogą się okazać aplikacje wskazane w dokumentacji Google, które niestety wymagają linuksa. Są też dostępne narzędzia online ale na ich tle najlepiej wypadają te, które podałem wcześniej. Podobno Gimp ma fajny moduł bezstratnej kompresji ale jeszcze go nie testowałem. Po skończeniu optymalizacji podmieniamy skompresowane zdjęcia na serwerze i gotowe.

Przydatna wtyczka do WordPressa, która w darmowej wersji z automatu daje w miarę dobre efekty w tym temacie to: WP Smush.it

Wygoda użytkowników

Czyli przystosowanie sposobu wyświetlania strony internetowej do urządzeń mobilnych. (nie mylić z rzeczywistym User Experience) Najlepiej aby strona była w pełni responsywna ponieważ załatwia to większość problemów. Ostateczną drogą jest stworzenie osobnej, dedykowanej specjalnie dla smartfonów i tabletów strony lub też aplikacji.

responsywnosc

Używaj czytelnych rozmiarów czcionek

W większości przypadków zostają wskazane elementy, które nie posiadają rozmiaru czcionki spełniającego wymagania także wystarczy je stopniowo powiększać w pliku CSS oraz obserwować granicę przy której narzędzie nie będzie już wskazywać tego problemu.

 

Dobierz odpowiedni rozmiar elementów dotykowych

W niewielkiej ilości przypadków chodzi o rozmiar czcionki linków lub też klikanych obrazów ale najczęściej problemem są tutaj niewielkie odstępy pomiędzy nimi. Zatem musimy je nieco zwiększyć za pomocą pliku CSS. Służą do tego polecenia margin oraz padding w zależności od potrzeb.

 

Konfiguracja okna roboczego

Najprostsza sprawa, nie mamy zdefiniowanego skalowania w kodzie HTML, zatem dodajemy poniższą regułkę w sekcji HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Dopasowanie rozmiaru do okna roboczego

Czasami nawet mimo responsywności, niektóre elementy pojawiają się poza oknem roboczym. Na tym blogu była taka sytuacja z nagłówkiem w efekcie czego została nieco zmniejszona jego czcionka tak aby zawsze mieścił się w granicach 310px szerokości.

 

Unikaj stosowania wtyczek

Taki problem występuje w przypadku stron przeładowanych kodem javascript, który ciężko jest w takiej ilości wczytać na urządzeniach mobilnych. Może to dotyczyć również wielu elementów flash, których wsparcie jest bardzo słabe w przypadku Androida. Należy rozważyć sens ładowania za każdym razem wszystkich wtyczek i usunąć te, które są niepotrzebne.

4.8/5 - (5 votes)

59 komentarzy dla “Jak zwiększyć prędkość witryny”

  2. Dzięki wielkie, zwłaszcza za rady związane z obrazkami. Z nimi od zawsze miałem największy problem. Nawet Smush.it nie zadowalał google. Wypróbuję inne opcje.

    Odpowiedz

  4. pozwoliłem sobie podlinkować ze swojego tekstu, pisanego przyznam trochę na kolanie, ale to o czym wspomniałem na jego końcu rozwinąłeś tu do solidnego poradnika, dzięki!

    Odpowiedz

  10. A gdzie znajduje się tag otwierający ? W samym piliku js, który się pokazuje, że trzeba go poprawić tak?

    Odpowiedz

    1. To zależy od skryptu o jaki oparta jest strona. Musisz znaleźć ten wpis w plikach. Często jest to index.php lub header.php ale może też być gdzie indziej. Sprawdź źródło. Na pewno nie jest to w pliku .js, tylko w tym, który się do niego odwołuje.

      Odpowiedz

      1. Tak zgadza sie już wiem, tylko u mnie zamiast takiego kodu jest i jak tutaj wprowadzić ładowanie asynchroniczne?

        Odpowiedz

  11. Świetnie zebrane wszystko w całość. Osobiście przydadzą mi się namiary na skrypty do optymalizacji obrazów (do tej pory w WP korzystałem ze Smush.it ale nie zadawalało to google). Dodam jeszcze, że w WordPressie można skorzystać z wtyczek w3totalcach, autoptimize do zwiększania prędkości.

    Odpowiedz

  12. Świetny wpis i przede wszystkim na czasie, optymalizacja w dzisiejszych czasach dla fraz mało konkurencyjnych to (ponad) połowa sukcesu.

    Odpowiedz

  15. Sporo musiałem się namęczyć, aby zlikwidować te wszystkie komunikaty, a w szczególności ten o „wyeliminowaniu blokującego renderowanie kodu JavaScript i CSS” na stronie postawionej na WordPressie. Dość istotny jest fakt, że wszystkie skrypty, style i fonty dobrze jest ładować z własnego serwera – o ile to możliwe.

    Wykorzystałem łącznie 3 wtyczki:
    – Wordfence Security – do cache i zabezpieczenia witryny,
    – Async JS and CSS – do asynchronicznego ładowania CSS oraz JavaScript.
    – Autoptimize – do kompresji kodu HTML, CSS oraz JavaScript.

    Za pomocą wtyczki „Async JS and CSS” nie udało mi się załadować asynchronicznie wszystkich plików JavaScript, bo po prostu nie działy. Przykładowo strona oparta o framework Bootstrap i korzystająca ze skryptu bootstrap.min.js powinna ten skrypt wczytać dopiero po załadowaniu jquery.min.js żeby JavaScript Bootstrapa działało.

    Okazało się, że skrypty, których nie można wczytać asynchronicznie można wczytać na końcu pliku (w footerze), a komunikat o blokowaniu w PageSpeed Insights w większości przypadków znika – w sumie większość skryptów można wczytywać w footerze. Dla przypomnienia, aby w WordPressie wymusić ładowanie skryptów w foterze należy ładować je tak:
    wp_register_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', '', '', true);
    wp_enqueue_script('bootstrap-js');

    Odpowiedz

    1. Dziękuję. Oczywiście, że aktualizacje są ważne. Dla tego warto robić notatki w trakcie wprowadzania zmian aby mieć możliwość szybkiego skorygowania kodu, który po aktualizacji czasem zostaje nadpisywany.

      Odpowiedz

    1. Nie testowałem. Z jednej strony jest to ładowanie zasobów z zewnątrz, które wydłuża czas o dodatkowe zapytania pomiędzy domeną, a subdomenami.
      W każdym razie wiele dużych sklepów internetowych tak robi i mają w miarę rozsądne wyniki. Pytanie brzmi, czy są to realne subdomeny czy CDN.

      Odpowiedz

  23. Wielkie dzięki! Cały czas nie wiedziałem dlaczego Google krzyczy „Wykorzystaj pamięć podręczną przeglądarki” skoro wszystko mam ustawione jak należy (htaccess). I dopiero tu znalazłem info, że jak się wisi na home.pl to trzeba wkleić co innego.

    Odpowiedz

  27. Ja proponuję natomiast oprócz cachowania mod_expires ustawić także wiek nagłówków dla mod_headers (o ile nie są ustawione globalnie w configu serwera www). Niektóre strony naprawdę dostają powera po takim zabiegu 🙂

    Odpowiedz

  30. Artykuł oczywiście przydatny ale warto wspomnieć właśnie o nadaniu priorytety widocznej treści na stronie internetowej i skróceniu czasu odpowiedzi serwera.
    Dodam też, że asynchroniczne wczytywanie kodu js może powodować problemy przy niektórych rozwiązaniach java script na stronie internetowej i warto dobrze przetestować działanie samej strony ponieważ można być niemile zaskoczonym. Ja osobiście preferuję wpisanie kodu js w dokumencie (oczywiście na końcu) Moim zdaniem sprawdza się to lepiej niż asynchroniczne ładowanie na stronie.
    Cały czas mam na myśli dedykowane rozwiązania, pisane od podstaw. Na cms open source to faktycznie może być różnie.

    Odpowiedz

  31. Witam, dziękuję za tutorial 🙂 Mam takie pytanie – wkleiłem na iframe link mapę na stronie i mam aktualizacje co 5 min. Jak powinna brzmieć komenda by np. zmienić cache np. raz na miesiąc? Dodatkowo mam problem z uzyskaniem większej punktacji w insight dla komputerów – 46/100 dla telefonu mam 73/100 i 99/100 wygody? Dla komputerów na czerwono mam by skompresować obrazy a mam ich wymienionych raptem 7 (łącznie po kompresji uzyskam aż 1mb :P)

    Odpowiedz

    1. Być może kompresja jest za słaba, ciężko powiedzieć nie widząc strony. Jeżeli chodzi o cache dla iframe, tym bym się nie przejmował. Najwyraźniej coś jeszcze zaniża wynik, może wolny serwer? Dokładniejszą analizę można zrobić za pomocą narzędzia pingdom, które pokazuje również dokładne zasoby opóźniające wczytywanie strony. Tam będą odpowiedzi.

      Odpowiedz

    2. Co do kompresji grafiki na stronie internetowej to:
      1. w photoshopie jest „zapisz dla internetu” wyskoczy okno i tam trzeba zaznaczyć, że ma być zoptymalizowany obraz. Sam kiedyś zapomniałem to odznaczyć i jakbym nie zmniejszał to też dostawałem taki komunikat.
      2. to narzędzie samo daje link do jego zdaniem zoptymalizowanych elementów, też obrazów i można to ściągnąć i zamienić na serwerze.
      3. warto włączyć kompresję obrazów przesyłanych po http w plikiu .htaccess
      Co do wygody to pewnie masz odsyłacze zbyt blisko siebie albo coś przesłania jakiś element. To najczęściej występująca nieprawidłowość.

      Odpowiedz
  35. Pingback: Audyty SEO - co sprawdzić aby było lepiej niż dobrze - checklista - zgred.pl

  36. Dziękuję za cenny artykuł, wziąłem pod uwagę wszystkie wskazówki i moje wyniki znacząco się poprawiły i zwiększyłem swoją pozycję na interesujące mnie frazy kluczowe 🙂

    Odpowiedz

  37. Jeśli chodzi o optymalizację obrazów na już istniejącej stronie www to ja np. do jednego sklepu www którym się zajmuję użyłem programu FileOptimizer, zaletą jego użycia jest przede wszystkim szybkość działania oraz optymalizacja całych drzew katalogów. Pobieramy z serwera ftp cały katalog z obrazami wrzucamy do mielenia w FileOptimizer i po jakimś czasie mamy zmniejszony cały folder z pełną strukturą, zachowanymi nazwami plików itp. Podmieniamy na serwerze i wszystko działa jak wcześniej a strona lżejsza.

    Odpowiedz

  38. Super artykuł, zwłaszcza dla osoby zaczynającej optymalizowanie swojej strony.
    Chciałbym zapytać o wpis w pliku .htaccess dla hostingu w home.pl

    :Location *.(js|jpg|jpeg|png|gif|css|pdf|swf|ico)
    Expires M2592000

    Po wklejeniu i zapisaniu zmian PageSpeedInsights wciąż nie widzi zaczytywania elementów statycznych.
    Czy ten wpis powinien być poprzedzony/zakończony jakąś komendą? (strona w wordpress)

    Odpowiedz

  40. Minifikacja i refaktoryzacja kodu + optymalizacja images i dobry server sprawi że można wyciągnąć same 100%:) do tego ominąć wszelkie kombajny jak WORDPRESS itp

    Odpowiedz

  42. Muszę powiedzieć, że jedna rzecz, którą większość ludzi ignoruje. Czy to dlatego, że SEO to nie tylko optymalizacja jednego czynnika. Włożyłeś wszystkie swoje wysiłki w każdy czynnik, a otrzymasz wyniki. Warto rozważyć kwestie, które tutaj podkreśliłeś. Wdrożenie każdego punktu pomoże Ci w uzyskaniu lepszej pozycji w wynikach wyszukiwania Google. Aby zoptymalizować swoją stronę, możesz również pobrać narzędzia z poniższego linku https://url-decode.com/cat/. Gdzie znajdziesz narzędzia związane z minifikacją, optymalizacją obrazu i wiele innych.

    Odpowiedz

  43. U siebie na stronie ustawiałem te wpisy i faktycznie przeglądarka pamięta te dane. A czy da się na przykład zapamiętać też pobieraną czcionkę google oraz na przykład pliki aplikacji jakie się ładują (wtyczek worpdressa) aby za każdym razem ponownie ich nie pobierało wszystkich.

    Odpowiedz

  44. Moim zdaniem budowę szybkiej witryny należy rozpocząć od wyboru lekkiego motywu. Szukałem długo i postanowilem wybrac generatepress. Co prawda aby strona jakoś wyglądała na dzisiejsze standardy potrzebna jest wiedza CSS. Jestem przeciwnikiem wszelakich wtyczek i wszystkie rozwiązania próbuje wdrażać bez ich użycia.

    Odpowiedz

  49. Jeśli chodzi o optymalizację obrazów na już istniejącej stronie www to ja np. do jednego sklepu www którym się zajmuję użyłem programu FileOptimizer, zaletą jego użycia jest przede wszystkim szybkość działania oraz optymalizacja całych drzew katalogów. Pobieramy z serwera ftp cały katalog z obrazami wrzucamy do mielenia w FileOptimizer i po jakimś czasie mamy zmniejszony cały folder z pełną strukturą, zachowanymi nazwami plików itp. Podmieniamy na serwerze i wszystko działa jak wcześniej a strona lżejsza.

    Odpowiedz

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *