Facebook Pixel
Hosting 2021-01-20 7 minut czytania

Jak przyśpieszyć stronę internetową w 5 prostych krokach?

Zdjęcie do artykułu

Szybkość ładowania strony ma jest niezwykle ważna. Żyjemy w ciągłych pośpiechu i każdy oczekuje szybkich wyników. Użytkownik nie powinien długo czekać na wczytanie witryny, ponieważ szybko może zrezygnować. Jeżeli Twoja strona ładuje się dłużej niż 3-4 sekundy, to średnio 40% użytkowników zrezygnuje z jej odwiedzenia. W przypadku prowadzenia biznesu wydajność strony WWW jest priorytetowa. Zbyt długo wczytująca się witryna przyniesie spadek sprzedaży produktów oraz może przyczynić się do upadku firmy. Należy zatem odpowiednio zoptymalizować stronę i dostosować do wymagań wyszukiwarki Google.


Jak sprawdzić speed page?

W tym celu możemy użyć oferowanego przez Google narzędzia PageSpeed Insights.


jak-przyspieszyc-strone-internetowa-w-5-prostych-krokach

Narzędzie pozwala w łatwy i szybki sposób przeanalizować każdą stronę, zarówno na komputerach, jak i smartfonach. Wystarczy wprowadzić w polu adres URL i kliknąć przycisk „analizuj”. Otrzymamy zwrotne informacje w postaci raportu zawierającego elementy niekorzystnie wpływające na wydajność naszej strony.

Od 2021 roku na ranking w wynikach wyszukiwania będzie miał znaczenie Core Web Vitals. Są to czynniki wyższej wadze, skoncentrowane na wydajności i zadowoleniu użytkowników. Inne czynniki aktualnie są mniej ważne.


jak-przyspieszyc-strone-internetowa-w-5-prostych-krokach

  • Largest Contentful Paint (LCP) - mierzy czas renderowania obrazu lub bloku tekstu. Właściciele witryn powinni dążyć do tego, aby LCP ładowała w ciągu 2,5 sekundy.
  • Cumulative Layout Shift (CLS) - określa czas przesunięcia wizualne elementów podczas ładowania strony. Wynik CLS powinien być mniejszy niż 0,1.

