Web Design Blog / SEO:

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

Skąd to wszystko wiem? Sprawdź moją stronę w Page Speed Insights lub GTMetrix:

pozycja w google - gtmetrix

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.
  • CDN (Content Delivery Network) i Load Balancing – jest to tzw. kolokacja, czyli instalacja strony w wielu lokalizacjach, dzięki czemu skracamy geograficzną drogę od użytkownika do serwera oraz umożliwiamy ładowania wszystkich zasobó strony niemal jednocześnie. Czytaj więcej w artykule jak działa i co to jest CDN?

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. 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.
  • Aktualizacja frameworków – im nowsze tym bardziej wydajne – przynajmniej w teorii tak to powinno działać. Najlepiej obejść się bez nich 🙂
  • 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 – tworzy tymczasową „gotową” wersję strony w stronach 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.
  • 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.

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.

Czytaj więcej w artykule o optymalizacji zdjęć na stronach www.

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 (95%) głosów: 44

Autor: (29 lat)

Służę pomocą w razie wykonania / odnowienia strony lub sklepu internetowego dla twojej firmy niezależnie od twojej lokalizacji czy skali przedsięwziecia.

Tego typu wpisy piszę w wolnych chwilach lub pomiędzy projektami. Tylko pomyśl co mogę dla Ciebie zrobić w ramach usługi :-)

Zadaj pytanie lub skomentuj

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

Komentarze publiczne

Brak komentarzy.
Otrzymuj powiadomienie o nowych artykułach

Wyrażam zgodę na przetwarzanie moich danych osobowych przez firmę Paweł Mansfeld z siedzibą w Jastrzębiu-Zdroju, ul. Plebiscytowa 10, w celu udzielenia odpowiedzi, w tym przedłożenia oferty jeśli o nią pytam. Moje dane osobowe będą przetwarzane do czasu cofnięcia zgody lub przez okres niezbędny do ustalenia, dochodzenia lub obrony roszczeń. Mam prawo dostępu do danych, sprostowania, usunięcia lub ograniczenia przetwarzania, prawo sprzeciwu, prawo wniesienia skargi do organu nadzorczego i prawo do przeniesienia danych.

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