Optymalizacja szybkości strony: jak poprawić czas ładowania

Czasy ładowania strony są ważne z jednego prostego powodu: mają duży wpływ na ogólne wrażenia użytkowników. Dlatego jednym z najważniejszych czynników wpływających na poprawę wydajności witryny jest optymalizacja szybkości strony.

W tym obszernym przewodniku dowiesz się, jak mierzyć szybkość strony (za pomocą bezpłatnych i płatnych narzędzi), co może spowolnić działanie użytkowników, oraz odkryjesz 26 sposobów na optymalizację czasu ładowania. Zaczynajmy.

Zawartość

1. Wszystko, co musisz wiedzieć o szybkości strony
2. Jakich narzędzi należy użyć do pomiaru szybkości strony?
3. Ile czasu powinno potrwać ładowanie strony internetowej?
4. Metody optymalizacji szybkości strony
5. Środki OnPage dla szybkiej strony internetowej
6. Zautomatyzowana optymalizacja szybkości strony

Wszystko, co musisz wiedzieć o szybkości strony

Dlaczego czas ładowania strony jest ważny?

Istnieje wiele powodów, dla których szybki czas ładowania jest bardzo ważny:

1. Pozytywne wrażenia użytkowników: Google uważa, że ​​dłuższe czasy ładowania mają poważny wpływ na współczynniki odrzuceń. W rzeczywistości wydłużenie czasu wczytywania z 1 do 6 sekund może zwiększyć współczynnik odrzuceń o 106%, dlatego jest to teraz jeden z kluczowych czynników sieciowych pod względem wydajności (patrz poniżej).

2. Czynnik rankingu SEO: w przypadku Google i innych wyszukiwarek pozytywne wrażenia użytkownika są ważnym czynnikiem określającym jakość witryny. Właśnie dlatego Google używa teraz szybkości strony jako jednego z kluczowych wskaźników internetowych. Dlatego im szybciej ładuje się Twoja witryna, tym większe są Twoje szanse na wysoką pozycję w rankingu.

3. Optymalizacja współczynnika konwersji: według tego badania opóźnienie o jedną sekundę w czasie ładowania może zmniejszyć liczbę konwersji nawet o siedem procent. Na początku może to nie wydawać się tak znaczące, ale jeśli Twój sklep internetowy generuje dzienny obrót w wysokości 1000 euro, opóźnienie w czasie ładowania o jedną sekundę może spowodować utratę 70 euro dziennie, około 2100 miesięcznie. Jeśli obliczysz to w ujęciu rocznym, niska prędkość strony to prawdziwy zabójca obrotów.

4. Indeksowanie: witryny, które ładują się powoli, są indeksowane wolniej i nie są indeksowane tak intensywnie, ponieważ Googlebot ma ograniczony budżet na indeksowanie. Krótszy czas ładowania może zatem oznaczać częstsze indeksowanie witryny, co oznacza, że ​​treść w indeksie Google będzie również bardziej trafna.

Jak mierzy się szybkość strony?

Ogólnie rzecz biorąc, czas ładowania strony internetowej to czas w sekundach od wywołania strony do jej pełnego wyświetlenia w przeglądarce. Terminy „czas ładowania” i „szybkość strony” są używane zamiennie. Jeśli przeszukujesz sieć w poszukiwaniu tematu, znajdziesz oba warianty. Czas ładowania strony internetowej można również podzielić na 4 różne pomiary:

• Czas do pierwszego bajtu (TTFB) : Czas między wywołaniem witryny internetowej a pierwszym bajtem załadowanym przez serwer sieciowy.
• First Contentful Paint (FCP) : czas, w którym wyświetlany element jest wyświetlany w przeglądarce po raz pierwszy.
• Pierwsza znacząca farba (FMP) : Czas, w którym użytkownik ma wrażenie, że witryna jest załadowana.
• Time to Interactive (TTI) : czas, w którym witryna została wyrenderowana i jest gotowa do wprowadzenia przez użytkownika.

W tym artykule dowiesz się dokładnie, jak mierzona jest szybkość strony.

Jakich narzędzi powinieneś użyć do pomiaru szybkości strony

Dostępnych jest wiele narzędzi do analizy i optymalizacji czasów ładowania. Istnieją również inne sposoby określenia czasu ładowania witryny, na przykład analiza pliku dziennika.

Statystyki PageSpeed

To narzędzie Google do mierzenia czasów ładowania jest stale aktualizowane i ulepszane. Najnowsza wersja Pagespeed Insights bazuje na Lighthouse, narzędziu do optymalizacji stron internetowych, które jest również dostępne jako rozszerzenie w przeglądarce Chrome. Wykorzystuje dane z CrUX, raportu Chrome User Experience Report.

