Przyspieszanie stron internetowych

Żyjemy w szybkich czasach, dlatego zmuszanie Internautów do czekania na pojawienie się zawartości naszej strony internetowej w ich przeglądarce to nieporozumienie. Jest wiele czynników, które wydłużają czas ładowania się strony www. Opiszę tylko te, na które mamy wpływ i pokażę jak je zminimalizować.

Spis treści

1. Serwer a szybkość stron internetowych,
2. Wpływ procesu tworzenia na szybkość strony internetowej,
3. Wpływ grafiki i multimediów na szybkość strony internetowej,

Sprawdź moją stronę w Page Speed Insights lub GTMetrix. Wynik podwyższyłem stosując dokładnie te porady, które są poniżej. Każdy punkt to szeroki temat, dlatego odwiedź podlinkowane artykuły z bardziej szczegółowymi informacjami.

O tym jak ważne jest utrzymanie wysokiej dostępności naszej witryny internetowej poprzez zapewnienie szybkiego wejścia na nią, możemy się przekonać zapoznając się ze Wskazówkami dla Webmasterów oraz nowymi wskaźnikami Core Web Vitals.

To oczywiste, że pozycja w wynikach wyszukiwania jest skorelowana do czasu potrzebnego na jej załadowanie. To jeden z nielicznych czynników wpływających na pozycję w SERP, o którym wprost mówi samo Google. Wysiłek włożony w ogólnie pojętą optymalizację strony WWW pod kątem prędkości strony na pewno się opłaci. Zyskujemy wyższe pozycje strony i zadowolenie użytkowników a w przypadku sklepów internetowych: większy współczynnik konwersji czyli ilość odwiedzających, którzy stali się naszymi klientami.

Jeżeli używasz systemu WordPress przejdź do praktycznego dedykowanego przewodnika jak przyspieszyć WordPress.

Jeżeli jesteś właścicielem lub deweloperem sklepu opartego o system PrestaShop czytaj praktyczny poradnik jak przyspieszyć PrestaShop.

Jeżeli korzystasz z systemu Joomla! sprawdź co znacznie przyspieszy i zwiększy wydajność strony w przewodniku: jak przyspieszyć Joomla!

Serwer a szybkość strony

Serwer czyli hosting WWW wpływa na opóźnienia związane z generowaniem strony dla użytkownika. To serwer jest odpowiedzialny za to, że po kliknięciu na link czekamy ułamek lub kilka sekund na pojawienie się następnej strony. Rzadko ma wpływ na powolne wczytywanie się zdjęć lub „zacinanie” się strony. Aby zapewnić szybkie ładowanie się strony po stronie serwera, można wykorzystać takie takie funkcje serwera jak:

• Kompresja GZIP – inaczej nazywana kompresją tekstową. Jest to jedna z istotniejszych rzeczy jaką musimy włączyć na serwerze. W sieci jest wiele narzędzi, które to ułatwiają. Kompresji GZIP najczęściej są poddawane pliki arkusza stylów CSS, pliki HTML, kody JavaScript i wszelkie inne treści które są wysyłane wprost do przeglądarki odwiedzającego w postaci tekstu. Pakowane w ten sposób pliki są odchudzane o przeszło 80%. Czytaj więcej o tym jak działa i jak włączyć kompresję GZIP/deflate
• Funkcja Expires w .htaccess – za jej pomocą ustalisz datę ważności  opublikowanych plików. Dzięki temu przeglądarka wie po jakim czasie ma pobrać ponownie wcześniej pobrany element i nie będzie musiała tego robić na okrągło przy każdej ponownej wizycie. Plik jest zapisywany w pamięci przeglądarki i nie dość, że zmniejszymy obciążenie serwera, to przyspieszymy ładowanie strony i przechodzenie do kolejnych podstron. Czytaj jak wykorzystać pamieć podręczna przeglądarki za pomocą nagłówków Expires i Cache-Control
• CDN (Content Delivery Network) i Load Balancing – jest to instalacja strony w wielu lokalizacjach, dzięki czemu skracamy geograficzną drogę od użytkownika do serwera oraz umożliwiamy ładowania wszystkich zasobów strony niemal jednocześnie. Czytaj więcej w artykule jak działa i co to jest CDN? Pokazałem w nim jak działa CDN, na czym polega jego większa szybkość i wykonałem testy.
• Rozwiązania typu PHP-FPM – istnieją różne implementacje interpretera, które mogą wpływać na wydajność stron i aplikacji internetowych. Sprawdź jakie szczegółowe rozwiązania dostarcza twój hosting. Działania tego typu zmniejszają TTFB, czyli opóźnienie odpowiedzi serwera witryn internetowych.
• Wykorzystanie protokołu HTTP/2 – nowsza wersja protokołu pozwala na dużo wydajniejsze działanie sieci Web. Pliki są pobierane w optymalnej kolejności, zapytania są kompresowane Czytaj więcej o zaletach tego protokołu i jak go włączyć na serwerze w przewodniku czym jest HTTP2.
• Aktualizuj wersję interpretera PHP na swoim serwerze – zazwyczaj każda nowa wersja PHP jest szybsza od poprzedniej. Optymalizacje w PHP biorą się z obserwacji jego przypadków użycia i zgłaszanych problemów. Najnowsza wersja jest w stanie pomijać kod, który nigdy nie będzie użyty. Czytaj więcej o aktualizacji i o tym jak zmienić wersję PHP na różnych serwerach.
• Zadbaj o jak najwyższą wersję baz danych – to zminimalizuje ilość jednoczesnych połączeń oraz czas wykonywania się zapytań MySQL. Tak jak w przypadku PHP, każda kolejna wersja jest zazwyczaj bardziej wydajna. Pamiętaj aby ostrożnie wykonywać migrację na nową wersję.
• Przesiadka na wydajniejszy hosting (skalowanie w pionie) – być może najbardziej opłacalnym rozwiązaniem będzie najbardziej oczywista technika czyli zmiana hostingu na szybszy. Różne ceny za hosting są zazwyczaj odzwierciedleniem różnej jakości i wydajności. Przeniesienie strony na inny serwer wbrew pozorom nie jest trudnym zadaniem. Czytaj czym się różni hosting współdzielony od VPS i dedykowanego. Technika ta jest przydatna na stronach wyposażonych w CMS oraz takich, które zaczyna odwiedzać coraz więcej osób.
• W ostateczności: zbudowanie całej infrastruktury (skalowanie w poziomie) – jeżeli jesteś właścicielem często odwiedzanego portalu z obszerną bazą danych, będziesz musiał sprostać zadaniu skalowania poziomego swojego hostingu i aplikacji.