Jak przyśpieszyć stronę internetową w kilku krokach?


  1. Optymalizacja obrazów
  2. To zwykle jedna z najważniejszych rzeczy. Zmiana rozdzielczości zdjęć na mniejszą sprawia, że grafika jest lekka i strona szybciej wczyta się. Nie ma potrzeby dodawania obrazów o rozdzielczości większej niż 1920×1080 (FullHD). Można nawet pokusić się o zmniejszenie do 1600 pikseli szerokości. Rozmiar grafiki i jej format również ma znaczenie. Zapisanie pliku w popularnym formacie .jpg. pozwala uzyskać dobrej jakości obraz i niewielki rozmiar. Grafiki najlepiej powinny mieć poniżej 100 KB rozmiaru.

    Kompresję zdjęć możemy uzyskać także dzięki narzędziu compressjpeg.com. Po dodaniu obrazu za pomocą suwaka możemy dostosować jakość oraz rozmiar pliku.

  3. Wideo
  4. Filmy umieszczone na stronie hostowane na tym samym serwerze mogą znacznie opóźnić wyświetlanie witryny lub spowodować przerwy w odtwarzaniu. W szczególności, gdy hosting ma ograniczoną przepustowość. Co należy zrobić? Najlepszym rozwiązaniem jest umieszczenie wideo na zewnętrznej platformie np. YouTube. Serwery są rozmieszczone na całym świecie. YouTube sam zajmie się dostosowaniem jakości filmu do łącza internetowego użytkownika. Udostępnienie filmu za pomocą tego serwisu pozytywnie wpłynie na wyświetlanie strony. Dodatkowo zaoszczędzi miejsce na Twoim hostingu oraz skróci czas ładowania witryny oraz wideo.

  5. Optymalizacja kodu HTML, CSS i JavaScript
  6. Przeglądarki lubią czysty, zrozumiały kod, w którym nie ma błędów. To pozwala również szybciej ładować stronę. Optymalizacja kodu dotyczy usunięcie niepotrzebnych linii kodu, komentarzy, białych znaków, które są nie potrzebne. Należy jednak zrobić to umiejętnie, aby kod nie stracił na poprawności semantycznej. Istnieją również także narzędzia usuwające bałagan w kodzie, zachowując przy tym pełną funkcjonalność kodu. Zminimalizowany kod jest lżejszy w wyniku czego strona załaduje się szybciej.

    W przypadku WordPressa można skorzystać z wtyczki WP Fastest Cache.

  7. Lazy loading
  8. Zastanawiasz się czym jest? To zabieg, który wczytuje obrazy na stronie, wtedy gdy są one potrzebne. Gdy przewijając stronę, natrafimy na grafikę to właśnie w tym momencie zostanie załadowana. Cały mechanizm sprawi, że strona od samego początku będzie się wczytywać szybciej.

    Funkcja jest dostępna w WordPressie za pomocą wtyczki A3 Lazy Load. Jeśli posiadasz stronę napisaną w HTML, możesz dodać opóźnienie ładowania grafik do znacznika img atrybut loading = ”lazy”.

  9. Zmiana wersji PHP
  10. Czy zmieniać wersję, skoro wszystko działa? Naszym zdaniem tak. Warto przeanalizować każdą wersję dla swojej strony. Najnowsze wersje 7.x są wydajniejsze niż 5.x. Dodanie funkcji preload w PHP 7.4 spowodowało szybsze ładowanie żądanych skryptów, które są kompilowane i przechowywane w pamięci podręcznej. Dla porównania podobna opcja była dostępna w wersji 5.5 i nazwa się opcode cache (np. Zend Opcache). Tutaj pliki są kompilowane raz i przechowywane we współdzielonej pamięci. Za każdym razem jest sprawdzana spójność w pamięci kodu. Przyglądając się działaniu obu rozszerzeń, preload zwiększa szybkość wczytywania plików. Wzrost wydajności programów opartych na wersji 7.4 może wynosić kilkadziesiąt procent. W szczególności należy zadbać o dobrze zaprojektowaną stronę pod względem optymalizacji kodu oraz ilości fragmentów.

Bardzo łatwo można porównać szybkość strony dzięki narzędziu tools.pingdom.com. W okienku wpisujemy adres witryny, a następnie wyświetla się wynik testu. W naszym porównaniu poddaliśmy bloga opartego na WordPressie na hostingu cal.pl. Warto dodać, iż mamy do czynienia z naprawdę szybkim hostingiem od cal.pl wyposażonym w dyski SSD oraz serwer Litespeed. Wzięliśmy pod uwagę wersje PHP od 5.6 do najnowszej 7.4. Różnica między nimi wynosi 0.258 ms.


jak-przyspieszyc-strone-internetowa-w-5-prostych-krokach

Jak wykazuje wykres z każdą wersją spada czas oczekiwania na witrynę. Test wykonywaliśmy kilkakrotnie i została wyciągnięta średnia z wyników. Analiza potwierdza naszą tezę. Włączając najnowszą wersję PHP Ty i Twoi klienci mogą zyskać cenny czas.

Mamy nadzieję, że dzięki kilku prostym krokom Twoja strona będzie szybsza. Wydajność jest bardzo ważna w przypadku serwisu obsługującego duży ruch. Stosując się do powyższych rad, zauważysz spadek czasu ładowania strony oraz poprawisz wynik wyświetlania Twojej strony w Google.

Ikona Skopiowano link do schowka
Klienci cal.pl AGORA
Klienci cal.pl CONSDATA
Klienci cal.pl Lazienka Plus
Klienci cal.pl Plandex
Klienci cal.pl Uniwersytet Szczecinski
Klienci cal.pl ZUT
Klienci cal.pl Koleje Wielkopolskie
Klienci cal.pl Koral Lody
Tło dla domen
...więcej niż hosting_