Po wprowadzeniu domeny narzędzie oblicza wynik szybkości z zakresu od 0 do 100. PageSpeed ​​Insights rozróżnia wynik dla urządzeń mobilnych i wynik dla komputerów stacjonarnych. Wynik mobilny jest używany jako standard i często jest bardzo niski, ponieważ Google chciałby zmotywować operatorów witryn do optymalizacji swoich witryn specjalnie pod kątem wersji mobilnych. Poniżej wyniku szybkości wyświetlane są poszczególne pomiary. Ich kodowanie kolorami można wykorzystać do określenia powagi problemów.

Rysunek 1: Strona startowa Google PageSpeed ​​Insights

Google Analytics

Jeśli analizujesz swoją witrynę za pomocą Google Analytics, w obszarze „Wydajność” znajdziesz statystyki dotyczące czasu ładowania. Kliknij „szybkość witryny”. Jeśli masz zainstalowane śledzenie e-commerce, możesz bezpośrednio ocenić, jak szybkość ładowania wpływa na konwersje.

Konsola wyszukiwania Google

W Google Search Console czasy ładowania znajdziesz w punkcie menu „Crawling”. Tam zobaczysz, ile kilobajtów jest pobieranych dziennie i ile czasu potrzebuje Googlebot na pobranie jednej z Twoich witryn w milisekundach. Pomaga to w łatwym wykrywaniu problemów z czasem ładowania witryny.

Ryte

Na platformie Ryte w sekcji Wydajność sieci , zobaczysz przegląd wyników Twoich stron w raporcie „Czasy wczytywania”. Poniżej tego przeglądu znajdują się również szczegółowe informacje na temat punktacji poszczególnych stron za „Czas połączenia”, „Czas do pierwszego bajtu” i „Czas ładowania”.

Istnieje również osobny raport „Podstawowe wskaźniki internetowe”, który pokazuje, jak Twoja witryna ocenia kluczowe wskaźniki Google, w tym szybkość ładowania (mierzoną za pomocą „Największego wymalowania treści”), a także interaktywność („Opóźnienie pierwszego wejścia”) i stabilność wizualna („Cumulatywne przesunięcie układu”).

Yslow

Yslow został opracowany przez Yahoo!. Możesz go używać jako bookmarkletu, narzędzia do centrum dowodzenia lub jako rozszerzenia przeglądarki. Zasady dotyczące szybkości są oparte na specyfikacjach Yahoo!. Narzędzie jest również interesujące dla zaawansowanych użytkowników ze względu na funkcje wiersza poleceń. Pamiętaj, że wtyczka Firebug musi być również zainstalowana, aby móc korzystać z wtyczki za pośrednictwem przeglądarki Firefox.

Rysunek 2: Yslow

Pingdom

Aby korzystać z Pingdom.com, musisz się zarejestrować. Pokazuje czasy ładowania za pomocą wykresów i statystyk, co upraszcza ocenę. Możesz łatwo zobaczyć, które elementy.

Rysunek 3: Pingdom

WebPageTest.org

Dzięki WebPageTest.org możesz symulować czas ładowania w różnych przeglądarkach. Możesz także testować z różnych lokalizacji, aby sprawdzić, jak szybko witryna ładuje się dla odwiedzających z innych krajów.

Który ładuje się szybciej

Funkcja Która ładuje się szybciej porównuje czas ładowania dwóch witryn ze sobą. W podobny sposób działa Website Speed ​​Ranker, za pomocą którego można jednocześnie porównywać do czterech witryn.

Jak długo powinno trwać załadowanie strony internetowej?

Ogólnie rzecz biorąc, witryna powinna załadować się w mniej niż dwie sekundy, aby zapewnić zadowalające wrażenia użytkownika. Im krótszy czas ładowania, tym lepiej. Idealnie ładowanie powinno zająć mniej niż jedną sekundę. Szybkość ładowania strony internetowej zależy od wielu czynników. Niektóre możesz poprawić dzięki optymalizacji na stronie; inne, na które nie masz wpływu.

Nie masz wpływu na te czynniki:

• Przepustowość: czas ładowania witryny zależy od dostępnej przepustowości Internetu. Dzięki połączeniu 3G i smartfonowi strona będzie ładować się wolniej niż przy szybkim połączeniu DSL.
• Pamięć podręczna przeglądarki: jeśli użytkownik korzysta z przeglądarki, której pamięć podręczna nie była opróżniana od dłuższego czasu, ładowanie witryny może być znacznie wolniejsze, ponieważ pamięć komputera nie może przetworzyć dużej ilości danych.
• Moc obliczeniowa klienta: na starszych komputerach stacjonarnych i smartfonach mogą wystąpić opóźnienia w ładowaniu strony, ponieważ struktura DOM i wykonywanie skryptów są spowalniane przez niewystarczającą ilość pamięci i moc obliczeniową.

Możesz wpłynąć na te czynniki:

• Rozmiary plików: Rozmiar plików określa, jak szybko można załadować witrynę. Obejmuje to nie tylko sam kod HTML, ale także arkusze stylów, pliki skryptów i obrazy. Im mniejsze pliki, tym szybciej strona może się wczytać.
• Połączenia z serwerem: gdy wywoływana jest strona internetowa, serwer sieciowy przetwarza żądanie. Może przetwarzać szybciej, jeśli ma mniej danych do przetworzenia. W przypadku wielu żądań w tym samym czasie przy dużym ruchu na stronie, pamięć główna i pojemność procesora mogą być nadmiernie wykorzystane i przez to stać się wąskim gardłem dla czasu ładowania. W takim przypadku należy zwiększyć moce.

24 sposoby na optymalizację szybkości strony

OK, teraz, gdy już wiesz, dlaczego czasy ładowania są ważne i jak je mierzyć w Twojej witrynie, przyjrzyjmy się różnym metodom optymalizacji szybkości strony:

1. Utwórz szybkie czasy połączenia

Połączenie między serwerem sieciowym a użytkownikiem musi zostać ustanowione przed przetworzeniem żądania strony internetowej przez serwer sieciowy. Czas poświęcony na to nazywany jest czasem połączenia, opóźnieniem lub pingiem. Możesz to zmierzyć na platformie Ryte, w sekcji Wydajność sieci . Idealnie opóźnienie wynosi mniej niż 100 milisekund. Jeśli konfiguracja połączenia wymaga znacznie więcej czasu, można podjąć działania optymalizacyjne.

2. Użyj sieci CDN, aby uzyskać globalny zasięg

Jeśli ważne jest, aby Twoja firma internetowa była obecna na całym świecie, szybko zauważysz, że czas połączenia może się znacznie różnić w zależności od miejsca, z którego uzyskuje się dostęp do witryny. Wynika to z faktu, że węzły rosną geograficznie aż do centrum danych, w którym znajduje się serwer WWW.

Pomocna może być tutaj sieć dostarczania treści, w skrócie CDN. CDN zapewnia, że ​​Twoja strona internetowa jest buforowana w globalnej sieci serwerów, dzięki czemu pomiędzy komputerem użytkownika a następnym serwerem w CDN zawsze znajduje się niewielka liczba węzłów. Usługa ta wiąże się z wysokimi kosztami, które niekoniecznie opłacają się operatorom strony internetowej, która zajmuje się głównie obszarem niemieckojęzycznym.

Aby korzystać z CDN, musisz zarejestrować się u dostawcy. Cloudflare ma kilka darmowych planów, ale powinieneś dokładnie sprawdzić, na jakich warunkach oferta jest bezpłatna. Dostawcy płatni zazwyczaj pobierają opłatę za ilość danych, które są używane co miesiąc w sieci.

Znani dostawcy to:

• Amazon Cloudfront
• Cloudflare
• Ścieżka stosu
• wao.io

3. Zoptymalizuj swój serwer internetowy pod kątem szybkości strony

Po nawiązaniu połączenia z serwerem WWW żądanie to przetwarza i udostępnia żądane pliki. Wywoływane są również skrypty po stronie serwera, które na przykład odczytują zawartość z baz danych i udostępniają ją do wydruku.

4. Wykrywaj wąskie gardła w infrastrukturze

Gdy strona internetowa ładuje się powoli, może to być spowodowane przeciążeniem serwera internetowego i powiązanej z nim infrastruktury. Może to mieć kilka przyczyn, na przykład błąd hosta lub fakt, że serwer sieciowy musi odpowiadać na zbyt wiele żądań naraz.

Ważne jest, aby rozpoznać te wąskie gardła, aby móc szybko zareagować. Wiele rozwiązań hostingowych oferuje metryki do monitorowania wykorzystania serwera. Z przedstawionych powyżej pomiarów pomocny może być również „Time to First Byte”, który można zmierzyć za pomocą platformy Ryte w ramach Web Performance . Jeśli znacznie wzrośnie, może wystąpić problem z serwerem WWW.

5. Użyj buforowania po stronie serwera

