fbpx

Jak zwiększyć szybkość ładowania strony WWW? Optymalizacja konwersji cz. 1

30 lipca 2019

Czas czytania: 8 min.

Jak zwiększyć prędkość wczytywania strony WWW? Przeczytaj część 1 mojego poradnika optymalizacji konwersji na blogu i w sklepie internetowym!

 

Przeczytaj wstęp do tego artykułu, klikając w link poniżej:

Jak zwiększyć konwersje w sklepie online i na blogu? Poradnik

 

 

W przypadku wielu stron WWW winę za wolne ładowanie strony możemy zrzucić na zbyt duże obrazki, niezoptymalizowany kod CSS oraz zbyt wiele skryptów JavaScript.

Dodatkowym problemem może być też niewystarczające cachowanie zasobów, co zmusza przeglądarkę odbiorcy to ciągłego pobierania tych samych treści za każdym razem, gdy znajdzie się na twojej stronie.

W jaki więc sposób pozbyć się tych problemów?

 

 

Zoptymalizuj obrazki, aby ładowały się szybciej

 

Zmniejsz wymiary i wagę grafik

Najważniejszym krokiem, jaki powinieneś wykonać to sprawdzenie, czy aby na pewno potrzebujesz tak dużych obrazków.

Wielokrotnie zdarza się, że administrator strony bezwiednie wrzuca zdjęcia czy grafiki zdecydowanie zbyt ciężkie, by Google uznał to działanie za choć odrobinę sensowne.

Kompresja obrazków to nic trudnego, choć w przypadku rozwiązań bezpłatnych może być nieco czasochłonna.

 

Krok 1 – Zmniejsz wymiary

W pierwszej kolejności upewnij się, że grafiki mają poprawne wymiary.

Jeżeli nie wiesz, jakie powinny mieć, to zbadaj obrazki już obecne na stronie.
Wciśnij kombinację klawiszy CTRL+SHIFT+I i kliknij w opcję oznaczoną rysunkiem kursora myszki. Na koniec najedź myszką na wybrany obrazek, by poznać jego wymiary.

 

Pamiętaj, aby sprawdzać rozmiary obrazków w możliwie największej rozdzielczości – ja poprzez opcję “Edit” ustawiłam 2560×1440, ponieważ wiele osób posiada komputery obsługujące rozdzielczość większą, niż full HD.

 

Optymalizacja konwersji

 

Następny krok to sprawdzenie, jakie realnie wymiary ma twoja grafika.
Zrobisz to klikając prawym przyciskiem myszy w obrazek i następnie wybierając “Właściwości”. W zakładce “Szczegóły” znajdziesz wymiary.

 

Optymalizacja konwersji

 

Zwróć szczególną uwagę na proporcję wymiarów grafiki. Czy zgadza się z tą, którą podejrzałeś na stronie?

Ostatnim krokiem, który musisz wykonać, aby wymiary się zgadzały jest ewentualne zmniejszenie wymiarów obrazka, który chcesz wgrać.

 

Jak zrobić to najprościej, bez użycia Photoshopa czy Gimpa?

 

Kliknij prawym przyciskiem myszy na grafikę i wybierz “Edytuj”.

Domyślnie powinien otworzyć się stary, ale jary Paint. Serio!
I nie martw się – jakość grafiki nie ulegnie pogorszeniu. Pamiętaj, że to rozwiązanie działa tylko w przypadku plików .jpg oraz .png bez przezroczystości.

Wybierz opcję “Zmień rozmiar” dostępną w górnym panelu. Na koniec zmień opcję na “Piksele” i wpisz właściwy wymiar w oknie “W poziomie”. Wysokość grafiki dopasuje się automatycznie.

Kliknij OK i zapisz grafikę. Voila! Teraz czas na właściwą kompresję.

 

PRO TIP: Jeśli twój system CMS ma taką funkcjonalność, ładuj miniaturki grafik w o wiele mniejszym rozmiarze, niż grafiki w maksymalnym wymiarze (np. miniaturka przy tytule wpisu i zdjęcie wyróżnione w samym artykule). W WordPressie skorzystaj z możliwości zmiany pełnego rozmiaru zdjęcia na Medium, Medium Large albo Thumbnail.

 

Krok 2 – Skompresuj, czyli zmniejsz wagę grafiki

 

Płatne rozwiązania

