Jak wstępnie załadować żądania klucza w WordPress

Korzystanie z czcionek internetowych, CSS i JavaScript może uczynić Twoją witrynę bardziej wyjątkową i interaktywną. Jednak oczekiwanie na załadowanie tych typów plików może być frustrujące dla użytkowników Twojej witryny.

W tym miejscu przydatne może być wstępne ładowanie żądań klucza w WordPress. Poinstruując przeglądarki, aby pobierały te typy plików wcześniej w łańcuchu żądań, będą one dostępne, gdy przeglądarka będzie gotowa do renderowania treści. To z kolei może przyspieszyć postrzegany czas ładowania strony i zapewnić lepszą ogólną wygodę korzystania z sieci.

W dzisiejszym przewodniku omówimy, co oznacza wstępne ładowanie kluczowych żądań, a także omówimy potencjalne korzyści związane z wydajnością Twojej witryny. Następnie wyjaśnimy, jak to zrobić w witrynie WordPress za pomocą czcionek Google, Font Awesome, CSS i JavaScript.

Co oznacza „wstępne ładowanie żądań klucza” w WordPress?

Gdy ktoś odwiedza Twoją witrynę, jego przeglądarka wyśle ​​wiele żądań HTTP do serwera Twojej witryny, prosząc go o pliki, z których składa się Twoja treść. Serwer zajmie pewną ilość czasu, aby zacząć odpowiadać na te żądania i wysyłać informacje do przeglądarki, co jest określane jako czas do pierwszego bajtu (TTFB).

Następnie przeglądarka rozpocznie pobieranie zawartości (PHP, JavaScript i CSS) z plików witryny i renderowanie jej w celu wyświetlenia widocznych stron (HTML) w interfejsie użytkownika. Po zakończeniu tego procesu odwiedzający może zobaczyć w pełni załadowaną stronę internetową.

Przeglądarka użyje „łańcucha żądań”, aby poprosić o treść i renderować ją w sekwencji. Oznacza to, że istnieje wiele etapów mniejszych żądań w ramach większych, w wyniku czego odwiedzający może przeglądać zawartość Twojej witryny.

Zasadniczo „wstępne ładowanie” oznacza nakazanie przeglądarce użytkownika, aby najpierw pobrała niezbędne pliki, zamiast czekać do końca procesu ładowania. Są to zazwyczaj czcionki (zwłaszcza czcionki internetowe), CSS, JavaScript, a czasami obrazy.

Żądania kluczy są unikalne, ponieważ Twoja przeglądarka zazwyczaj nie żąda tych plików aż do późniejszego etapu ładowania. Tak więc nastąpi opóźnienie, gdy przeglądarka dojdzie do tego punktu i odkryje, że musi zażądać plików. Mówiąc przeglądarce, aby najpierw załadowała te pliki, będzie je mieć pod ręką, gdy będzie musiała je wyrenderować.

Jakie są zalety wstępnego ładowania kluczowych żądań?

Główną zaletą wstępnego ładowania kluczowych żądań jest poprawa postrzeganej wydajności witryny. Oznacza to, że przeglądarka użytkownika może szybciej renderować zawartość, a odwiedzający będą mieli wrażenie, że Twoja witryna jest szybsza. Ale Twoja witryna tak naprawdę tylko wstępnie ładuje niezbędne treści, aby wyglądać w ten sposób.

Ponadto wstępne ładowanie żądań ma kluczowe znaczenie dla wyników Core Web Vitals. Te dane Google mierzą wydajność ładowania Twojej witryny, interaktywność i stabilność wizualną, dając wynik, który oznacza ogólną przyjazność witryny dla użytkownika.

Oto trzy podstawowe wskaźniki internetowe:

• Największe malowanie zawartości (LCP): ile czasu zajmuje załadowanie największego elementu na Twojej stronie.
• Opóźnienie pierwszego wejścia (FID): jak długo przeglądarka reaguje na interakcję użytkownika z treścią.
• Skumulowane przesunięcie układu (CLS) : o ile elementy poruszają się podczas ładowania strony.

W szczególności wstępne ładowanie kluczowych żądań może mieć znaczący wpływ na Twój wynik LCP. Wstępne ładowanie obrazów, czcionek i innych dużych plików pozwoli skrócić czas ich renderowania.

Ponadto wstępne ładowanie może wpłynąć na wynik pierwszego malowania zawartości (FCP). Ta metryka mierzy, ile czasu zajmuje wyświetlenie pierwszego elementu HTML na Twojej stronie. Jeśli możesz wstępnie załadować ten element, przeglądarka będzie mogła szybciej wyświetlać początkowe części treści.

Co więcej, wyszukiwarki takie jak Google preferują szybko ładujące się i interaktywne treści. Dlatego, poza zapewnieniem lepszego doświadczenia użytkownika, poprawa tych wskaźników wydajności może poprawić optymalizację witryny pod kątem wyszukiwarek (SEO).

Zasadniczo ulepszenia wydajności mogą pomóc podnieść strony Twojej witryny w rankingach i sprawić, by Twoje treści były widoczne dla większej liczby użytkowników. Ponadto wstępne ładowanie żądań kluczy jest stosunkowo łatwe. W dalszej części tego wpisu pokażemy Ci dokładnie, jak to zrobić!

Czy wstępne ładowanie kluczowych żądań ma wady?

Wstępne ładowanie żądań może wydawać się świetnym pomysłem z punktu widzenia wydajności. To powiedziawszy, próba wstępnego załadowania zbyt wielu elementów może działać przeciwko tobie.

Przeglądarka może przetworzyć tylko określoną liczbę żądań jednocześnie. Tak więc, jeśli każesz mu wstępnie załadować wiele elementów, może stworzyć „wąskie gardło”, które działa przeciwko czasowi ładowania strony w Twojej witrynie.

Dlatego warto starannie wybrać, które elementy powinny być wstępnie załadowane, aby uzyskać największy efekt. W większości przypadków będą to czcionki internetowe, CSS i JavaScript, ponieważ są to zwykle najcięższe pliki.

Jak sprawdzić, czy witryna wstępnie ładuje kluczowe żądania

Kilka różnych narzędzi może określić, czy Twoja witryna wstępnie ładuje żądania, i zasugerować elementy, które mogą skorzystać na tej technice optymalizacji. Na przykład PageSpeed ​​Insights to jedna z najpopularniejszych opcji identyfikowania problemów z wydajnością w Twojej witrynie.

Aby skorzystać z tego bezpłatnego narzędzia, po prostu wprowadź adres URL swojej witryny i kliknij Analizuj . Spowoduje to wygenerowanie szczegółowego raportu wydajności.

Przewiń w dół, aby zobaczyć możliwości wydajności, diagnostykę i pomyślne audyty. W jednej z tych sekcji powinieneś znaleźć sugestię Preload Key Requests .

Jeśli wolisz nie przechodzić między swoją witryną a PageSpeed ​​Insights, rozważ zainstalowanie rozszerzenia Google Lighthouse do przeglądarki Chrome. Umożliwia generowanie raportów z poziomu przeglądarki i przeglądanie wskaźników wydajności strony.

Podobnie GTMetrix może generować szczegółowe raporty wydajności dla dowolnej witryny. Pozwala analizować strony z wielu lokalizacji i śledzić ich wydajność w czasie.

Na karcie Struktura GTMetrix będziesz mógł sprawdzić, czy wstępne ładowanie kluczowych żądań może poprawić wydajność Twojej witryny.

Jak wstępnie załadować kluczowe żądania w WordPress

