Optymalizacja czasu ładowania Twojej witryny to korzystne dla wszystkich podejście, aby zadowolić odwiedzających Twoją witrynę i zwiększyć przychody generowane przez Twój biznes online.

Aby rzucić światło na wszystkie problemy, które spowalniają Twoją witrynę, zaprosiliśmy Stavrosa Papadakisa, aby przedstawił swój proces przyspieszania wolnych witryn.

Co spowalnia Twoją witrynę?

Zdecydowanie powinieneś sprawdzić mój poprzedni post z 16 sposobami na przyspieszenie witryny WordPress.

Chociaż ten post zawierał krótką listę kontrolną z najlepszymi poprawkami, aby zoptymalizować czas ładowania witryny WordPress, nadal istnieje wiele problemów, które mogą spowolnić Twoją witrynę.

Jeśli włączyłeś kompresję w swoim pliku htaccess, połączone pliki CSS, przeniosłeś pliki JavaScript do stopki, ale nadal nie jesteś zadowolony z czasu ładowania swojej witryny, sprawdź te 18 typowych problemów, które spowalniają Twoją witrynę.

1. Super-ciężkie strony internetowe

Nie ma wątpliwości, że strona 3 MB wysyłająca 180 żądań HTTP będzie wolniejsza niż strona 1 MB z 60 żądaniami HTTP.

Chcesz zoptymalizować czas ładowania swojej witryny?

Jednym z najlepszych sposobów na to jest zminimalizowanie rozmiaru każdej strony w witrynie.

Chociaż możesz optymalizować swoje obrazy, łączyć pliki CSS, minimalizować pliki JavaScript i wprowadzać wiele poprawek w zakresie optymalizacji front-endu, posiadanie witryny o wielkości 3 MB spowoduje spowolnienie witryny i niezadowolenie użytkowników.

21 MB to ogromne obciążenie dla Twojego serwera i przeglądarki.

Podczas projektowania lub przebudowy witryny należy dołożyć wszelkich starań, aby załadować tylko to, czego potrzebujesz i nic więcej.

Innymi słowy, zawsze powinieneś zadać sobie pytanie:

Czy naprawdę potrzebuję 8 dużych obrazów do pokazu slajdów na stronie głównej?

Czy muszę wyświetlać 20 pozycji portfolio na stronie głównej?

Czy powinienem pokazać 12 referencji zadowolonych użytkowników na stronie głównej, czy też 3 referencje również załatwią sprawę?

Wczytanie wszystkich tych danych sprawia, że ​​Twoja witryna wygląda ładnie, ale Twoja witryna będzie również wolniejsza ze względu na wszystkie te dane.

Czy chcesz mieć wolno ładującą się witrynę? Jeśli nie, zminimalizuj dane ładowane na stronę Twojej witryny.

2. Obrazy niezoptymalizowane

Czy wiesz, że 80% czasu potrzebnego na załadowanie strony internetowej jest kontrolowane przez strukturę front-endu?

To niesamowity fakt optymalizacji wydajności sieci.

80% czasu odpowiedzi użytkownika końcowego jest spędzane na froncie. Skup się na tym.

Możesz spróbować zoptymalizować swoją bazę danych lub kod PHP, ale jeśli zignorujesz ten ważny fakt, Twoja witryna będzie działać wolno.

Plik PNG o wielkości 460 KB może stać się 90 KB po zoptymalizowaniu.

Jeśli masz w swojej witrynie 10 niezoptymalizowanych obrazów, możesz dodać 2-3 MB dodatkowego wczytywania strony.

Jeśli nie zoptymalizujesz swoich obrazów, czas wczytywania Twojej witryny może zostać poważnie skrócony.

Dobrą wiadomością jest to, że większość obrazów JPG i PNG może stać się o 40% lub nawet 80% mniejsza bez utraty jakości obrazu poprzez ich optymalizację za pomocą Photoshopa, ImageOptim lub narzędzia innej firmy, takiego jak Kraken.

3. Nadmierne korzystanie z reklam

Google Adsense i inne podobne usługi mogą być dla Ciebie dodatkowym źródłem dochodu, ale mogą również spowolnić działanie Twojej witryny.

