Jak poprawić prędkość strony internetowej (nie tylko na WordPressie)?
Sposoby na poprawę szybkości strony bez kodowania.

Jak poprawić prędkość strony internetowej (nie tylko na WordPressie). 11 kroków do szybciej działającej strony.

jak poprawić prędkość strony internetowej

Prędkość strony internetowej ma znaczenie! 

Niektóre źródła mówią, że 1 sekunda opóźnienia we wczytywaniu strony skutkuje 6% spadkiem konwersji.

Google rekomenduje, żeby czas wczytywania strony wynosił poniżej 3 sekund.

A jak to wygląda w praktyce, na stronach internetowych w domenie .pl?

Przygotowując ten wpis sprawdziłem prędkość kilku stron przy użyciu narzędzia GTMetrix. Celowo pominąłem rozbudowane serwisy. Zupełnie losowo wchodząc przez odnośniki w mediach społecznościowych wybrałem kilka mniejszych stron do testu. Poniżej znajdziesz przykładowe wyniki:

Nie udostępniam nazw, bo nie mam na celu nikogo urazić. Bardziej chodzi o pokazanie aktualnego stanu w odniesieniu do rekomendacji (a jak wiadomo prędkość strony jest też czynnikiem rankingowym Google). Dodam, że znalezienie przykładów wolno wczytujących się stron do zaprezentowania w tym miejscu, wcale nie było wyzwaniem.

Z drugiej strony ciężko było znaleźć dla kontrastu szybko wczytujące się strony. Ale jest też dobry przykład:

mr Vintage czas wczytywania

3 sekundy

Znany blog mrvintage.pl. Czas wczytywania poniżej 3 sekund - gratulacje. 🙂

Tylko, że ta strona to prawdziwy wyjątek. Ogólnie z prędkością wczytywania stron jest… przeciętnie. 

Wyniki pokazane na początku tego wpisu, nie są mocno odstające od reszty. Dla przykładu średni czas wczytywania stron internetowych w Stanach Zjednoczonych, w różnych branżach, wynosi około 6 sekund:

Średni czas wczytywania strony internetowej w USA z podziałem na branże, źródło obrazka: thinkwithgoogle.com

Co jednak nie znaczy, że z tego powodu należy zignorować czas wczytywania strony. Optymalna prędkość ładowania strony internetowej może przynieść wiele korzyści, włączając w to większą sprzedaż.

Ale ok, skończmy już z wykresami. Czas odpowiedzieć na pytanie w jaki sposób można poprawić prędkość wczytywania strony internetowej? W tym wpisie przedstawiam gotowe sposoby dla osób, które nie potrafią programować, które można wykorzystać żeby poprawić prędkość strony internetowej.

Jak poprawić prędkość wczytywania strony internetowej?

Sposoby, które tutaj podam, dobrze sprawdzą się na blogach, na stronach małych i średnich firm. Skorzystać mogą osoby pracujące na WordPressie, ale nie tylko.

Pocieszający jest fakt, że nawet proste czynności mogą polepszyć – i to znacznie – prędkość wczytywania strony internetowej. Jeśli prowadzisz bloga, albo rozwijasz stronę firmy, wcale nie musisz umieć programować, żeby poprawić prędkość swojej strony.

W tym artykule znajdziesz 11 sposobów na poprawienie prędkości strony. 

Sposoby te podzieliłem na dwie grupy:

1) 6 metod + infografika – to ‘low-hanging fruits’, czyli łatwe zdobycze. Z wykorzystaniem tych sposobów niewielkim nakładem czasu możesz osiągnąć przyzwoite wyniki.
2) Pozostałe 5 sposobów, które uzupełniają pierwszą szóstkę.
Ta lista może być aktualizowana o kolejne sposoby.

Sposoby na poprawienie prędkości strony www.

jak poprawić prędkość strony internetowej
6 sposobów na poprawienie prędkości strony.

Jeśli uznasz, że ten materiał jest pomocny, możesz go swobodnie udostępnić, podając link do źródła.

W dalszej części tego wpisu jest opis, jak poprawić prędkość strony. Zacznę od bardziej szczegółowego opisu tej szóstki na infografice, a później podam jeszcze kilka innych sposobów na poprawę prędkości. Zaczynamy!

1. Skompresuj obrazy na stronie.

Kompresja obrazów na stronie internetowej pomoże Ci zaoszczędzić sporo miejsca, a tym samym może znacząco zmniejszyć cały rozmiar witryny do wczytania.

