Web Design Blog / Hosting:

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ć.

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.

Może wydawać się to bardzo kontrowersyjne ale pozycja w wynikach wyszukiwania jest silnie skorelowana do czasu potrzebnego na jej załadowanie. To jeden z nielicznych czynników wpływających na pozycję w SERP, o którym trąbi samo Google. Wysiłek włożony w 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.

Serwer

Aby zapewnić szybkie ładowanie się strony po stronie serwera, należy stosować takie funkcje serwera jak:

  • Kompresja GZIP – najważniejsza rzecz jaką musimy wykonać na naszych serwerach. Włącz tę opcję nawet jeżeli wiąże się to z umieszczaniem na serwerze spakowanych plików i edycją pliku .htaccess. 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%.
  • 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.
  • Przede wszystkim szybki serwer. Być może najbardziej opłacalnym rozwiązaniem będzie zmiana hostingu na szybszy, wbrew pozorom to nie jest trudne zadanie.

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

Web Development

Sam sposób projektowania witryny ma wpływ na jej szybkość i responsywność. 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.
  • Objętość pliku CSS – to samo co wyżej tylko dotyczy plików CSS.
  • 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.
  • Elementy Flash – stosowanie Flasha na stronach biznesowych w obecnych czasach to chyba jakiś żart. Wyrzuć je bez najmniejszego zastanowienia, bo już i tak nie robią na nikim wrażenia.
  • 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.
  • Minifikacja JV 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.
  • Aktualizacja frameworków – im nowsze tym bardziej wydajne – przynajmniej w teorii tak to powinno działać.

Grafika i multimedia

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ę z iPodem jednak uważam, że na stronach biznesowych po prostu nie ma dla nich miejsca.
  • Skalowanie bitmap – skaluj pliki z obrazkami i umieszczaj go w oryginalnym rozmiarze a nie skaluj elementów za pomocą width i height. Przy galerii używaj znacznie odchudzonych miniatur.
  • Format grafiki – dla skomplikowanych zdjęć użyj stratnego JPG zaś dla prostych wykresów bardziej wydajny będzie PNG.

Aktualizacje systemu na serwerze

Technologia PHP/MySQL jest ciągle udoskonalana.

  • Aktualizuj wersję interpretera PHP na swoim serwerze – pamiętaj aby ostrożnie wykonywać migrację na nową wersję – stary kod może nie działać na nowych wersjach PHP (brak tzw. wstecznej kompatybilności).
  • Zadbaj o jak najwyższą wersję baz danych – to zminimalizuje ilość jednoczesnych połączeń oraz czas wykonywania się zapytań MySQL. Każda kolejna wersja jest bardziej wydajna jednak pamiętaj wykonać kopie zapasowe, bo niektóre przestarzałe instrukcje są wycofywane ze specyfikacji i strona najzwyczajniej może przestać działać.

Nowy standard AMP

Przyspieszone strony mobilne AMP to odpowiedź na rewolucję mobilną. Wykonanie strony według standardów AMP daje gwarancję ultraszybkiego działania strony. Więcej na ten temat pisałem w artykule: Projektowanie stron AMP.

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.

Źródła

Przyspieszanie stron internetowych
4.8 (96%) głosów: 25

Autor: (28 lat)

Pamiętaj, że służę pomocą w razie wykonania lub odnowienia strony lub sklepu internetowego dla twojej firmy. Niech potwierdzeniem moich kompetencji będzie fakt, że jesteś na mojej stronie mimo, że jestem z całkiem innej części Polski ;)

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach płatnej usługi bez pośredniczących nastawionych wyłącznie na własny zysk agencji reklamowych.

Otrzymuj powiadomienie o nowych artykułach

*Bez obaw, nie udostępniam nikomu twojego adresu e-mail