Przed wprowadzeniem jakichkolwiek znaczących zmian w witrynie WordPress, takich jak dodanie niestandardowego kodu, zawsze warto wykonać pełną kopię zapasową. Ten środek ostrożności oznacza, że ​​będziesz mieć pod ręką funkcjonalną wersję swojej witryny, jeśli popełnisz jakiekolwiek błędy.

Tutaj przydaje się Jetpack VaultPress Backup. Ta przyjazna dla użytkownika wtyczka automatycznie tworzy kompleksowe kopie zapasowe wszystkich danych, w tym ich plików, tabel bazy danych i informacji o produkcie WooCommerce. Te kopie zapasowe są zapisywane w czasie rzeczywistym i bezpiecznie przechowywane w chmurze. Możesz je przywrócić kilkoma kliknięciami — nawet jeśli jesteś w podróży lub w ogóle nie masz dostępu do swojej witryny.

1. Czcionki

Czasami czcionki mogą zostać ukryte w innych plikach w Twojej witrynie, w tym plikach CSS i JavaScript. Niestety może to spowolnić proces renderowania strony.

Aby wstępnie załadować żądania z czcionkami w WordPress, skopiuj i wklej ten kod do sekcji <head> swojej strony:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Pamiętaj, aby zastąpić nazwę czcionki „nazwą czcionki”. Co więcej, włączenie „crossorigin” jest niezbędne, jeśli czcionka pochodzi z zewnętrznego źródła, ponieważ informuje przeglądarkę, że musi załadować plik z zewnętrznego serwera.

2. Czcionki Google

Czcionki Google zawierają bibliotekę open source obejmującą prawie 1500 rodzin czcionek. Jeśli szukasz niestandardowych czcionek internetowych do użycia w swojej witrynie, prawdopodobnie możesz je tam znaleźć.

Korzystanie z czcionek Google może pomóc w nadaniu Twojej witrynie wyjątkowego wyglądu, ale przeglądarka musi również pobierać pliki czcionek podczas renderowania treści. W zależności od czcionki może to wydłużyć czas ładowania strony.

W przypadku wstępnego ładowania czcionek Google dobrym pomysłem jest również ich „wstępne połączenie”. Ten krok informuje przeglądarkę z wyprzedzeniem, że będzie musiała połączyć się z witryną strony trzeciej (np. Czcionki Google), aby pobrać zasób.

Dodatkowo po dodaniu kodu preloadingu warto dołączyć link do jego arkusza stylów. W ten sposób, jeśli przeglądarka użytkownika nie może wstępnie załadować danej czcionki, nadal będzie mogła ją renderować.

Po prostu dodaj następujący kod do sekcji <head> swojej strony:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

W swoim kodzie musisz zastąpić „$fontURL” linkiem do swojej czcionki Google. Na przykład może to wyglądać tak:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Następnie pamiętaj o zapisaniu zmian!

3. Niesamowita czcionka

Font Awesome to świetne źródło niestandardowych ikon i czcionek, z opcjami darmowymi i premium w swojej bibliotece. Możesz użyć niektórych z tych ikon, aby wzbogacić projekt w menu, nagłówkach, stopkach i obszarach treści.

Podobnie jak w przypadku Czcionek Google, wstępne ładowanie ikon Font Awesome może być dobrym pomysłem na przyspieszenie postrzeganego czasu ładowania strony. Po prostu dodaj ten kod do sekcji <head> strony:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

Musisz zamienić ścieżkę pliku dla czcionki lub ikony, której używasz w swojej witrynie. Następnie zapisz zmiany!

4. CSS

Kaskadowe arkusze stylów (CSS) to język projektowania współpracujący z HTML w celu określenia stylu i prezentacji strony internetowej. Dzięki niestandardowemu CSS możesz szybko zmieniać wygląd różnych elementów.

Każda stylizowana strona HTML w Twojej witrynie będzie miała odpowiedni arkusz stylów z całym Twoim CSS. Przeglądarka musi załadować ten plik podczas renderowania strony internetowej, dlatego warto poinformować przeglądarkę, że powinna wstępnie załadować ten zasób.