Treść, która jest często wymagana, na przykład zapytania do bazy danych, może być buforowana na serwerze, dzięki czemu żądania nie muszą być wykonywane raz po raz. Jest to szczególnie ważne dla użytkowników, którzy chcą przeczytać kilka artykułów lub obejrzeć produkty – np. wywołać kilka stron w swojej sesji. Dzięki temu można skrócić czas ładowania po wywołaniu pierwszej strony.

W ustawieniach oprogramowania serwera WWW – najczęściej używane są Apache HTTP Server i Nginx – można aktywować i skonfigurować buforowanie po stronie serwera. Jeśli nie masz niezbędnej wiedzy, możesz zapytać swojego dostawcę usług hostingowych lub zlecić wykonanie buforowania i innych środków PageSpeed ​​przez automatyczną usługę w chmurze (patrz poniżej).

6. Użyj pamięci podręcznej przeglądarki

W przypadku buforowania przeglądarki elementy witryny są buforowane przez przeglądarkę internetową, a nie przez buforowanie serwera WWW. Dlatego nie wszystkie elementy muszą być ładowane od nowa podczas uzyskiwania dostępu do nowego adresu URL w Twojej witrynie. Zwiększa to prędkość ładowania.
Buforowanie przeglądarki może być aktywowane przez wiele CMS za pomocą wtyczek lub rozszerzeń.

Możliwe wtyczki do buforowania przeglądarki w WordPressie to na przykład:

• Rakieta WP
• W3 Całkowita pamięć podręczna
• Najszybsza pamięć podręczna WP

Ręczna aktywacja pamięci podręcznej przeglądarki następuje poprzez dostosowanie pliku .htaccess. W ten sposób można włączyć dwa moduły serwera Apache: mod_headers i mod_expires.

Jeśli używasz mod_headers, .htaccess musi być uzupełniony następującym kodem (Źródło – GitHub):

<FilesMatch ".(css|js|gif|pdf|jpg|jpeg|png)$">
Zestaw nagłówków Cache-Control "max-age=2592000, public"
</FilesMatch>

Zaokrąglone nawiasy odnoszą się do formatu pliku, który ma być umieszczony w pamięci podręcznej. Jednocześnie czas trwania skrytki należy podawać z „wikiem”. Jednostka jest w sekundach. W tym przykładzie pamięć podręczna jest zapisywana przez przeglądarkę przez 30 dni.

Jeśli chcesz używać mod_expires do buforowania przeglądarki, plik .htaccess jest rozwijany o następujące wiersze:

## Wygaśnięcie pamięci podręcznej ##
<IfModule mod_expires.c>
WygasaAktywny wł.
ExpiresByType image/jpg „dostęp plus 1 rok”
ExpiresByType image/jpeg „dostęp plus 1 rok”
ExpiresByType image/gif „dostęp plus 1 rok”
ExpiresByType image/png „dostęp plus 1 rok”
ExpiresByType text/css „dostęp plus 1 miesiąc”
ExpiresByType text/html "dostęp plus 1 miesiąc"
ExpiresByType application/pdf "dostęp plus 1 miesiąc"
ExpiresByType text/x-javascript „dostęp plus 1 miesiąc”
Aplikacja ExpiresByType/x-shockwave-flash „dostęp plus 1 miesiąc”
ExpiresByType obraz/x-icon „dostęp plus 1 rok”
ExpiresDefault „dostęp plus 1 miesiąc”
</IfModule>
## Wygaśnięcie pamięci podręcznej

Ta metoda pozwala na oddzielne określenie unikalnego przedziału czasowego dla każdego typu pliku.

7. Użyj kompresji GZip

Pliki mogą być przetwarzane i wysyłane najszybciej, jeśli są jak najmniejsze. Dotyczy to również kodu, który ma wyświetlić stronę w przeglądarce użytkownika. Podobnie jak plik zip, kod ten można skompresować, a tym samym zmniejszyć jego rozmiar. Skompresowane dane są następnie rozpakowywane w przeglądarce.

Ta metoda była przez długi czas postrzegana ze sceptycyzmem, ponieważ potrzebna jest moc obliczeniowa serwera WWW, a to też wymaga czasu. Jednak korzyści przeważają nad wadami, dlatego zdecydowanie powinieneś z niego skorzystać. Przeczytaj nasz kompletny przewodnik dotyczący kompresji kodu witryny.

Jak mogę skompresować pliki za pomocą gzip?

Serwer Apache jest najczęściej używany dla stron internetowych, więc poniższy przykład dotyczy Apache.

Używane są dwa różne moduły: mod_deflate i mod_gzip.