Uwaga: serwery różnych dostawców różnią się konfiguracją ostrożnie wykonuj edycje w .htaccess. Upgarde wersji PHP i MySQL może zablokować niektóre wyparte wyrażenia i instrukcje. Stary kod może nie działać na nowych wersjach PHP (brak tzw. wstecznej kompatybilności). Pamiętaj wykonywać kopie zapasowe, bo niektóre przestarzałe instrukcje są wycofywane ze specyfikacji i strona lub część jej funkcji najzwyczajniej może przestać działać.

Wdrożenie tych technik zwykle następuje w momencie publikacji strony lub jej optymalizacji.

Web Development a szybkość strony

Sam sposób projektowania witryny ma wpływ na jej szybkość i responsywność. Strona źle zaprojektowana może się zacinać i obciążać przeglądarkę dodatkowo może obciążać serwer co będzie skutkowało opóźnieniami w generowaniu strony dynamicznej. W trakcie tworzenia strony należy zwrócić uwagę miedzy innymi na:

• Objętość pliku HTML – zadbaj o to, by plik był stworzony zgodnie z zasadą KISS (Keep It Simple, Stupid) czyli profesjonalnie w jak najprostszy sposób. Należy zadbać aby ilość i zagnieżdżanie elementów DOM było optymalne.
• Objętość plików CSS – to samo co wyżej tylko dotyczy plików CSS.
• Objętość plików JS – to samo co wyżej tylko dotyczy skryptów JavaScript. Niektóre instrukcje w skryptach nie są nigdy używane. Za pomocą narzędzia Coverage można je znaleźć i zwyczajnie usunąć. Czytaj więcej o tym jak usunąć nadmiarowy kod CSS/JS.
• Ilość skryptów – ogrom plików JavaScript może poważnie wpłynąć na opóźnienia w ładowaniu strony. Stosuj je z umiarem a nawet usuń tam gdzie są niepotrzebne lub można je zastąpić rozwiązaniami, które daje HTML5 i CSS3. Jeżeli pliki są niezbędne połącz je w jeden plik lub wklej małe pliki w ciało strony. Sprawdź zalecane praktyki umieszczania i scalania CSS i JS na stronach internetowych.
• Zewnętrzne źródła – umiesz liczyć, licz na siebie. Zamieszczaj linki do skryptów znajdujących się lokalnie. Skopiuj potrzebny kod na swój serwer o ile pozwala na to licencja. Najlepszym rozwiązaniem jest instalacja statycznych plików na własnym CDN.
• Minimalizacja JavaScript i CSS – wcięcia, łamanie linii i nadmiarowe spacje w kodach CSS i JavaScript są niezbędne podczas pisania, jednak kiedy kod jest umieszczony na stronie, zajmują tylko niepotrzebne kilobajty. Cudów nie zdziałamy ale będziemy wzorem do naśladowania. Czytaj więcej o minifikacji plików JS i CSS.
• Aktualizacja frameworków – im nowsze tym bardziej wydajne – przynajmniej w teorii tak to powinno działać.
• Hardcode stałych elementów – elementy a nawet całe podstrony, które rzadko ulegają zmianie można przerobić na pliki statyczne z na sztywno zakodowaną treścią. Taki zabieg obniży czas odpowiedzi serwera ponieważ nie będzie on musiał odpytywał bazy o ich treść. Stosuję tego typu trik najczęściej w nawigacji, nagłówku i stopce stron, które wykorzystują CMS WordPress. Więcej pisałem o tym w artykule dynamiczna i statyczna strona www.
• Cache w warstwie aplikacji – to rozwinięcie poprzedniej idei ale zakłada przechowywanie w systemie plików lub w MySQL całych tymczasowych wyrenderowanych wersji stron w witrynach dynamicznych. Każdy system CMS ma swoje rozwiązania Cache, i należy szukać w dokumentacji jak działa i jakie skutki ma jego stosowanie. Czytaj więcej o pamięci podręcznej w warstwie logiki.
• Optymalizacja baz danych MySQL – jeżeli mimo zastosowania wszystkich powyższych wskazówek odpowiedź serwera jest nadal opóźniona należy prawdopodobnie zoptymalizować bazę danych i zapytania MySQL.
• Narzędzia do monitoringu i dodatki społecznościowe – często stosowane przycisk do lajkowania (w które i tak nikt nie klika) lub galerie z Insta mogą zepsuć najbardziej zoptymalizowaną stronę WWW. Usunięcie ich może pozytywnie wpłynąć zarówno na szybkość działania strony jak i user experience.