Na szczęście istnieje prosty sposób na wstępne załadowanie CSS. Po prostu dodaj ten kod do sekcji <head> swojej strony:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Pamiętaj, aby zastąpić nazwę arkusza stylów „styles.css”. Pamiętaj też, że chociaż ten kod będzie działał w przeglądarce Google Chrome, nie jest obsługiwany przez wszystkie przeglądarki.

5. JavaScript

JavaScript to kolejny z popularnych języków skryptowych używanych w WordPress. Pozwala tworzyć dynamiczne treści, takie jak animacje, ruchome karuzele obrazów i automatycznie aktualizowane kanały.

Renderowanie JavaScript jest zwykle bardziej złożone, ponieważ jego pliki są stosunkowo ciężkie, co wymaga dłuższego procesu do wyświetlenia treści. Dlatego nakazanie przeglądarce wstępnego załadowania ciężkiego kodu JavaScript może być korzystne dla przyspieszenia ładowania strony.

Podobnie jak w przypadku CSS, wystarczy dodać ten prosty wiersz kodu do sekcji <head> strony:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Tak jak poprzednio, zastąp „ui.js” nazwą pliku JavaScript i zapisz zmiany.

Bonus: Zainstaluj darmową wtyczkę, aby ulepszyć Core Web Vitals

Wstępne ładowanie żądań to tylko jedna technika, której możesz użyć, aby poprawić wyniki Core Web Vitals swojej witryny WordPress.

Jeśli szukasz bardziej wszechstronnego (i darmowego!) rozwiązania, rozważ zainstalowanie Jetpack Boost. To narzędzie zostało opracowane przez Automattic, tę samą firmę, która stoi za WordPress.com.

Ta przyjazna dla użytkownika wtyczka skanuje całą witrynę i podaje ocenę na komputerach stacjonarnych i urządzeniach mobilnych. Co więcej, Jetpack Boost jest nie tylko przydatny dla trzech podstawowych wskaźników internetowych. Jego metody optymalizacji mogą poprawić inne wskaźniki, w tym Time to Interactive (TTI) i Total Blocking Time (TBT).

Będziesz mógł użyć prostego systemu przełączania, aby zoptymalizować ładowanie CSS, odroczyć nieistotny JavaScript i obrazki z opóźnieniem. Wersja premium wtyczki będzie również automatycznie generować krytyczny CSS za każdym razem, gdy wprowadzisz zmiany w swojej witrynie.

Alternatywnie, Jetpack Complete może przenieść Twoją witrynę WordPress na zupełnie nowy poziom. Ten plan zawiera wiele narzędzi zwiększających wydajność, w tym dostęp do sieci dostarczania treści obrazu Jetpack (CDN), która może zarówno zaoszczędzić przepustowość, jak i skrócić czas ładowania strony. Ponadto otrzymasz zaawansowane narzędzia bezpieczeństwa i rozwoju WordPress.

Często zadawane pytania dotyczące wstępnego ładowania żądań kluczy

W tym momencie powinieneś dobrze rozumieć, jak wstępnie załadować kluczowe żądania w WordPress. Mimo to, dla pewności omówimy kilka często zadawanych pytań!

Czy wstępne ładowanie żądań poprawia komfort użytkowania?

Żądania wstępnego wczytywania mogą poprawić wrażenia użytkowników, skracając postrzegany czas wczytywania witryny. Ponieważ odwiedzający nie będą musieli czekać tak długo na wyrenderowanie treści, będzie mniej prawdopodobne, że poczują się sfrustrowani i potencjalnie opuszczą Twoją witrynę, aby przejść do innej.

Czy wstępne ładowanie żądań poprawia podstawowe wskaźniki internetowe?