1. Moduł mod_deflate jest zwykle preinstalowany. Za pomocą następującego polecenia konsoli możesz sprawdzić, czy już istnieje:

sudo apachectl -t -D DUMP_MODULES | grep deflate

Jeśli otrzymasz wyjście „deflate_module (shared)”, oznacza to, że mod_deflate jest już zainstalowany. W przeciwnym razie skontaktuj się z gospodarzem.

2. Teraz otwórz „httpd.conf”, plik konfiguracyjny Apache. Zwykle można go znaleźć w folderze „/etc/httpd/conf/”. Tam dodajesz następującą linię:

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
aplikacja/javascript

Oznacza to, że tekst oraz kod HTML, CSS i JavaScript są skompresowane za pomocą GZip. Zapisz plik i uruchom ponownie serwer WWW Apache. Od teraz dane będą kompresowane przez Apache.

8. Włącz HTTP/2

Domyślnie wszystkie pliki stron internetowych (np. obrazy i skrypty) są ładowane przy użyciu protokołu HTTP/1.1. Pliki te są pobierane jeden po drugim przez osobne połączenie.

Spowalnia to proces ładowania. Dzięki certyfikatowi SSL serwer WWW można przełączyć na protokół HTTP/2. Za pośrednictwem protokołu HTTP/2 wszystkie pliki są pobierane za pomocą jednego połączenia. Są również traktowane priorytetowo. Wszystkie popularne przeglądarki obsługują ten protokół, więc możesz z nim pracować bez wahania.

Dowiedz się więcej z tego artykułu: Jak poprawić szybkość ładowania strony internetowej za pomocą protokołu HTTP/2: przewodnik dla początkujących.

9. Kompresuj obrazy

Proporcjonalnie największą część wolumenu pobierania strony internetowej stanowią obrazy. Tym bardziej dotyczy to sklepów internetowych z wieloma produktami i witrynami portfolio, zwłaszcza fotografów.

Jeśli uda Ci się znacznie zmniejszyć rozmiar plików obrazów, możesz znacznie zwiększyć szybkość strony. Napisaliśmy już obszerny artykuł na temat kompresji obrazu na Ryte. Oto podsumowanie.

10. Zoptymalizuj wszystkie obrazy

Obrazy są ważne, aby witryna była przejrzysta i atrakcyjna dla użytkowników. Ale obrazy mogą również znacznie zwiększyć rozmiar pliku witryny i spowolnić czas ładowania. Dlatego należy używać tylko obrazów zoptymalizowanych do użytku w Internecie.

Ogólnie zdjęcia i grafiki wysokiej jakości powinny być traktowane jako pliki JPEG, a mniejsze grafiki i grafiki z niewielką liczbą kolorów lub przezroczystości powinny być traktowane jako pliki PNG.

Dalsze kroki:

• Kompresuj swoje obrazy przed umieszczeniem ich w witrynie za pomocą programu do przetwarzania obrazu, takiego jak Gimp lub Adobe Photoshop. Oba programy oferują początkującym funkcję „zapisz dla sieci”. W ten sposób rozmiar pliku zostanie automatycznie zoptymalizowany. Za pomocą narzędzi takich jak kraken.io lub PNGGauntlet możesz zmniejszyć rozmiar pliku, usuwając dodatkowe informacje.
• Odpowiedni rozmiar obrazu jest podany w kodzie źródłowym: Jeśli przeglądarka sama musi obliczyć rozmiar grafiki, czas ładowania może zostać zwiększony. Podany rozmiar powinien odpowiadać oryginalnemu rozmiarowi obrazu przechowywanego na serwerze. Możesz również zdefiniować informacje o rozmiarze obrazu za pomocą CSS.
• Usuń metatagi i dane EXIF: Jeśli na przykład używasz zdjęć z własnego aparatu lub smartfona, zawierają one wiele dodatkowych informacji, takich jak lokalizacja, używany aparat i inne dane. Za pomocą narzędzia takiego jak tinypng możesz je usunąć i zaoszczędzić miejsce na dysku.

11. Użyj formatu obrazu WebP

Dzięki WebP firma Google stworzyła nowy format obrazu, który może kompresować obrazy zarówno bezstratnie (podobnie jak PNG), jak i stratnie (podobnie do JPEG). Jest jeszcze wydajniejszy niż stare formaty.

Nie wszystkie przeglądarki obsługują jeszcze WebP. Dlatego warto przechowywać alternatywy dla plików WebP w kodzie źródłowym i zainstalować przełącznik, na przykład:

<obraz>
<source type="image/webp">
<source type="image/jpeg">
<img src="img/testbild2.jpg" alt="Obszar zastępczy">
</picture>

12. Rozróżnij witryny na komputery i urządzenia mobilne

W przyszłości ponad połowa wszystkich użytkowników będzie uzyskiwać dostęp do stron internetowych za pomocą urządzenia mobilnego zamiast komputera stacjonarnego. Wymagania dotyczące obrazów są bardzo różne na obu nośnikach wyjściowych. Na komputerze stacjonarnym jest zwykle dobre połączenie z Internetem, a na dużych monitorach HD użytkownik oczekuje obrazów o odpowiednio wysokiej rozdzielczości w najlepszej jakości.

Z drugiej strony na mobilnych urządzeniach końcowych strony internetowe są często odwiedzane w ruchu, a zatem nie mają najwyższej przepustowości. Mały wyświetlacz oznacza również, że wymagania jakościowe są niższe.

Ponadto, ze względu na format ekranu, obrazy wyświetlane są w innej rozdzielczości niż na pulpicie. Dlatego warto rozróżnić media wyjściowe i stworzyć dwa warianty obrazu.

Podobnie jak w poprzednim przykładzie dla WebP, przełączniki mogą być również przechowywane w kodzie witryny w tym celu. Na przykład za pomocą CSS można sprawdzić rozdzielczość ekranu, a tym samym wyświetlacz można dostosować do medium wyjściowego.

13. Ustaw leniwe ładowanie

W przeglądach produktów i galeriach zdjęć wyświetlanych jest wiele zdjęć na raz – to znacznie spowalnia czas ładowania. Jest to szczególnie problem dla operatorów sklepów i fotografów, a szczególnie dokuczliwy dla sklepów internetowych, ponieważ często jest to strona główna lub pierwsza strona kategorii produktów.

Jednak wiele obrazów załadowanych w ten sposób jest widocznych tylko dla użytkownika podczas przewijania strony w dół. Nie jest więc konieczne, aby były już załadowane, gdy użytkownik patrzy na część „nad zakładką”.

Dzięki metodzie zwanej „leniwym ładowaniem” możesz upewnić się, że obrazy pod folderem są ładowane tylko wtedy, gdy faktycznie pojawiają się w oknie roboczym.

14. Wyczyść kod źródłowy

Po wywołaniu adresu URL witryny klient lub przeglądarka podąża za kodem źródłowym dokumentu HTML wiersz po wierszu. Czytane są wszystkie puste znaki lub znaki końca linii. Jeden zbędny pusty znak nie wpłynie negatywnie na wydajność Twojej witryny.

Ale ponieważ witryna, w zależności od jej rozmiaru, może składać się z ponad stu wierszy kodu źródłowego, wiele zbędnych pustych znaków lub komentarzy może wyraźnie wpłynąć na czas ładowania.

Dlatego powinieneś zminimalizować swój kod źródłowy:

• Usuń wszystkie niepotrzebne komentarze.
• Usuń wszystkie zbędne puste znaki.
• Usuń niepotrzebne formatowanie, jeśli na przykład w kodzie źródłowym znajduje się formatowanie bez treści, takie jak „<strong></strong>”

Aby uniknąć zbędnego kodu źródłowego, należy zawsze wstawić tekst sformatowany jako HTML na stronie internetowej, użyć edytora CMS lub wstawić, a następnie sformatować tekst jako zwykły tekst. Jeśli zintegrujesz tekst z Worda lub innego programu Office bezpośrednio z CMS, spowoduje to powstanie zbędnego kodu źródłowego.

Ponadto istnieją programy, które mogą usuwać wszystkie spacje i komentarze z kodu źródłowego. Jeśli chcesz korzystać z tych programów, zawsze powinieneś zachować kopię do edycji, ponieważ zminimalizowany plik jest mało czytelny.

15. Ogranicz zewnętrzne skrypty

Niezależnie od tego, czy są to przyciski udostępniania, czy kody śledzące, zewnętrzne skrypty można zintegrować z Twoją witryną na różne sposoby i do różnych celów. To sprawia, że ​​jesteś zależny od dostępności tych skryptów z innego źródła.

Jeśli serwer WWW, z którego pobierany jest skrypt, jest szczególnie wolny, spowolni to również czas ładowania Twojej witryny. Sprawdź więc, czy naprawdę potrzebujesz tych skryptów.

Dalsze wskazówki:

• Używaj tylko asynchronicznych kodów śledzenia. Nie ładują się, dopóki strona nie zostanie wyrenderowana i nie utrudniają jej ładowania.
• Korzystaj z narzędzi, takich jak Menedżer tagów Google. Oznacza to, że tylko jeden fragment kodu musi być zintegrowany z kodem źródłowym dla wielu kodów śledzących, a czas ładowania nie ma znaczącego wpływu.
• Jeśli to możliwe, powinieneś przechowywać skrypty na swoim serwerze WWW i nie integrować ich z zewnątrz.
• Zmniejsz liczbę ramek iFrame.

16. Outsourcing JavaScript i CSS

JavaScript to język skryptowy, za pomocą którego funkcje mogą być wykonywane w przeglądarce, a zatem na komputerze klienta. CSS (Cascading Style Sheets) można wykorzystać do zdefiniowania formatów i reprezentacji witryny. Dla tych elementów wymagana jest duża ilość kodu źródłowego, który musi być ładowany ponownie za każdym razem, gdy żądany jest adres URL. To wymaga czasu.

Aby zredukować kod źródłowy, możesz zlecić na zewnątrz pliki CSS i JavaScript. Zostaną one następnie połączone w jeden dokument. Konieczne jest tylko jedno pobranie. Jeśli przeglądarka załaduje plik do pamięci podręcznej, czas ładowania może zostać ponownie skrócony.

Jak zlecić obsługę JavaScript:

Wyświetl kod źródłowy swojej witryny za pomocą edytora. Następnie wytnij wszystkie pliki JS i utwórz nowy plik tekstowy, do którego wstawisz wszystkie fragmenty kodu. Zapisz plik jako main.js i przechowuj go na swoim serwerze w folderze, w którym znajdują się wszystkie inne pliki HTML.

W kodzie HTML strony usuń następujące polecenia:

oraz

Zamień usunięte polecenie za pomocą tego polecenia:

17. Zminimalizuj pliki CSS i JavaScript

Możesz zmniejszyć rozmiar CSS i JavaScript, usuwając niepotrzebne puste znaki. Są one również nazywane „białymi przestrzeniami”. W ten sposób kod źródłowy można np. zredukować tylko do jednej linii.

Fragment kodu z dostępnymi pustymi znakami:

Kod CSS i puste znaki:

Czytelność jest znacznie zmniejszona przez usunięcie pustych miejsc i komentarzy. Najlepiej byłoby pracować z dwiema wersjami: wersją ze wszystkimi spacjami i komentarzami, które możesz edytować, oraz wersją do wyświetlania na stronie internetowej.

Aby nie trzeba było powielać każdej dokonanej zmiany, możesz na przykład użyć programów do jej „minifikacji”. Możesz także użyć specjalnych narzędzi, aby zminimalizować JavaScript i CSS. Zalecane narzędzia obejmują:

• Kompresor YUI lub cssmin.js dla plików CSS
• Kompilator zamknięć dla JavaScript

18. Załaduj JavaScript i CSS na końcu

Twoja witryna nie jest wyświetlana w całości, dopóki nie zostaną załadowane wszystkie pliki JavaScript i CSS. Aby ułatwić proces ładowania, możesz wstawić JavaScript i CSS na końcu kodu HTML. Nawet jeśli serwer jest powolny, nie wpłynie to na rozwój Twojej witryny.

Idealna pozycja dla plików CSS znajduje się zatem w obszarze <head> strony. Powinieneś jednak włączyć JavaScript w stopce strony.

Ewentualna integracja plików może wyglądać jako:

19. Użyj CSS3 do tła

Każdy obraz, który jest używany w Twojej witrynie, wymaga kilku linijek kodu. Ten kod jest odczytywany linijka po linijce podczas wywoływania strony internetowej. Jeśli przechowujesz przyciski, ikony lub tła jako grafikę, przeglądarka będzie potrzebować dużo czasu, aby załadować Twoją witrynę.

Rozwiązaniem jest generowanie wszystkich elementów graficznych poza zdjęciami poprzez CSS3. W ten sposób zmniejszysz kod źródłowy. Jednocześnie pliki wyświetlane są w tej samej wysokiej jakości na wszystkich urządzeniach końcowych.

20. Użyj wstępnego pobierania i wstępnego renderowania

Jeśli korzystasz z technologii wstępnego pobierania, Twoja przeglądarka przechowuje określone elementy witryny w pamięci podręcznej, nawet przed całkowitym załadowaniem witryny. W ten sposób obrazy, grafika lub JavaScript i CSS mogą być ładowane bez utrudniania renderowania strony internetowej.

Musisz dostosować kod źródłowy, aby umożliwić pobieranie pliku z wyprzedzeniem. W takim przypadku żądany element jest poprzedzony atrybutem rel="prefetch".