Witryna, która ładuje reklamy w nagłówku, na prawym pasku bocznym, w treści posta i na dole strony, korzystając z 2 lub 3 różnych usług reklamowych, będzie znacznie wolniejsza niż witryna z tylko 1 reklamą na prawym pasku bocznym lub w treści posta.

Reklamy są nie tylko irytujące dla większości użytkowników, ale także spowalniają Twoją witrynę.

Sprawdź poniższy zrzut ekranu ze strony internetowej klienta.

Czy naprawdę potrzebujesz tych wszystkich irytujących reklam?

Wierz lub nie, ale są w nim 4 różne reklamy, jedna reklama na górze zrzutu ekranu, film będący reklamą, reklama na prawym pasku bocznym i kolejna reklama na dole strony! Nie trzeba dodawać, że te reklamy są denerwujące dla większości użytkowników i spowalniają również czas ładowania witryny.

Podsumowując, reklamy należy zawsze używać z rozwagą. Dopóki reklama nie generuje pieniędzy, należy ją usunąć.

4. Nieprawidłowe wymiary twoich obrazów

Nie powinieneś skalować obrazów w HTML, powinieneś zmienić rozmiar dużego obrazu i zamiast tego użyć zmienionego obrazu.

Załóżmy na przykład, że masz obraz o wymiarach 1200px x 600px i chcesz użyć jego „mniejszej” wersji, np. 400px x 200px.

W takim przypadku nie używaj oryginalnego obrazu i zmniejsz go, zmieniając wymiary szerokości i wysokości w HTML.

Musisz utworzyć nowy obraz miniatury, zmieniając rozmiar oryginalnego obrazu z 1200px x 600px na 400px x 200px i użyć nowego obrazu, który jest mniejszy i ładuje się szybciej.

Natknąłem się na wiele witryn, które ładowały obraz Facebooka o wymiarach 256 x 256 o wielkości 150 KB zamiast ikony Facebooka o wymiarach 32 x 32 o wielkości 2 KB!

5. Bezsensowne przekierowania

Mam dla ciebie jeden szybki quiz.

Który z poniższych obrazów ładuje się szybciej, A, B, C czy D?

A. http://www.domena.com/image.jpg
B. http://domena.com/image.jpg
C. https://www.domena.com/image.jpg
D. https://domena.com/image.jpg

Czy wybrałeś A? Zło.
Czy wybrałeś B? Zło.
Czy wybrałeś C? Zło.
Czy wybrałeś D? Znowu źle!

Prawidłowa odpowiedź jest taka, że ​​to zależy od Twojej witryny!

Jeśli Twoja witryna to https://www.domain.com, wywołanie wersji obrazu innej niż HTTPS (http://www.domain.com/image.jpg) spowoduje dodatkowe przekierowanie z http: //www.domain.com/image.jpg do https://www.domain.com/image.jpg przez przeglądarkę w celu załadowania obrazu.