Grafika i multimedia a szybkość strony internetowej

Pliki o dużym rozmiarze mają jednak największy wpływ na szybkość ładowania się witryn WWW.

• Dźwięk i muzyka – jestem melomanem, mam setki płyt CD i nigdy nie rozstaję się ze słuchawkami jednak uważam, że na stronach biznesowych po prostu nie ma dla nich miejsca. Jeżeli już stosujemy dźwięk w ramach artystycznej ekspresji należy optymalizować go tak jak inne zasoby strony WWW.
• Skalowanie zdjęć i grafik – skaluj pliki z obrazkami i umieszczaj je w oryginalnym rozmiarze a nie skaluj elementów za pomocą width i height. Przy galerii używaj znacznie odchudzonych miniatur, dzięki temu zdjęcia będą się pojawiać niemal równo z załadowaniem strony.
• Format grafiki – dla skomplikowanych zdjęć użyj stratnego JPG zaś dla prostych wykresów bardziej wydajny będzie PNG. Skorzystaj też z formatów nowszej generacji np. WebP.
• Kompresja JPEG i PNG – dostosowanie kompresji może mocno wpłynąć na końcowy rozmiar plików. Można dostosowywać te parametry w zależności od sytuacji.
• Serwer plików statycznych – jeżeli przechowujesz duże ilości plików statycznych przenieś je na serwer plików lub zintegruj serwis z chmurowymi rozwiązaniami typu Amazon S3. Dzięki temu że takie serwisy nie używają ciasteczek, i są zoptymalizowane do serwowania plików, każdy plik jest pobierany nieco szybciej.
• Odłożenie ładowania zdjęć i filmów – sprawdź na czym polega technika lazy-load.
• Optymalizacja multimediów – choć podobna do zdjęć, jest parę różnic, których zrozumienie pozwoli zwiększyć wydajność i przyspieszyć ładowanie się stron. Szczególnie istotna jest optymalizacja wideo, która nie zmarnuje transferu a wszelkie animacje będą szybko się pojawiać i będą odtwarzane płynnie.

Czytaj więcej w artykule, który tłumaczy chyba wszystkie niuanse kompresowania zdjęć: optymalizacja zdjęć na stronach www. Oraz tego jak umieszczać i konwertować wideo: optymalizacja wideo na stronach internetowych. Ten sam problem w kontekście dźwięków i muzyki można zgłębić w artykule o optymalizacji audio.

Podejście SPA

Podejście Single Page Application może przyspieszyć działanie stron za pomocą zmniejszenia ładunków sieciowych i zwiększenia wygody użytkowania witryn na urządzeniach mobilnych. Czytaj więcej o tworzeniu stron i aplikacji w podejściu Single Page Applications.

Wnioski

Czas w jakim przeglądarka pobiera zawartość witryny internetowej to miarodajny wyznacznik profesjonalizmu webmastera. Duża treść nie jest żadnym wytłumaczeniem. Istnieją obszerne portale, które ukazują swój Front-Page niemal błyskawicznie i pseudo strony z paroma grafikami na których załadowanie nie można się doczekać. Sprawdź swoja stronę w dedykowanej do tego aplikacji: Google Page Speed Insights a jeżeli chcesz uzyskać wynik 100/100 czytaj przewodnik o tym jak osiągnąć 100 punktów w PageSpeed Insights.

Źródła