Na rynku dostępnych jest mnóstwo płatnych rozwiązań, które za ciebie i hurtowo skompresują grafiki już wrzucone na stronę.

 

Poniżej znajdziesz kilka przykładów:

 

Darmowe rozwiązania

W sklepie wtyczek WordPressa znajdziesz również mnóstwo darmowych rozwiązań, które niestety takie są tylko w bardzo określonym zakresie. Podobnie jest w przypadku Magento.

Polecam ci więc ręczne kompresowanie obrazków i dopiero wgrywanie ich na serwer.

Testowałam kilkanaście różnych narzędzi online do kompresowania i szczerze polecić mogę Ci jedno, które działa w 90% przypadków.

Jest nim Compressor.io – bardzo intuicyjne narzędzie, którego obsługę załapiesz w ciągu minuty.

Jego możliwości naprawdę robią różnicę w rozmiarach grafik, bez dużej straty na jakości :).

 

Pamiętaj, że kompresując pliki .png możesz napotkać problem z jakością przejść pomiędzy barwami. W przypadku plików .jpg nie powinieneś mieć tego problemu, ale jednocześnie jakość takiej grafiki jest niższa.

 

Kompresja w Photoshopie – bez konieczności korzystania z innych narzędzi

Nieumiejętne korzystanie z zapisywania grafik w Photoshopie może skończyć się ich gigantycznym rozmiarem, który szybko i boleśnie pogorszy szybkość wczytywania twojej strony.

Na szczęście istnieje jedna opcja, która jest zdecydowanie za rzadko używana przez grafików: “Eksportuj jako”.

Znajdziesz ją w oknie Plik – Eksportuj lub też wciskając kombinację klawiszy ALT+SHIFT+CTRL+W.
W starszej wersji Photoshopa znajdziesz ją pod nazwą “Zapisz dla Internetu”.

Szczególnie przydatna jest wtedy, gdy zapisujesz swoje grafiki w formacie .png i nie korzystasz ze zbyt wielu przejść kolorystycznych.
Tylko wtedy bowiem możesz użyć kompresji 8-bitowej, zaznaczając w oknie “Format” PNG 8.

Wiele odcieni jednego koloru może wyglądać bardzo źle w tak dużej kompresji, ale na potrzeby moje – screenshotów i grafik tytułowych artykułów – sprawdza się świetnie.

Oszczędność na rozmiarze jest naprawdę ogromna – obrazek, który w zwykłym PNG ma wagę 75KB, w trybie PNG 8 chudnie do zaledwie 27.5KB, czyli aż o 64%.

 

Krok 3 – Opóźnij ładowanie się obrazków

 

Tak zwany “lazy load” to świetne rozwiązanie, gdy na stronie chcesz pokazać dużo grafik, pojawiających się dopiero po scrollowaniu w dół.

Przykładowo, nie musisz wczytywać wszystkich obrazków od razu po załadowaniu się artykułu.

Wystarczy, że będą się wczytywać wtedy, gdy użytkownik strony scrolluje tekst.

Zarówno WordPress, jak i wiele sklepów internetowych ma możliwość wgrania wtyczki, która dodaje tę funkcjonalność.

 

Poniżej znajdziesz przykłady:

 

Skompresuj CSS i JavaScript

 

Zbyt duże i liczne pliki CSS oraz skrypty JavaScript mogą bardzo poważnie wydłużyć czas ładowania całej strony internetowej.

Szczególnie zaś tzw. pierwszego wyrenderowania treści, czyli sytuacji, gdy odbiorca nie widzi jeszcze nic, poza białym ekranem i czeka na załadowanie się pierwszych elementów strony.

Wyniki każdego testu prędkości strony dadzą ci ogólny ogląd na to, jakie konkretnie pliki warto zoptymalizować.

 

Optymalizacja konwersji

 

Jeśli jednak nie jesteś osobą mocno techniczną, to muszą wystarczyć ci gotowe wtyczki.
Na szczęście jest ich mnóstwo – zarówno na WordPressie, jak i w CMS do sklepów internetowych.

 

Wtyczki do WordPressa

 

W przypadku WordPressa polecam Ci wtyczkę W3 Total Cache, która okazała się być lepszą od innych, konkurencyjnych (testowałam WP Super Cache oraz LightSpeed Cache).

Również wtyczka Autoptimize zwiększa prędkość wczytywania witryny, ale niestety nie jest do końca kompatybilna z w/w pluginem (wyróżnione obrazki nie wczytują się).

 

