Jak wyeliminować zasoby blokujące renderowanie | Premie WP

Jeśli słyszysz skargi dotyczące szybkości wczytywania Twojej witryny lub chcesz szybciej wczytywać swoje strony internetowe i poprawiać wygodę użytkowników, możesz rozważyć, jak wyeliminować zasoby blokujące renderowanie.

Bez względu na powód, jak szybko strona internetowa pojawia się przed twarzą odwiedzającego, może wpłynąć na wrażenia użytkownika i spowodować, że Twoja firma straci kontakt z klientem. Doświadczenie użytkownika w witrynie zależy głównie od krytycznej ścieżki renderowania i zarządzania skryptami ładowanymi przez witrynę podczas procesu renderowania.

Co to jest renderowanie?

Wszystkie strony internetowe podążają ścieżką, dzięki której użytkownik może zobaczyć ich zawartość i wchodzić z nią w interakcję. Ścieżka ładowania strony nazywana jest krytyczną ścieżką renderowania. Ta ścieżka opisuje kroki każdej witryny w celu gromadzenia i tworzenia danych dla użytkownika i jego przeglądarki.

Co przeglądarki robią przed renderowaniem

Wprowadzenie adresu URL witryny uruchamia następujący proces:

1. Nawigacja jest zakończona, gdy użytkownik zażąda określonego adresu URL.
   1. Następuje wyszukiwanie DNS, w którym serwer podaje adres IP
   2. Przeglądarka i serwer witryny wykonują połączenie TCP Handshake, aby nawiązać połączenie
   3. Żądania bezpiecznego połączenia uzyskują negocjację TLS lub drugą wymianę uzgadniania
2. Przeglądarka otrzymuje odpowiedź i kod strony
   1. Pierwszy pakiet danych jest odbierany w trybie TCP Slow Start w celu regulacji ruchu sieciowego
   2. Użytkownik wysyła potwierdzenia (ACK) do serwera w celu ustalenia ograniczeń połączeń i szybkości wysyłania.
3. Przeglądarka analizuje informacje i przekształca dane w CSS Object Model (CSSOM) i Document Object Model (DOM).
   1. Powstaje drzewo DOM (struktura witryny i strony)
   2. Skaner wstępnego ładowania gromadzi zasoby zewnętrzne, takie jak skrypty i obrazy.
   3. CSSOM zostaje zbudowany (drzewo stylów)
   4. JavaScript jest kompilowany podczas budowania CSSOM
   5. Model obiektowy dostępności (AOM) jest przeznaczony dla urządzeń wspomagających interpretację treści.
4. Renderowanie odbywa się przy użyciu wcześniej utworzonych drzew CSSOM i DOM.

Co się dzieje, gdy renderujesz stronę?

Witryny są renderowane za pomocą projektu kodu, aby uzupełnić układ, styl, malowanie, a czasem komponowanie na stronie internetowej. Model obiektowy CSS (CSSOM) i model obiektowy dokumentu (DOM)

Styl

DOM i CSSOM łączą się w drzewo renderowania i rozpoczyna się budowa. Drzewo renderowania organizuje widoczne węzły, zawartość i obliczone style dla witryny i każdego unikalnego węzła.

Układ

Układ jest etapem, w którym architektura spotyka się z konstrukcją, a struktura jest tworzona dla strony, aby wyświetlić szerokość, wysokość i położenie wszystkich węzłów w drzewie renderowania. Każdy obiekt ma określony rozmiar i położenie.

Strony internetowe mają strukturę pudełkową. Te pola mogą dostosować się do nieograniczonej liczby różnych rozmiarów rzutni. Kiedy struktura pudełka zmienia się ze względu na wielkość, nazywa się to reflow .

Malowanie: pierwsze malowanie i pierwsze malowanie z zawartością (FCP)

Moment, w którym przeglądarka internetowa wykonuje jakiekolwiek renderowanie strony, nazywa się „Pierwszym malowaniem”. First Paint może być jednolitym kolorem tła tylko w zależności od kodu strony.

First Contentful Paint (FCP) odnosi się do wymiernego momentu, w którym odwiedzający witrynę może wyświetlić zawartość Twojej strony (tekst, obrazy, filmy itp.). FCP mierzy od początku ładowania strony do momentu wyrenderowania treści.

First Paint i FCP to nie to samo, co strona szybkiego ładowania lub wysoka wydajność, ale wrażenia użytkownika stają się wymiernie bardziej pozytywne, gdy odwiedzający witrynę postrzegają stronę szybkiego ładowania. Dopracowanie pierwszych malowań, czasu ładowania i wydajności witryny poprawia postrzeganie czasu ładowania przez użytkowników.