Weźmy przykład. Jeśli masz zdjęcie w rozdzielczości 1200x800px i rozmiarze 1mb, to zazwyczaj możesz zaoszczędzić kilkaset kilobajtów dokonując kompresji tego obrazu. Zmniejszając rozmiar obrazka z 1 mb do 300 kb zaoszczędzisz 700 kilobajtów na jednym zdjęciu, podczas gdy Google rekomenduje aby cały rozmiar strony (włączając grafiki) nie przekraczał 500 kilobajtów. Widzisz więc jak duże znaczenie ma tutaj kompresja obrazów.

Jeśli na stronie wykorzystasz 5 grafik i dokonasz kompresji, o jakiej tutaj piszę, to zaoszczędzisz już 3,5 mb miejsca. Kompresja obrazów na stronie to bardzo ważna kwestia i często pozwala znacznie poprawić czas wczytywania witryny.

Kompresję obrazów możesz dokonać przy użyciu wtyczki lub takiej strony jak np. imagecompressor.com.

2. Skaluj obrazy do mniejszego rozmiaru.

Jeśli na stronie masz moduł, który pozwala Tobie wykorzystać określoną przestrzeń, przyjmijmy: 400×800 pikseli, to nie wrzucaj zdjęć które są trzykrotnie większe.

Zdarza się, że na strony internetowe wrzucamy obrazy “takie, jakie są”, “takie, jak otrzymamy od fotografa”, przez co czas wczytywania strony znacząco rośnie, bo te zdjęcia są niedostosowane do strony.

Dlatego jeśli na stronie przykładowo mamy do wykorzystania przestrzeń 800×400 pikseli, moja rekomendacja byłaby taka, aby wrzucić odrobinę większe zdjęcie, w tych samych proporcjach (np. 1000×500 px.).

Nie wrzucajmy za małych obrazków, bo to nie będzie dobrze wyglądało na urządzeniach mobilnych, ale też nie należy dodawać zdjęć, które są zdecydowanie za duże.

3. Zmniejsz kod.

Często spotykam się z argumentem, że strony zbudowane na motywach mają masę niepotrzebnego kodu, co znacząco wpływa na ich prędkość wczytywania.

Nie mogę się z tym zgodzić. Strony z którymi pracuję w oparciu o motywy często osiągają znacznie szybsze prędkości wczytywania niż inne witryny, niezależnie od sposobu, w jaki zostały przygotowane.

Jeśli więc martwisz się, że strona jest przeładowana i będzie za wolno się wczytywać, zadbaj o zmniejszenie kodu. Usuń niepotrzebne znaki i w ten sposób zaoszczędź przestrzeń. To nie będzie wyglądało dobrze w źródle strony, ale to nie ma znaczenia. W efekcie to będzie miało tylko dobry wpływ dla Twoich użytkowników, bo skróci się czas wczytywania strony.

Jeśli korzystasz z WordPressa możesz skorzystać z pomocy darmowych wtyczek, jak np. Autoptimize.

4. Włącz kompresję GZIP.

Kompresja GZIP zmniejsza rozmiar danych, które są przesyłane do przeglądarki.

W efekcie pozwala to zaoszczędzić sporo przestrzeni i znacząco ograniczyć ilość plików przesyłanych na urządzenie użytkownika.

Na jednej z moich stron kompresja GZIP pozwoliła zaoszczędzić 88% rozmiaru plików. W efekcie rozmiar przesyłanego pliku zmniejszył się z 160 KB do 20 KB.

kompresja gzip
Komprezja GZIP - przykładowe efekty.

Kompresję GZIP możesz samodzielnie ustawić dodając fragment kodu do pliku .htaccess lub poprosić o wsparcie dostawcę usług hostingowych, który może włączyć kompresję GZIP.

Jeśli nie wiesz czy Twoja strona obsługuje teraz kompresję GZIP, możesz to sprawdzić na tej stronie.

5. Wykorzystaj pamięć podręczną przeglądarki.

Kiedy użytkownik wpisuje adres strony internetowej, w odpowiedzi na jego urządzenie przesyłane są różne pliki – HTML, CSS, JavaScript oraz zdjęcia. 

Wykorzystując pamięć podręczną przeglądarki możesz zapisać niektóre pliki na urządzeniu użytkownika, tak aby nie były one pobierane za każdym razem, kiedy wczytywana jest strona.

W ten sposób nie tylko ograniczysz czas łaowania strony, ale także oszczędzisz transfer, co może być istotne jeśli chodzi o korzystanie z udostępnianego zasobu na urządzeniach mobilnych.

Pamietaj też, żeby ustalić różny czas przechowywania plików w pamięci podręcznej. Podczas gdy niektóre materiały, takie jak np. logo zmieniają się raczej rzadko i mogą być przechowywane przez dłuższy okres czasu, tak inne zasoby mogą zmieniać się znacznie częściej i ich czas przechowywania powinien być krótszy.