Jak ustawić wtyczkę W3 Total Cache?

 

DISCLAIMER: W internecie znajdziesz mnóstwo poradników, jak ustawić tę wtyczkę. Możesz się posiłkować na przykład tym albo tym – próbowałam obu i u mnie najlepiej sprawdza się poniższa metoda. Testuj samodzielnie różne rozwiązania, bo każda strona i serwer jest inny :).

 

Po instalacji i aktywacji wtyczki, przejdź do zakładki General Settings, dostępnej z submenu w panelu WordPressa.

 

Optymalizacja konwersji

 

Twoim oczom ukaże się skomplikowanie wyglądający zestaw opcji, ale nie martw się – musisz po prostu zaznaczyć większość z nich i to wszystko :). Jeśli nie wiesz co robisz , nie zmieniaj opcji wtyczki, poza włączeniem niektórych funkcjonalności.

 

Od razu zaznaczam – nie zagłębiałam się w zawiłości tego pluginu – z pewnością ktoś mocno techniczny ustawiłby go inaczej i lepiej, ale ten poradnik przeznaczony jest dla osób takich jak ja, czyli na raczej średnim poziomie zaawansowania :).

 

Które więc opcje zaznaczyć?

  • Page Cashe – Enable
  • Minify – Enable oraz Auto (sprawdź, czy po włączeniu strona działa prawidłowo – jeśli nie, to wyłącz ją)
  • Object Cache – Enable
  • Browser Cache – Enable (to jest właśnie opcja kompresji GZIP, którą Google bardzo lubi i często się dopomina)

 

Następnie wejdź w zakładkę Minify i w sekcji HTML&XML zaznacz 3 pierwsze opcje.

 

Optymalizacja konwersji

 

 

Upewnij się też, że w sekcjach CSS i JS masz włączone funkcje minifikacji (czyli “ptaszek” przy Enable).

 

Jeżeli masz skonfigurowanego Cloudflare, to włącz jego rozszerzenie w zakładce Extenshions. Następnie kliknij „Activate” i wpisz mail używany na koncie Cloudflare oraz klucz API, który znajdziesz w swoim profilu konta Cloudflare.

 

I to wszystko!
Nie było takie trudne, prawda? 😉

 

Pomocy! Po instalacji wtyczki zniknęła cała szata graficzna strony! (CSS)

Funkcja Minifikacji czasem potrafi spowodować wysypanie się całego CSS twojej strony. Jeśli tak się stanie, to wyłącz ją w General Settings i w zamian skorzystaj z wtyczki Autoptimize albo minifikacji poprzez Cloudflare (dostępna w zakładce Speed). W moim przypadku niestety minifikacja Cloudflare nie działa, więc korzystam z Autoptimize.

 

 

Pomocy! Po instalacji wtyczki przestał wyświetlać się podgląd na Facebooku!

Bez paniki – na szczęście nie musisz odinstalowywać pluginu, aby zaradzić temu problemowi. Wystarczy, że wejdziesz w ustawienia Page cache i wpiszesz w okno „Rejected user agents” poniższe 3 linijki:

 

facebookexternalhit
FacebookExternalHit/1.1
FacebookExternalHit/1.0

Teraz wystarczy, że skorzystasz z tego narzędzia, wkleisz adres strony, którą chcesz udostępnić na FB i klikniesz „Scrape Again”.

 

 

Wtyczki do sklepów internetowych

Niestety, w przypadku wielu popularnych CMS sklepowych musisz wydać co najmniej kilkadziesiąt dolarów na narzędzie, które zoptymalizuje CSS, Javascript oraz nagłówki HTTP (kompresja gzip).

Poniżej znajdziesz przykładowe wtyczki:

 

Korzystaj z Cloudflare

Dzięki darmowemu pakietowi w Cloudflare możesz znacznie zwiększyć prędkość swojej strony.

Posiada on bowiem funkcję cachowania zasobów strony, czyli zapisywania na później elementów, które nie muszą być za każdym razem wczytywane.

Dodatkowo zabezpiecza twoją stronę przed atakami DDOS oraz pokaże zapisaną wersję strony, jeśli twój serwer przestanie działać.

Cloudflare posiada również mnóstwo innych przydatnych opcji, dostępnych głównie w pakiecie płatnym.

 