Komponowanie

Strony internetowe używają warstw, na których obiekty nakładają się, aby uporządkować strukturę. Komponowanie polega na tym, że strona oblicza kolejność elementów, aby renderować je poprawnie.

Przepływy powodują ponowne złożenie, ponieważ położenie obiektu często zmienia się w przepływie.

Czym są zasoby blokujące renderowanie

Zasobami blokującymi renderowanie są skrypty, arkusze stylów i importy HTML, które spowalniają, opóźniają lub blokują renderowanie treści w witrynie internetowej przez przeglądarkę. Kiedy ludzie odnoszą się do zasobów blokujących renderowanie, zwykle odnoszą się do:

• CSS
• JavaScript w sekcji <head>
• Czcionki ładowane z serwera lub sieci dostarczania treści
• Importy HTML (starsze strony)

Istnieje wiele CSS i JavaScript, które nie blokują renderowania i są krytyczne do załadowania u góry. Nadaj priorytet arkuszom stylów, aby upewnić się, że każdy odwiedzający witrynę zobaczy zamierzoną treść zamiast treści bez stylu lub nic.

Co to jest JavaScript i CSS blokujące renderowanie?

Podczas procesu renderowania Twoja przeglądarka ładuje informacje o witrynie, najpierw przeglądając informacje w <head>, w tym każdy skrypt. Wszystkie skrypty muszą być uruchomione w porządku i w pełni przetworzone, zanim strona będzie widoczna w Twojej przeglądarce.

Skrypty wbudowują się w kolejkę, więc kolejność skryptów w <head> jest kluczowa podczas tworzenia. W zależności od kodu może spowolnić lub uniemożliwić pełne ładowanie witryny, a to właśnie nazywamy CSS i JavaScript blokującym renderowanie.

Skrypty w Twojej witrynie WordPress mogą pochodzić z motywów, niestandardowych prac lub wtyczek dodanych do różnych funkcji.

Czy obrazy są zasobami blokującymi renderowanie?

Jeśli zastanawiasz się, czy obrazy są zasobami blokującymi renderowanie, tak nie jest. Rozmiar obrazu może nadal powodować problemy z ładowaniem strony, ale nie powinien blokować renderowania.

Po co eliminować zasoby blokujące renderowanie?

Skrypty blokujące renderowanie mogą spowolnić ładowanie strony i zrujnować korzystanie z witryny przez odwiedzających. Postrzeganie powolnej witryny może prowadzić do utraty odwiedzających, jeśli witryna jest słaba. Niski wskaźnik utrzymania odwiedzających może wpłynąć na wyniki wyszukiwania i obniżyć listę wyników.

Niższe rankingi Search Engine Optimization (SEO) oznaczają zmniejszenie liczby odwiedzających i utratę potencjalnego biznesu. Utrata rankingów zmniejsza liczbę odwiedzających, a słaba strona zmniejsza retencję odwiedzających; Zasoby blokujące renderowanie mogą stanowić ogromny problem.

Jeśli celem Twojej witryny jest wysoki wynik Google PageSpeed ​​Score, zrozumienie zasobów blokujących renderowanie jest kluczem do osiągnięcia tego celu.

Jak wyeliminować zasoby blokujące renderowanie

Poważne podejście do rankingów SEO i wygody użytkownika witryny oznacza, że ​​witryna musi mieć usunięte lub usunięte zasoby blokujące renderowanie. Jeśli nie tworzysz swojej witryny od zera, zacznij testować ją pod kątem zasobów blokujących renderowanie.

Po zidentyfikowaniu tych zasobów blokujących renderowanie wybierz metodę rozwiązania problemu i poprawy funkcjonalności witryny.

Sprawdź, czy Twoja witryna ma zasoby blokujące renderowanie

Nigdy nie zaszkodzi przeprowadzić ocenę witryny w celu wykrycia zasobów blokujących renderowanie (wypróbuj Google PageSpeed ​​Insights). Jeśli optymalizujesz stronę najlepiej, jak potrafisz, stosujesz najlepsze praktyki i nadal masz problemy lub nie wiesz, od czego zacząć, osoby oceniające strony mogą być pomocnymi przewodnikami.

Metody eliminacji kodu JavaScript i CSS blokujących renderowanie

WordPress umożliwia zarządzanie wszelkimi zasobami, które przeszkadzają w renderowaniu Twojej witryny na kilka różnych sposobów. WordPress umożliwi Ci uporządkowanie skryptów i linków blokujących renderowanie za pomocą kodu, tagów, organizacji i optymalizacji plików oraz wtyczek.