Przykład:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

Tutaj przykład jest ponownie ładowany jeszcze przed załadowaniem innej witryny. W ten sposób skraca się czas ładowania w nowym widoku strony.

Jeśli korzystasz z metody renderowania wstępnego, cała witryna jest wcześniej pobierana z przeglądarki i tymczasowo przechowywana w pamięci podręcznej. Zawarte w nim są wszystkie pliki, które są niezbędne do pełnego renderowania. Witryna renderowana z wyprzedzeniem może zostać załadowana niemal bezzwłocznie po wywołaniu. Czas ładowania zostaje zatem skrócony do mniej niż 50 milisekund.

Aby zaimplementować prerenderowanie, musisz wstawić następujący wiersz do kodu źródłowego odwiedzanej witryny:

<link rel="prerenderowanie" href="//prerenderowanie-site.com/index">

21. Zmniejsz przekierowania 301

Przekierowania 301 doskonale nadają się do unikania duplikatów treści lub przekierowywania starych adresów URL na nowe adresy URL po ponownym uruchomieniu. Jednak każde przekierowanie wydłuża czas ładowania – niewiele, ale za każdym razem, gdy przeglądarka napotka przekierowanie, musi zostać pobrany nowy adres URL, a przeglądarka musi czekać na zwrócenie żądania http. Jeśli kilka przekierowań 310 następuje po sobie, czas ładowania może się znacznie wydłużyć.

>> Przekierowania: przewodnik przyjazny dla początkujących <<

Aby uniknąć zbyt wielu przekierowań, należy udokumentować strukturę adresu URL lub tworzenie nowych adresów URL. To samo dotyczy ustalonych przekierowań 301. Jeśli w analizie Twojej witryny znajdziesz kilka przekierowań, powinieneś poprowadzić pierwsze przekierowanie bezpośrednio do faktycznego celu linku bez objazdu do jednego lub więcej przekierowań.

22. Unikaj złych próśb

Jeśli klient, taki jak przeglądarka internetowa, uzyskuje dostęp do Twojej witryny, żądanie jest umieszczane dla każdego zasobu, aby móc wyświetlić plik. Jeśli jednak te zasoby nie zostaną znalezione w postaci obrazów lub plików JavaScript, może to prowadzić do łańcucha reakcji, który marnuje czas ładowania.

Możesz łatwo uniknąć złych żądań, poprawiając złe pliki i podając poprawną ścieżkę lub przekazując do nowego pliku.

23. Użyj AMP

Google oferuje webmasterom z Accelerated Mobile Pages możliwość ładowania witryn mobilnych niemal bez opóźnień. W tym celu strony muszą spełniać określone wymagania, aby mogły być wyświetlane na urządzeniach mobilnych.

Wiele CMS, takich jak WordPress, pozwala na korzystanie z AMP za pomocą wtyczek. Do tej pory AMP nie mógł być używany w sklepach internetowych. Jest to jednak przewidziane przez programistów.

Dalsze zasoby:

• Strona główna Projektu AMP
• WordPress-AMP-Wtyczki

24. Wypróbuj automatyczną optymalizację szybkości strony

W tym przewodniku poznałeś wiele sposobów na poprawę szybkości strony. Jednak większość z tych środków wymaga posiadania wiedzy technicznej i czasu na ich wdrożenie.

Jeśli jedna z tych dwóch rzeczy powinna być dla Ciebie przeszkodą, możesz pozostawić optymalizację szybkości strony automatycznej usłudze.

Usługa w chmurze do automatycznej optymalizacji szybkości strony wao.io działa w następujący sposób: Podobnie jak sieć dostarczania treści, wao.io tymczasowo przechowuje witrynę i przeprowadza środki, które można zdefiniować za pomocą menu. Oprócz inteligentnej kompresji obrazu i minimalizacji kodu obejmuje to również zaawansowane środki, takie jak leniwe ładowanie.

wao.io chroni również przed atakami bezpieczeństwa i oferuje metryki do monitorowania witryn i numerów użytkowników.

Wniosek

Strona internetowa ma wiele możliwych śrub regulacyjnych, których możesz użyć, aby skrócić czas ładowania strony.

W tym artykule odkryłeś kilka możliwości. Niektóre metody są również bardzo łatwe do wdrożenia dla początkujących i początkujących SEO.

Nawet jeśli wypróbujesz tylko kilka z nich, jesteśmy pewni, że możesz przyspieszyć swoją witrynę, uszczęśliwić użytkowników i zostać nagrodzonym lepszymi rankingami wyszukiwania.