Konfiguracja Cloudflare jest dziecinnie prosta i nie powinna ci zająć więcej, niż 15 miut.

 

Oto krótka instrukcja krok po kroku:

  1. Załóż konto na Cloudflare klikając w ten link.
  2. Zaloguj się i kliknij w przycisk “Add a Site”.
  3. Wpisz adres swojej strony.
  4. Na ekranie pojawią się DNS zaciągnięte przez Cloudflare. Nie musisz nic z tym robić – przejdź dalej.
  5. Podmień DNS Cloudflare za DNS twojego hostingu. Pod tym linkiem znajdziesz poradnik od Zenbox, ale łatwo go zastosować w przypadku dowolnego operatora hostingu.
  6. To wszystko! Za kilka godzin powinieneś być już przepięty na Cloudflare.

 

 

PODSUMOWANIE ROZDZIAŁU

 

Przyspieszenie wczytywania strony może zająć wiele godzin i kosztować nieco nerwów, ale warto. Kompresując zdjęcia, minifikując CSS, HTML i JavaScript nie tylko zaskarbisz sobie sympatię wyszukiwarki Google, ale przede wszystkim poprawiasz wygodę użytkowania twojej strony.

W drugiej i ostatniej części tego cyklu dowiesz się, jak ulepszyć design strony mobilnej oraz poznasz AMP i PWA, które jeszcze bardziej przyspieszą twoją stronę!

 




Chcesz dowiedzieć się więcej o marketingu online?

Sprawdź moje inne artykuły:

 

  • Analityka:

Znaczniki UTM, czyli prosty sposób na sprawdzenie wejść na stronę. Duży Poradnik

Jak uniknąć błędów statystycznych w testach A/B?

Testy A/B – Poradnik dla Początkujących

Google Data Studio 2019 – Poradnik dla początkujących

Segmenty w Google Analytics – Kompleksowy Poradnik

Atrybucja w Google Analytics cz.1 – Czym są ścieżki wielokanałowe?

Atrybucja w Google Analytics cz.2 – Czym są modele atrybucji?

Analiza kohortowa w Google Analytics – prosta optymalizowacja działań sklepu online?

Darmowe narzędzie do SEO, czyli Search Console – Poradnik Użytkownika

 

  • E-biznes:

Serie artykułów:

Promocja Lokalnej Firmy w Internecie

Wielki Poradnik marketingu szeptanego

Kompendium Wiedzy o MLM

Marketing Mix – Poradnik

Content Marketing od A do Z

 

Artykuły:

Marketing Afiliacyjny – co to jest? Jak na nim zarobić? Kompleksowy Poradnik

Google AdSense – czy w 2019 roku można jeszcze na nim zarobić? Wielki Przewodnik

Content Marketing – dlaczego działa u innych a u ciebie nie? Korzyści i problemy

Marketing szeptany – cz I. Jak stworzyć viral? Wielki Poradnik

Marketing szeptany – cz. II. 5 ważnych składników. Wielki Poradnik

 


 



Bibliografia

Ten tekst powstał na podstawie mojej wiedzy i wielu rzetelnych źródeł, z których najważniejsze (i najciekawsze) to:

https://www.opensignal.com/reports/2018/02/state-of-ltehttps://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
https://developers.google.com/web/showcase/2016/aliexpress
https://matsuu.com/pl/progresywne-aplikacje-webowe-pwa-to-przyszlosc-mobilnego-handlu/
https://academy.exceedlms.com/student/catalog/list?category_ids=405-reklama-mobilna
https://onlinemediamasters.com/w3-total-cache-settings/
https://bloggingwizard.com/w3-total-cache-cloudflare/



Ocena artykułu:
[Głosów:5    Średnia:5/5]



Dodaj komentarz



me

O mnie

Cześć, jestem Natalia!

Od kilku lat zajmuję się szeroko rozumianym marketingiem. Chętnie poprowadzę dla Ciebie reklamy na Facebooku - specjalizuję się w branży e-commerce :).

Możemy też współpracować dużo szerzej - napisz, czego potrzebujesz a na pewno razem stworzymy coś fajnego!

Pytania?

Skontaktuj się ze mną

Kontakt

Masz pytania, propozycje, prośby? :)

Pisz do mnie na mój adres email lub wypełnij formularz kontaktowy obok.

chrzn-logo-poziome-2019-black-mobile

Copyright 2018 charzynska.pl ©
All Rights Reserved