Profesjonalni programiści mogą również tworzyć niestandardowe wtyczki lub motywy, które wbudowują te procesy w kod.

Usuń kod JavaScript blokujący renderowanie

Trzy metody rozwiązywania problemów z zasobami blokującymi renderowanie za pomocą kodu to:

1. Przenieś tagi <script> i <link> na dół kodu HTML
2. Dodaj atrybuty asynchroniczne lub odroczone do tagu dla skryptów niekrytycznych.
3. Usuń nieużywany kod JavaScript.

WordPress ładuje plik jQuery Migrate, aby zapewnić zgodność ze starymi wersjami jQuery używanymi przez wtyczki i motywy. Możesz użyć fragmentu kodu lub wtyczki, aby uniemożliwić WordPressowi ładowanie tego pliku migracji jQuery, jeśli nic w Twojej witrynie nie wymaga tego do działania.

Wyeliminuj arkusze stylów blokujące renderowanie

Charakter arkuszy stylów sprawia, że ​​z natury są one zasobami blokującymi renderowanie. Możesz rozwiązać ten problem w swojej witrynie w następujący sposób:

1. Podziel CSS według typu mediów (telefon komórkowy, tablet, komputer itp.)
2. Zoptymalizuj krytyczną ścieżkę renderowania
3. Połącz pliki CSS

Korzystając z WordPressa i kreatora wizualnego, możesz nie kontrolować bezpośrednio, w jaki sposób strona się buduje, ale istnieją sposoby na obejście każdego problemu.

Blokowanie renderowania adresów za pomocą wtyczki lub rozszerzenia WordPress

Wtyczki i rozszerzenia WordPress są wykorzystywane do organizowania skryptów na stronie. Wtyczki przejdą przez tagi <script> i <link> Twojej strony i zastosują atrybuty defer lub async na podstawie określonych wskazówek.

Przejrzeliśmy i przetestowaliśmy szereg wtyczek do WordPressa i nadal udostępniamy na blogu przydatne rzeczy, takie jak nasze ulubione wtyczki do optymalizacji prędkości.

Profesjonalny WordPress wyeliminuj zasoby blokujące renderowanie

Niektóre wtyczki wymagają dostosowania i chociaż wydają się proste, mogą nie działać, jeśli zostaną nieprawidłowo skonfigurowane. Nie ma wstydu poprosić o pomoc specjalistę od WordPressa, a WP Buffs ma kilku specjalistów, którzy mogą zoptymalizować Twoją witrynę.

Najlepsze praktyki optymalizacji renderowania

1. Połącz zasoby blokujące renderowanie, aby zmniejszyć ich wpływ na ładowanie strony.
2. Zmniejsz rozmiar zasobu, aby zmniejszyć liczbę bajtów do załadowania.
3. Odrocz pobieranie zasobów, które nie blokują renderowania.
4. Nie dodawaj CSS z regułą @import, ponieważ jest to obciążenie zewnętrzne.
5. Użyj wtyczki WordPress zaprojektowanej do buforowania skryptów i optymalizacji JavaScript i CSS.
6. Załaduj niestandardowe czcionki lokalnie.
7. Zidentyfikuj krytyczne i niekrytyczne CSS i JavaScript.
8. Oznacz niekrytyczny kod blokujący renderowanie za pomocą atrybutów asynchronicznych lub odroczonych.
9. Nieużywany kod należy usunąć.

Wyeliminuj ból głowy i poproś o pomoc profesjonalistę WordPress

WP Buffs są wykwalifikowani w optymalizacji witryn WordPress i poprawianiu wydajności strony. Rozumiemy, dlaczego wydajność ma znaczenie dla Twojej firmy i na jakich obszarach należy się skoncentrować, aby wywrzeć największy wpływ.

Poprawa wydajności witryny i wrażenia użytkowników może być czymś więcej niż tylko zasobami blokującymi renderowanie. WP Buffs może spojrzeć na twoją stronę i adres:

• Rozmiary obrazu
• Jakość obrazu i format dostawy
• Długość strony i procent zawartości dynamicznej
• Źle zbudowane motywy
• Niepotrzebne skrypty powodujące opóźnienia
• Wtyczki, które są słabo zbudowane
• Nieużywane skrypty zewnętrzne
• Nieaktualne oprogramowanie
• Ograniczony plan hostingowy, który nie jest w stanie wystarczająco zaspokoić potrzeb strony

WordPress może być dość łatwą platformą do zbudowania strony internetowej, ale maksymalizacja doświadczenia użytkownika może wymagać przeszkolonego profesjonalisty lub często świetnego dostawcy usług.

Często Zadawane Pytania