Jeśli używasz wersji bez www dla swojej witryny (http://domain.com/), powinieneś zawsze używać wersji bez www dla swoich obrazów (np. http://domain.com/image. jpg zamiast http://www.domena.com/image.jpg).

Przeglądarki nie lubią tego rodzaju bezsensownych przekierowań.

Bezsensowne przekierowania spowolnią działanie Twojej witryny

Używając względnych adresów URL dla swoich plików (np. <img src=”//eadn-wc04-1126528.nxedge.io/image.jpg” />), możesz łatwo pozbyć się tego powszechnego problemu, który spowalnia czas ładowania Twoja strona.

6. Nieprawidłowa lokalizacja serwera

Jeśli ruch w Twojej witrynie pochodzi głównie z USA lub Wielkiej Brytanii, Twoja witryna powinna być hostowana przez firmę hostingową znajdującą się odpowiednio w USA lub Wielkiej Brytanii.

Im bliżej serwera znajduje się odwiedzający Twoją witrynę, tym szybsza będzie Twoja witryna.

Nie trzeba dodawać, że jeśli otrzymujesz ruch z całego świata, gorąco polecam korzystanie z sieci dostarczania treści lub CloudFlare, aby obrazy, pliki CSS i JavaScript były ładowane z serwera znajdującego się bliżej lokalizacji każdego użytkownika.

7. Wspólne plany hostingowe Dodgy

Nikt nie chce płacić za hosting witryny, ale obsługa witryny WooCommerce z 40 aktywnymi wtyczkami lub witryny Magento z 5000 produktów za pośrednictwem wspólnego planu hostingowego, który kosztuje 5 USD miesięcznie, to przepis na katastrofę.

Zawsze powinieneś inwestować w dobrą firmę hostingową, aby uzyskać najlepszy czas ładowania swojej witryny.

Jeśli Twoja witryna jest niedostępna lub powolna, możesz zaoszczędzić kilka dolarów miesięcznie, korzystając ze współdzielonego planu hostingowego, ale stracisz znacznie więcej, tracąc klientów (użytkownik, który odwiedza wolno ładującą się witrynę, nie odwiedzi ponownie tej witryny).

Jeśli masz ciężką witrynę WordPress korzystającą z Woocommerce lub wielu aktywnych wtyczek, bardzo polecam WP Engine i FlyWheel (linki partnerskie).

Nie powinieneś spodziewać się 200 000 unikalnych wizyt miesięcznie w celu uaktualnienia do VPS, nigdy się to nie stanie, gdy hostujesz swoją witrynę na tym samym przeciążonym serwerze, na którym znajdują się setki witryn.

8. Nadmierne korzystanie ze skryptów mediów społecznościowych

Skrypty mediów społecznościowych (Facebook, Twitter, Pinterest itp.) dodają wyszukiwanie DNS, zestaw plików JavaScript i kilka obrazów za każdym razem, gdy są dodawane na stronie.

Chociaż wiele z tych opcji udostępniania powinno być dostępnych na końcu twoich postów, aby użytkownicy mogli łatwo udostępniać twoje posty, nie ma sensu ładować wszystkich tych opcji udostępniania na każdej stronie.

Jaki jest sens ładowania tych ikon mediów społecznościowych na każdej stronie, np. na stronie kontaktowej lub na stronach kategorii?

Wyświetlanie 5 różnych liczników mediów społecznościowych dla każdego posta na stronie głównej lub stronach kategorii znacznie obciąża Twoją witrynę. Jak ważne jest pokazywanie liczby na tych stronach? Potrzebujesz również pokazywać Facebooka, Twittera, Pinteresta, Google Plus i LinkedIn?

Zbyt wiele skryptów mediów społecznościowych może obniżyć wydajność Twojej witryny

Czy najlepiej byłoby po prostu pokazać 1 lub 2, które dobrze Ci odpowiadają? Jeśli nie otrzymujesz wielu akcji, czy jest sens pokazywać je w ogóle?

Zawsze powinieneś pomyśleć dwa razy przed dodaniem jakichkolwiek opcji mediów społecznościowych na stronie swojej witryny.

9. Nieprawidłowy typ pliku dla twoich obrazów

Jeśli potrzebujesz przezroczystości dla swoich obrazów, nie możesz uniknąć pliku typu PNG, ALE jeśli nie potrzebujesz przezroczystości, nigdy nie powinieneś zapisywać swoich obrazów jako plików PNG, ponieważ są one znacznie większe i znacznie wolniejsze niż obrazy JPG.

Zminimalizuj lub nawet wyeliminuj ciężkie pliki GIF, ponieważ mogą one drastycznie spowolnić czas ładowania witryny.

Powinieneś także unikać zapisywania obrazów z tekstem jako treści, ponieważ edycja tekstu na obrazach może być czasochłonna, a generowane obrazy są również znacznie cięższe.

Użyj JPG jako domyślnego. Jest to najmniejszy i najszybciej ładujący się typ pliku dla większości plików.

10. Niekorzystanie z dedykowanych usług

Istnieje wiele popularnych usług, które mogą zmniejszyć obciążenie Twojego serwera.

Czy masz na swojej stronie filmy? Powinieneś korzystać z Youtube, Wistii lub Vimeo.

Czy masz dużo komentarzy na swojej stronie? Powinieneś użyć Disqus, IntenseDebate lub
Rozprawiać.

Używasz jQuery, jQuery UI, AngularJS lub Mootools? Powinieneś je załadować za pośrednictwem bibliotek hostowanych przez Google.

Korzystasz z WordPressa i wyświetlasz popularne posty? Powinieneś użyć Jetpacka, który robi to automatycznie.

Możesz również użyć sieci dostarczania treści (CDN), aby wyświetlać swoje obrazy z niej zamiast z witryny.

Jeśli Twoja witryna generuje znaczny ruch i ładujesz wiele obrazów i filmów, czas ładowania witryny można drastycznie zoptymalizować, równoważąc obciążenie witryny za pomocą wyżej wymienionych sztuczek.

11. Błędy 404

Jeśli spróbujesz załadować plik, który nie istnieje lub przeglądarka nie może go znaleźć, na czas ładowania witryny będzie miał wpływ ten błąd HTTP 404.

Zawsze powinieneś sprawdzać błędy 404 podczas renderowania swoich stron, aby uzyskać jak najszybszy czas ładowania. Możesz to zrobić, sprawdzając wygenerowany wodospad swojej witryny za pomocą Webpagetest i GTMetrix lub korzystając z karty sieciowej przeglądarek, takich jak Chrome i Firefox.

Jeśli Webpagetest pokazuje jakiekolwiek czerwone linie na wodospadzie, powinieneś natychmiast rozwiązać problemy i naprawić te błędy 404.

Błędy 404 mogą zrujnować czas ładowania

Tego rodzaju błędy mogą naprawdę zrujnować czas ładowania Twojej witryny, zwłaszcza jeśli obsługujesz ją za pośrednictwem wspólnego planu hostingowego.

12. Nie buforowanie witryny

Każdy system zarządzania treścią (WordPress, Joomla, Drupal, Magento) wykorzystuje bazę danych w celu zapisania na niej dużego zestawu danych.

Chociaż jest to świetne do zarządzania witryną, oznacza to również, że zwiększa obciążenie serwera, aby generować każdą stronę za każdym razem, gdy jest to wymagane.

Możesz rozwiązać ten problem, używając pamięci podręcznej.

Jeśli korzystasz z WordPressa, możesz użyć wtyczki buforującej, takiej jak
W3 Total Cache lub WP Super Cache lub ZenCache lub użyj firmy hostingowej serwera zarządzanego, takiej jak WP Engine i FlyWheel (linki partnerskie), które zajmują się buforowaniem.

Nie trzeba dodawać, że Joomla, Drupal i Magento oferują również opcje buforowania, które mogą bardzo pomóc, zapewniając buforowane wersje Twojej witryny dla kolejnych odwiedzających witrynę zamiast ciągłego generowania każdej strony.

Buforowanie stron może drastycznie przyspieszyć działanie witryny

Buforowanie to oczywistość dla każdej witryny opartej na bazie danych. Nawet 10-minutowy okres buforowania może drastycznie zoptymalizować czas ładowania Twojej witryny.

13. Setki żądań HTTP

Każdy plik CSS, plik Javascript lub obraz załadowany do Twojej witryny jest żądaniem HTTP. Im więcej żądań HTTP ma Twoja witryna, tym wolniej będzie ona działać.

Chociaż możesz próbować łączyć pliki CSS i Javascript, umieszczać pliki CSS w linii i używać sprite'ów CSS do małych obrazów, jeśli zaimplementujesz te poprawki i nadal masz 150 żądań HTTP, powinieneś oczywiście spróbować uporządkować swoją witrynę, usuwając zawartość z to.

246 żądań HTTP spowolni Twoją witrynę, bez względu na to, jak jest zoptymalizowana

Wiem, że wyświetlanie dużej ilości treści na każdej stronie witryny jest kuszące, ale pamiętaj, że „mniej znaczy więcej”, więc staraj się nie ładować tylu obrazów lub skryptów.

14. Zła konfiguracja serwera

Jeśli korzystasz ze współdzielonego planu hostingowego, dość często robią, co w ich mocy, aby obsługiwać jak najwięcej witryn na serwer.

Zwykle robią to, wyłączając między innymi funkcje, takie jak kompresja i KeepAlive.

Włączenie HTTP Keep-Alive umożliwia temu samemu połączeniu TCP wysyłanie i odbieranie wielu żądań HTTP, zmniejszając w ten sposób opóźnienie dla kolejnych żądań.

Kompresja zmniejsza rozmiar plików wysyłanych z Twojego serwera, aby zwiększyć szybkość, z jaką są przesyłane do przeglądarki.

Jeśli korzystasz ze współdzielonego planu hostingowego, a Twoja firma hostingowa wyłączyła kompresję i Keep-Alive, powinieneś jak najszybciej zmienić firmę hostingową.

Keep-Alive i kompresja powinny być włączone na twoim serwerze

15. Import CSS

Import CSS to dobry sposób na importowanie plików CSS na górze nowego pliku CSS, np. importowanie pliku resetowania CSS, ale dodaje również dodatkowe opóźnienia podczas ładowania strony internetowej.

W miarę możliwości należy unikać importowania CSS.

16. Ładowanie niepotrzebnych plików na każdej stronie

Pliki CSS i JavaScript należy ładować tylko wtedy, gdy są one wymagane na stronie Twojej witryny.

Na przykład, jeśli określony plik JavaScript jest potrzebny tylko na jednej stronie, w takim przypadku należy załadować ten plik JavaScript tylko pod tym adresem URL, zamiast ładować go na każdej stronie witryny.

Jeśli nie zastosujesz się do tej prostej zasady, możesz w końcu załadować 30 plików CSS i 40 plików JavaScript na stronie, która potrzebuje tylko 3 plików CSS i 4 plików JavaScript, więc wykonujesz 63 dodatkowe żądania HTTP i dodajesz wiele setek kilobajtów na stronie rozmiar.

17. Ładowanie ciężkich plików w tle

Wiele witryn ładowało duże obrazy tła, które są ledwo widoczne.

Czy naprawdę potrzebujesz obrazu o pojemności 500 KB załadowanego w tle? Powinieneś spróbować użyć CSS3, gdy tylko jest to możliwe, lub zamiast tego użyć koloru tła.

Złą praktyką jest również ładowanie plików dźwiękowych w tle podczas ładowania witryny.

Większość z tych technik spowalnia Twoją witrynę i należy ich unikać.

18. Nie korzystanie z eksperta

Moim celem było dostarczenie wystarczającej ilości informacji, aby zacząć naprawiać wolno ładujące się strony w Twojej witrynie.

Optymalizacja czasu ładowania Twojej witryny to sytuacja korzystna dla Ciebie i każdego, kto odwiedza Twoją witrynę. Szybsze witryny oznaczają wyższe konwersje, lepsze rankingi w wyszukiwarkach i przyjemniejsze wrażenia użytkownika.

Najlepiej zatrudnić eksperta, jeśli chcesz, aby praca została dobrze wykonana.

Amatorzy mogą postępować zgodnie z najlepszymi praktykami, ale nie wiedzą, od czego zacząć.

Ekspert naprawi rzeczywiste problemy, które spowalniają Twoją witrynę.

Zawsze, gdy amator nie zna prawdziwych problemów Twojej strony internetowej, zarekomenduje bezcelowe tymczasowe rozwiązanie, takie jak przenoszenie hostów, zmiana motywu, instalacja innej wtyczki buforującej, a nawet zmiana CMS.

Wielu moich klientów zmarnowało swój czas i pieniądze na amatorów, którzy właśnie zainstalowali wtyczkę buforującą, nie naprawiając faktycznych problemów swojej witryny.

Należy zawsze pamiętać, że każda strona internetowa jest wyjątkowa, dlatego należy zastosować różne poprawki optymalizacji szybkości dla każdej witryny.

Podsumowując, optymalizacja czasu ładowania witryny powinna być zawsze wykonywana przez eksperta, który z chirurgiczną precyzją wykona poprawki optymalizacji szybkości.

Wyobraź sobie, jak szczęśliwi będą Twoi użytkownicy, widząc superszybkie czasy ładowania!

Jeśli chcesz mnie zatrudnić, chętnie Ci pomogę. Zobacz moje portfolio i skontaktuj się ze mną na AwesomeWeb już dziś!