6. Wybierz odpowiedni hosting.

Zagadnienie hostingu jest złożone.

Wybór odpowiedniego hostingu pozwoli:

  1. Zmniejszyć czas odpowiedzi serwera.
  2. Skrócić czas kiedy strona zacznie się wczytywać – TTFB (Time To First Byte).
  3. Poprawić prędkość operacji wykonywanych na serwerze, co będzie skutkowało skróceniem czasu potrzebnego na wczytanie całej strony.

Dla Twojej strony możesz wybrać kilka rodzajów hostingu: 

  • hosting współdzielony – chyba najpopularniejsze rozwiązanie, czy słusznie? Na pewno nie zawsze.
  • Hosting VPS.
  • Serwer dedykowany.

Kwestia hostingu to złożone zagadnienie. W najbliższym czasie przybliżę podstawy związane z wyborem odpowiedniego hostingu dla strony internetowej oraz różnicami między hostingiem współdzielonym, VPS, a serwerem dedykowanym.

...więcej sposobów na zmniejszenie prędkości wczytywania strony...

7. Zmniejsz ilość zapytań.

Jak podaje Yahoo.com, 80% czasu ładowania strony jest związana z takich komponentów stron jak w szczególności: zdjęcia, arkusze styli, skrypty… 

Zmniejsz ilość zapytań, żeby polepszyć prędkość strony internetowej.

Sposobem na zmniejszenie ilości zapytań jest połączenie kilku zapytań w jedno (można np. połączyć kilka arkuszy styli).

Nie muszę chyba dodawać, że korzystając z WordPressa, z pomocą przychodzą nam wtyczki, które wystarczy odpowiednio skonfigurować, a one automatycznie zmniejszą ilość zapytań na stronie.

8. Wykorzystaj lazy load - leniwe ładowanie obrazków.

Leniwe ładowanie obrazków, to technika, która polega na tym, że na początku wczytuje się tylko to, co widzimy na ekranie. Inne zasoby są ładowane dopiero w momencie, kiedy są wyświetlane. 

Leniwe ładowanie obrazków może znacząco poprawić prędkość wczytywania strony. Zobacz poniższe wideo, żeby sprawdzić wyniki wykorzystania lazy load oraz dowiedzieć się jak można włączyć leniwe ładowanie obrazków na WordPressie (wideo w j. angielskim).

9. Wykorzystaj asynchroniczne ładowanie zasobów.

Zasoby na stronie – takie jak CSS czy JavaScript, mogą ładować się sychronicznie (jeden po drugim) lub asynchronicznie (kilka jednocześnie).

Lepszy czas wczytywania strony możemy osiągnąć dzięki asynchronicznemu wczytywaniu zasobów.

Async JavaScript to przykładowa wtyczka, którą możesz wykorzystać do asynchronicznego ładowania zasobów na WordPressie. 

10. Hostuj video poza stroną.

Jeżeli na stronie, we wpisie na blogu etc., udostępniasz video nie wrzucaj go na serwer, żeby dodatkowo nie obciążać strony.

Zamiast tego wykorzystaj zewnętrzne platformy – jak np. YouTube, żeby umieścić tam swoje video i później tylko osadzić je na stronie.

11. Stale testuj i optymalizuj stronę.

Optymalizacja prędkości strony to proces ciągły. Warto regularnie monitorować i testować czas potrzebny na wczytanie strony internetowej.

Warto też obserwować czy nie pojawiają się nowe metody poprawienia prędkości strony. Prędkość strony internetowej to ważny temat i spodziewam się, że w najbliższych miesiącach czy nawet latach, kwestia prędkości wczytywania strony będzie stawała się coraz bardziej istotna.

Do testowania prędkości strony mogę Ci polecić narzędzie GTMetrix. Narzędzie to nie tylko pozwala zbadać prędkość wczytywania strony, ale także na podstawie wykonanego testu dostarcza rekomendacje, co konkretnie należy poprawić na Twojej stronie, aby osiągnęła ona lepsze wyniki wczytywania.

11 kroków do szybciej działającej strony

W tym artykule przedstawiłem 11 sposobów na poprawienie prędkości strony. Artykuł moze być aktualizowany o kolejne sposoby. Metody, które tutaj przedstawiłem są łatwe do wdrożenia, a jeśli korzystasz z WordPress-a możesz je wykorzystać na swojej stronie bez umiejętności programowania.

Jeżeli interesuje Ciebie temat prędkości strony zapoznaj się też z innym artykułem na blogu:

.

Dodaj komentarz

avatar
  Subscribe  
Powiadom o