Wstępne ładowanie kluczowych żądań w WordPress może poprawić wyniki Core Web Vitals, szczególnie jeśli chodzi o największą treść (LCP). W rzeczywistości, gdy decydujesz, które elementy wstępnie załadować, rozsądnie byłoby dołączyć „największą” lub „główną” treść, ponieważ to ona prawdopodobnie najbardziej na tym skorzysta.

Wstępne ładowanie żądań kluczy a wstępne ładowanie krytycznych zasobów

Warto zauważyć, że wstępne ładowanie kluczowych żądań oznacza to samo, co wstępne ładowanie krytycznych zasobów. Oba terminy odnoszą się do nakazania przeglądarce, aby ładowała określone zasoby z wyprzedzeniem, aby szybciej renderować zawartość strony.

Wstępne ładowanie a wstępne łączenie a pobieranie z wyprzedzeniem

Wstępne ładowanie, wstępne łączenie i wstępne pobieranie mogą wydawać się podobnymi pojęciami, ale w rzeczywistości oznaczają nieco inne rzeczy. Wszystkie są tagami, które instruują przeglądarkę, w jakiej kolejności wczytywać zawartość, ale pełnią różne funkcje.

Po pierwsze, wstępne ładowanie obejmuje ładowanie treści potrzebnej do renderowania strony w przeglądarce użytkownika. Jest to tag o wysokim priorytecie, który przygotuje zasób w ciągu kilku sekund.

Z kolei pobieranie z wyprzedzeniem dotyczy kolejnych elementów, które mogą wymagać załadowania. Przeglądarka z wyprzedzeniem wyszuka zasoby i zapisze je w swojej pamięci podręcznej. Jest to tag o bardzo niskim priorytecie, więc nie należy go używać do pilnych zasobów.

Wreszcie, wstępne łączenie jest używane, gdy chcesz nakazać przeglądarce połączenie się z określoną domeną. Jeśli Twoja witryna korzysta z zasobów z określonej witryny innej firmy (np. Czcionki Google), wstępne połączenie informuje przeglądarkę, że w pewnym momencie procesu ładowania będzie musiała połączyć się z tą domeną.

Co jeszcze mogę zrobić, aby poprawić wydajność mojej witryny?

Różne zadania mogą pomóc poprawić wydajność witryny WordPress, w tym:

• Używanie sieci CDN do udostępniania treści odwiedzającym na całym świecie
• Odroczenie (lub usunięcie) nieużywanego CSS
• Eliminacja zasobów blokujących renderowanie
• Minimalizowanie CSS i innych zasobów
• Wykonywanie mniejszej liczby żądań HTTP

Warto również wybrać wysokiej jakości hosta WordPress, który zapewni Ci funkcje optymalizacji wydajności, takie jak dedykowane buforowanie, gwarancja dostępności i rozległa sieć centrów danych na całym świecie.

Popraw wydajność swojej witryny WordPress, wstępnie ładując kluczowe żądania

Czasy wczytywania strony mogą znacząco wpłynąć na komfort korzystania z Twojej witryny i rankingi w wyszukiwarkach. Dlatego będziesz chciał zrobić wszystko, co w Twojej mocy, aby przyspieszyć czas potrzebny przeglądarce na wyświetlenie zawartości Twojej witryny.

Gdy wstępnie załadujesz kluczowe żądania na swoich stronach, przeglądarka użytkownika będzie miała gotowe zasoby (takie jak czcionki, CSS i JavaScript). Wtedy nie będzie opóźnień podczas ładowania treści i udostępniania ich użytkownikom.

Wstępne ładowanie kluczowych żądań to tylko jeden krok w kierunku poprawy wydajności witryny. Korzystając z Jetpack Boost, możesz łatwo skonfigurować swoją witrynę tak, aby obrazy ładowały się z opóźnieniem, odraczały nieistotny JavaScript i nie tylko. Co więcej, wtyczka jest darmowa. Sprawdź Jetpack Boost już dziś!