Przedstawiamy zestaw sprawdzonych metod na przyspieszenie działania Twojej strony internetowej, których nie możesz pominąć.
Jeśli Twoja strona nie wczytuje się w czasie krótszym niż trzy sekundy, ryzykujesz utratę potencjalnych zysków, a także obniżenie pozycji w wynikach wyszukiwania. Dodatkowo, niedostateczne zabezpieczenia witryny otwierają furtkę dla hakerów, co może prowadzić do poważnych strat wizerunkowych i finansowych.
W związku z tym, nie da się uniknąć konieczności optymalizacji zarówno bezpieczeństwa, jak i wydajności, aby zagwarantować użytkownikom lepsze i bezpieczniejsze doświadczenia.
Mówiąc o usprawnianiu wydajności, najczęściej słyszymy o takich praktykach jak włączanie kompresji, minimalizowanie plików, wykorzystanie buforowania, stosowanie lekkich szablonów graficznych oraz ograniczenie liczby wtyczek. Są to oczywiście ważne elementy, ale w niniejszym artykule przedstawimy znacznie szerszą gamę działań, które można zastosować na dowolnej platformie, np. WordPress, Joomla, Magento, Drupal czy Node.js.
Sprawdźmy razem, co już masz wdrożone, a czego jeszcze brakuje.
Wybór odpowiedniego pakietu hostingowego
Czasami podstawowym problemem jest źle dobrany dostawca usług hostingowych i korzystanie z planu współdzielonego.
Osobiście uważam, że nie chodzi o samych „złych” usługodawców, a raczej o skrajnie tanie pakiety hostingowe.
Coś jest zdecydowanie nie tak, jeśli miesięczny koszt hostingu jest niższy niż cena filiżanki kawy.
Współdzielony hosting można porównać do zatłoczonego autobusu, do którego nikt nie chce wsiadać, jednak robi to z powodu „atrakcyjnej” ceny.
Największą wadą hostingu współdzielonego są początkowe rabaty i brak przejrzystości, jeśli chodzi o liczbę stron internetowych korzystających z jednego serwera.
Uściślając, te liczby często sięgają setek.
To prowadzi do częstych problemów z przeciążeniem serwera, gdzie spora część tych stron nigdy nie osiągnie wystarczającej aktywności, aby pojawić się na pierwszej stronie wyników wyszukiwania Google.
Podsumowując, dla istotnych projektów zaleca się przejście na serwery VPS lub serwery dedykowane.
Sieć dostarczania treści (CDN)
CDN, czyli sieć dostarczania treści, jest drugim, kluczowym elementem po wyborze odpowiedniego hostingu.
Jest to niezbędne rozwiązanie dla każdego, kto posiada globalną publiczność. Wynika to z faktu, że nie da się hostować strony w każdym zakątku świata – serwer znajduje się w konkretnej lokalizacji. Odległość ma znaczenie, kiedy na przykład użytkownik z Japonii próbuje uzyskać dostęp do strony hostowanej w Nowym Jorku.
Subskrypcja usługi CDN, takiej jak Cloudflare, rozwiązuje ten problem lokalizacji. CDN przechowuje kopie Twojej strony w swojej sieci serwerów i obsługuje żądania z serwera najbliżej użytkownika. Dzięki temu zmniejsza się obciążenie jednego, centralnego serwera, który może być oddalony o tysiące kilometrów.
Dodatkowo, korzystając z CDN, możesz liczyć na wyższy poziom bezpieczeństwa niż ten, który oferuje standardowy hosting.
Włącz obsługę protokołu IPv6
Protokół IPv6 zapewnia szybsze połączenie niż IPv4. LinkedIn odnotował 40% wzrost wydajności w Europie, a Facebook około 10-15% dzięki dostępowi przez IPv6.
Spójrz na globalny wykres wdrożenia IPv6 opracowany przez Google.
Około 42% użytkowników łączy się z Google za pośrednictwem IPv6, jednak tylko 21,2% stron internetowych obsługuje ten protokół.
Co ciekawe, Cloudflare zaobserwował, że strony obsługujące IPv6 ładują się o 27% szybciej niż ich odpowiedniki korzystające z IPv4.
Czy Twoja witryna obsługuje IPv6? Jeśli nie jesteś pewien, możesz to sprawdzić online.
Jeśli jeszcze nie korzystasz z tego protokołu, oto jak go włączyć.
Większość dostawców CDN, takich jak Cloudflare, Incapsula, CacheFly i AKAMAI, oferuje IPv6. Możesz sprawdzić panel sterowania, aby go aktywować.
Jeśli nie korzystasz z CDN i masz hosting na serwerze VPS, takim jak Linode lub DigitalOcean, możesz zapoznać się z instrukcjami, jak włączyć IPv6 na serwerach WWW Nginx i Apache.
Włączenie IPv6 nie zaszkodzi, a może przynieść ok. 10% skrócenia czasu ładowania strony.
Wybierz HTTP/3 lub HTTP/2
HTTP to technologia używana do ładowania stron internetowych, gdy wpisujemy adres URL w przeglądarce.
Wszystko zaczęło się od HTTP/0.9 w 1991 roku, a następnie pojawiły się kolejne wersje, takie jak HTTP/2 i najnowszy HTTP/3.
HTTP/2 wprowadził szereg usprawnień w porównaniu do HTTP/1.1, takich jak:
- Push serwera
- Multipleksowanie
- Priorytetyzacja zasobów
- Kompresja nagłówków
- Niskie opóźnienia
Obecnie z HTTP/2 korzysta 39,3% stron internetowych, a jest on siedem razy szybszy niż HTTP/1.1. Przejście na HTTP/2 może skrócić czas ładowania strony nawet o 30-40%.
Sprawdź, czy Twoja strona obsługuje protokół HTTP/2.
Jednak HTTP/2 nie jest pozbawiony wad.
Na przykład, cierpi na blokowanie nagłówka kolejki. Oznacza to, że każdy problem z połączeniem TCP może zablokować wszystkie strumienie. W przypadku HTTP/3, który jest oparty na protokole UDP, utrata pojedynczego pakietu nie ma wpływu na inne strumienie.
Dodatkowo, HTTP/3 umożliwia mniejsze opóźnienia, unikając uzgadniania TLS przy ponownym połączeniu. Ogólnie rzecz biorąc, HTTP/3 zapewnia wszystkie zalety HTTP/2, ale bez związanych z nim problemów.
Sprawdź, czy Twoja witryna obsługuje protokół HTTP/3.
Możesz sprawdzić obsługę HTTP/3 lub HTTP/2 u swojego dostawcy usług hostingowych. Alternatywnie, Twój dostawca CDN może umożliwić łatwe przełączenie na preferowaną wersję HTTP.
Optymalizacja obrazów
Nikt nie lubi przeglądać stron z samym tekstem, dlatego obrazy są nieodzownym elementem każdej strony. Z drugiej strony, umieszczanie obrazów sprawia, że strona jest cięższa i wydłuża się czas jej ładowania.
Dlatego idealnym rozwiązaniem jest publikowanie obrazów w lżejszym formacie, takim jak WebP lub AVIF. Nie tylko drastycznie zmniejsza to rozmiar pliku (czasami nawet o 80%), ale jakość obrazu pozostaje w zasadzie taka sama.
Obecnie możesz konwertować i przesyłać obrazy bezpośrednio w tych formatach nowej generacji. Możesz również skorzystać z usług zewnętrznych, takich jak Optimole, aby konwersja odbywała się automatycznie.
Ogranicz nadmiarowe żądania HTTP
Strona internetowa nigdy nie wczytuje się jako jeden, spójny element. Zamiast tego, każdy element – tekst, obrazy, CSS, JavaScript – jest pobierany za pomocą oddzielnego żądania HTTP.
Przy założeniu, że pozostałe czynniki są stałe, strona z mniejszą liczbą żądań HTTP wczytuje się szybciej niż ta, która ma ich więcej.
Podsumowując, w naszym interesie jest dążenie do zminimalizowania liczby żądań HTTP.
Z mojego doświadczenia z WordPressem mogę powiedzieć, że wybór lekkiego szablonu graficznego, takiego jak GeneratePress, jest bardzo pomocny. Ponadto, ograniczenie liczby wtyczek również przyczynia się do szybszego i bezpieczniejszego działania strony.
Jest to jednak odrębny temat, który zasługuje na szczegółowe omówienie.
Zwróć na to uwagę, szczególnie jeśli masz stronę opartą na WordPressie, aby zmniejszyć liczbę żądań HTTP.
Przejdź na bezpieczne czcionki internetowe
Wszyscy chcemy, aby nasze strony wyróżniały się i były przyjazne dla użytkownika. Pierwszym krokiem w tym kierunku jest często zmiana czcionki.
Na szczęście dostępnych jest wiele bezpłatnych opcji, w tym czcionki Google. Niestety, ich stosowanie wiąże się z dodawaniem wielu żądań HTTP. Co gorsza, Twoja strona może powrócić do domyślnych czcionek systemowych, jeśli serwer czcionek zewnętrznych ulegnie awarii.
Aby temu zapobiec, niektórzy webmasterzy hostują czcionki na własnych serwerach. Chociaż jest to krok w kierunku samodzielności, nadal wiąże się z koniecznością pobrania pliku czcionki przez użytkownika, co generuje dodatkowe żądania HTTP i wpływa na wydajność.
W związku z tym, warto korzystać z tzw. bezpiecznych czcionek internetowych, które są domyślnie dostępne na większości urządzeń (Windows, Mac, Linux, iOS, Android itp.). Dzięki temu unikniesz ryzyka zmiany czcionek w przypadku awarii serwera, a Twoja strona będzie wczytywać się szybko.
Oto kilka bezpiecznych czcionek internetowych:
- Arial
- Verdana
- Trebuchet MS
- Tahoma
- Times New Roman
- Georgia
- Impact
Wykorzystaj buforowanie (caching)
Buforowanie polega na przechowywaniu danych lokalnie. Zapewnia to najszybsze możliwe wczytywanie strony podczas kolejnych odwiedzin. Eksperci często zalecają wdrożenie buforowania, aby skrócić czas ładowania strony.
Na przykład, dla WordPressa dostępnych jest wiele wtyczek buforujących, takich jak WP Fastest Cache. Alternatywnie, można wdrożyć buforowanie przeglądarki, modyfikując plik .htaccess.
Jednak sposób wdrożenia buforowania zależy od używanej platformy i może być różny.
Ładowanie asynchroniczne
To kolejna kwestia z mojego osobistego doświadczenia z WordPressem. W moim przypadku, Google Search Console wyświetlił ostrzeżenie o ponad 40 postach, które nie przeszły podstawowego testu Web Vitals.
Podstawowe wskaźniki internetowe to ocena strony Google, która jest istotna dla każdego, kto chce osiągnąć wysoką pozycję w wynikach wyszukiwania.
Aby lepiej to zrozumieć, sprawdź tę analizę PageSpeed jednego z artykułów z newsblog.pl:
Dzięki pracy programistów WordPressa, strona przeszła te testy bardzo dobrze.
Natomiast w moim osobistym projekcie miałem problem z parametrami Largest Contentful Paint (LCP) i First Contentful Paint (FCP). W szczególności LCP wynosił 3,3 sekundy, a FCP około 2,4 sekundy.
Jako bloger bez doświadczenia w IT, nie mogłem dokonać optymalizacji poza pewien poziom. Spełniłem wszystkie zalecenia: motyw premium, minimalna liczba wtyczek, czcionki systemowe, obrazy WebP, hosting w chmurze, itp.
Pomogła dopiero zmiana pojedynczego ustawienia w wtyczce Jetpack Boost dla WordPressa:
Mówiąc w skrócie, asynchroniczne ładowanie polega na dodaniu atrybutów `async` lub `defer` do znaczników `<script>` skryptów JavaScript pochodzących od zewnętrznych dostawców. W ten sposób skrypty ładują się w tle, nie blokując renderowania strony.
Dzięki temu jednemu zabiegowi, moje LCP i FCP spadły odpowiednio do 1,7 s i 1,2 s.
Dla jasności, usunąłem również wyróżniony obraz z widoku pojedynczego postu, oprócz włączenia opcji opóźnienia nieistotnego JavaScript, zanim osiągnąłem te wartości LCP i FCP.
Minimalizuj przekierowania
Idealnie byłoby, gdyby na stronie nie występowały żadne przekierowania, aby osiągnąć najlepszą wydajność. Jednak każdy z nas korzysta z przekierowań w pewnym momencie.
Zasada jest prosta: każde przekierowanie wydłuża czas ładowania strony. Zbyt wiele przekierowań spowoduje, że użytkownik szybko zrezygnuje z Twojej strony, chyba że prowadzisz internetowy sklep Apple, gdzie ludzie czekają w kolejkach na każdy nowy produkt 😀.
Uważaj z filmami
Filmy zwiększają zaangażowanie użytkowników i pomagają przełamać monotonię tekstu. Stanowią świetne uzupełnienie obrazów i często są nieuniknione.
Najprostszym sposobem jest osadzanie filmów z YouTube. Możesz jednak porównać dwie strony, jedną z filmem YouTube i drugą bez, za pomocą Google PageSpeed, aby ocenić, jak bardzo osadzony film wpływa na wydajność strony.
Aby to zilustrować, opublikowałem dwa posty na naszej stronie testowej. Jeden zawierał film z YouTube (bez dodatkowego tekstu czy obrazów), a drugi był pusty. Następnie porównałem wyniki obu stron w Google PageSpeed.
Czy widzisz wpływ na całkowity czas blokowania, indeks prędkości, FCP i LCP? W szczególności, dodanie filmu wydłużyło całkowity czas blokowania o całą sekundę, co może skłonić użytkowników do przejścia na stronę konkurencji.
Aby potwierdzić te wyniki i uzyskać więcej informacji, uruchomiłem te same adresy URL w narzędziu do testowania szybkości strony Pingdom.
Jak widzisz, pojedynczy film z YouTube dodał 23 dodatkowe żądania HTTP, zwiększył rozmiar strony i czas ładowania, a także obniżył ogólną ocenę wydajności.
Na szczęście, istnieje kilka trików, które pozwalają zminimalizować ten negatywny wpływ. Po pierwsze, możesz zdecydować się na asynchroniczne ładowanie filmów, co pomoże skrócić całkowity czas blokowania.
Po drugie, możesz zastosować leniwe ładowanie filmów. Istnieje wiele wtyczek WordPress, które ułatwiają osadzanie filmów z YouTube z wykorzystaniem tego mechanizmu.
Wreszcie, dobrym rozwiązaniem jest osadzanie miniatur filmów, które uruchamiają odtwarzanie dopiero po kliknięciu.
Minifikuj HTML, JavaScript i CSS
Chociaż może się to wydawać mało istotne, minifikacja faktycznie przyczynia się do płynniejszego działania strony.
Minifikacja usuwa zbędne elementy z kodu źródłowego, takie jak dodatkowe spacje, średniki, komentarze, podziały wierszy, i sprawia, że kod staje się bardziej zwarty.
W zależności od platformy, być może będziesz musiał to robić ręcznie lub skorzystać z narzędzia, które zrobi to za Ciebie. Zawsze jednak warto zachować kopie zapasowe oryginalnych plików, ponieważ modyfikowanie zminifikowanego kodu jest bardzo trudne.
Mimo to, maszyna bez problemu odczyta taki zwarty kod, a Ty zauważysz niewielką poprawę wydajności.
Użyj kompresji internetowej
Kompresja internetowa działa podobnie jak kompresja plików zip, ale jest stosowana do plików internetowych, aby skrócić czas ładowania strony. Jest ona obsługiwana przez współczesne przeglądarki.
Mówiąc w prostych słowach, strona z włączoną kompresją będzie wczytywać się szybciej niż strona bez kompresji, przy założeniu, że pozostałe czynniki są identyczne. Kompresja działa w przypadku plików HTML, JavaScript, CSS, obrazów i może w niektórych przypadkach zmniejszyć rozmiar strony o ponad 70%.
Dostępne są dwie opcje: Gzip i Brotli. Najprawdopodobniej Twój dostawca usług hostingowych stosuje jedną z nich.
Możesz sprawdzić, czy kompresja jest włączona dla Twojej strony i która metoda jest stosowana. Jeśli kompresja nie jest włączona, skontaktuj się z dostawcą usług hostingowych lub z programistą.
Elementy zewnętrzne
Można to traktować jako rozszerzenie sekcji dotyczącej żądań HTTP, ale wymaga to osobnej wzmianki.
Elementy zewnętrzne na stronie obejmują wszystko, co nie jest natywne, m.in. reklamy, kody analityczne, wtyczki, fora.
Takie elementy dodają dodatkowy kod do Twojej strony, zwiększając liczbę żądań HTTP i sprawiając, że strona staje się „napompowana” i mniej przyjazna dla użytkownika.
Oczywiście, niektóre elementy zewnętrzne są niezbędne na każdej stronie internetowej. Mimo to, staraj się zachować minimalizm i eksperymentuj z różnymi usługami, aby wybrać te, które mają najmniejszy wpływ na wydajność.
Szybsza strona internetowa!
Wydajność strony internetowej nie jest czymś, co można ustawić raz i zapomnieć. Sieć internetowa ciągle się zmienia, dlatego warto być na bieżąco i szybko dostosowywać się do nowych warunków, aby zapewnić najwyższą szybkość i bezpieczeństwo.
Pamiętaj, że bezpieczeństwo jest równie ważne, co szybkość.
Jako eksperci od WordPressa, nie możemy pominąć kwestii najlepszych praktyk w zakresie bezpieczeństwa WordPressa.