TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

0

I dag er hastighet alt. Nettlesere vil prøve å lagre innholdet på websiden for å øke hastigheten på innlasting. Det er mange måter å informere nettleseren om hva du bør lagre, når du skal lagre det og hvor lenge det lagrede innholdet skal lagres. Forhåndsinnlasting er en slik hurtigbufringsfunksjon som hjelper deg med å forbedre sidehastigheten til WordPress -nettstedet. Dette kan imidlertid skape en feil i Google Lighthouse -rapporter som brukes i Google PageSpeed ​​Insights -verktøyet. I denne artikkelen, la oss forklare hvordan du løser problemet med forhåndslastingsnøkkelforespørsler i PageSpeed ​​Insights på grunn av skrifttyper.

Hvordan bruke forhåndsinnlasting?

Forhåndsinnlasting, som navnet indikerer, informerer nettleseren om å begynne å cache ressursene på en webside umiddelbart når siden begynner å laste. Dette vil bidra til å cache CSS, skript og fonter som kreves senere. Du kan lære mer om forhåndsinnlasting i denne Google -utviklerartikkelen.

I utgangspunktet er forhåndsinnlasting en verdi av rel -egenskapen i HTML -lenketaggen. Her er en syntaks for bruk av forhåndslastingsforespørsler på nettstedet ditt:

<link rel="preload" href="font.woff" as="style">

Du må sette inn denne koblingstaggen mellom hodemerkene på HTML -koden din for hver CSS-, skript- og skriftfil som er lastet inn på nettstedet.

Problem med Google PageSpeed ​​med forhåndsinnlasting

Selv om forhåndslastingen øker lastetiden, bør den brukes riktig. Sjekk nettstedet ditt med PageSpeed ​​Insights -verktøyet for å se om det er noen mulighet på grunn av forespørsel om forhåndsinnlasting. Nedenfor er et eksempel på en sak som viser at du kan spare 7,05 sekunder på grunn av forespørsler om forhåndslastingsnøkler.

Når du klikker på pil ned, vil du se alt relatert innhold som forårsaker forsinkelsen. I dette tilfellet er alle skrifttyper lastet inn på nettsiden.

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

Feil ved forespørsel om forespørsel om nøkkel i PageSpeed ​​Insights

WordPress -plugins og forhåndsinnlasting

Nå kan du bli forvirret over hvordan forhåndslastingen vises i Google PageSpeed ​​-rapporten for WordPress -nettstedet ditt. Det er mange grunner til at du får denne feilen:

  • Temaer og plugininnlasting av skrifter ved å importere i CSS.
  • Du bruker hurtigbuffer -plugin som WP Rocket til å forhåndslaste sidene, men ikke forhåndslaster skriftene.
  • Du bruker skrifttyper fra tredjeparter med annonser som Google AdSense, eller bruker et programtillegg for å laste ned fantastiske ikoner på nettstedet ditt.

Bufremodulene legger til forhåndslastingsnøkler til alle ressurser. Skriftene som er importert i CSS ved bruk av @font-face bruker imidlertid ikke forespørsler om forhåndslastingsnøkler. Dette kan være feilen PageSpeed ​​som viser at forhåndslastingsnøkkelen ikke brukes av skriftene som er lastet fra nettstedet.

Hvordan fikser jeg forhåndslastede nøkkelforespørsler med fonter?

Du kan fjerne feilen ved å legge til forhåndslastingsnøkler manuelt på sidehodet for disse ressursene som vises i PageSpeed. Imidlertid er det også plugins for å automatisk sette inn metataggene i toppteksten din. Vi vil forklare både manuelle og plugin -metoder.

Bruk av WP Rocket til å fikse forespørsel om forhåndsnøkkel i Google PSI

Først vil vi forklare med WP Rocket -plugin ettersom det er enkelt, og du ikke trenger å endre PHP -filer.

Inkluder forhåndsinnlasting av skrifttyper med WP Rocket

WP Rocket er premium caching -plugin som lar deg inkludere forhåndsinnlasting av fonter. Hvis du bruker WP Rocket, går du til delen "Innstillinger> WP Rocket> forhåndsinnlasting". Lim inn de relative nettadressene til skriftressursene under tekstboksen "Forhåndsinnlasting av skrifter" og lagre endringene. i Google PageSpeed ​​Insights-verktøyet. Husk at relativ URL skal være i formatet "/wp-content/theme/your-theme-name/font-file-name" for temafonter og "/wp-content/plugins/plugin-name /font-file-name "for fonter lastet av plugins.

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

Last inn skrifter på forhånd i WP Rocket Plugin

WP Rocket optimaliserer mange andre funksjoner som kritisk CSS-generasjon, DNS-forhåndshenting og hosting av tredjedelsskript som Google Analytics lokalt. Derfor er det en god idé å bruke plugins som WP Rocket for å forbedre totalhastigheten på WordPress -nettstedet ditt. Den siste WP Rocket -pluginen vil automatisk ignorere forhåndsinnlasting av skrift når du har aktivert alternativet "Optimaliser CSS -levering" under "Filoptimalisering" -fanen. Sørg derfor for å deaktivere CSS -optimalisering når du vil bruke forhåndsinnlasting av skrifttyper.

Legge til forhåndslastede metakoder manuelt

Følg trinnene nedenfor for å sette inn metakoder manuelt i temaets header.php -fil. Vi anbefaler å bruke barnetema slik at endringer forblir permanente når du oppdaterer det overordnede temaet.

Forbereder lenke -metakoder

Første trinn er å få alle nettadresser for ressursene som vises i Google PageSpeed. Normalt vil du se sluttdelen av nettadressene, holde musen over koblingene for å se hele nettadressen til blokkeringsressursen. Nå kan du kopiere nettadressen og lime inn i et tekstredigeringsprogram.

Du må bruke nettadressene i formatet nedenfor for å inkludere i lenken:

<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">

Forbered koblingstagger for hver fontressurs som brukes av temaet ditt og plugins.

Neste trinn er å kopiere alle koblingskodene dine med forhåndsinnlastingsforespørsler og lime inn i toppteksten på nettstedet. På WordPress -nettstedet ditt må du lime inn koblingstaggene i header.php -filen til det aktive temaet. Du kan bruke File Manager -appen fra vertskontoen eller bruke FTP til å redigere header.php -filen og sette inn kode i overskriften.

  • Logg deg på vertskontoen din ved å bruke FTP -klient som FileZilla eller finn File Manager -appen på vertskontoen din.
  • Naviger til "/wp-content/theme/yourtheme" -mappen og finn header.php-filen.

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

Rediger toppfil

  • Rediger filen og sett inn forhåndsinnlastingskoden i overskriftsseksjonen.
  • Det ser omtrent ut som nedenfor, og husk å sette inn alle forespørslene du ser i Google PageSpeed ​​Insights -verktøyet.

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

Legg til forhåndslastingsparameter i toppfil

Alternativt kan du også gå til "Utseende> Temaredigerer" i administrasjonspanelet og redigere filen. Vi anbefaler å bruke barnetema og endre header.php -filen. Hvis du endrer overordnet temafil, må du sette inn denne koden manuelt hver gang du oppdaterer temaet.

Sjekk PageHastighet igjen

Etter at du har satt inn koblingstaggen manuelt eller brukt WP Rocket, må du tømme bufferen på nettstedet ditt. Sjekk tilbake på PageSpeed ​​Insights, og nå vil du ikke se feilen med forespørsler om forhåndslastingsnøkkel.

Hvordan fikse forhåndsinnlastingsnøkkelforespørsler med fonter i WordPress?

Ingen problemer med forhåndsinnlasting

Du kan klikke på delen "Bestått revisjon" og kontrollere at "Forespørsler om forhåndslastingsnøkkel" -problemet er i bestått status.

Konklusjon

Vanligvis vil Google PageSpeed ​​Insights vise forhåndslastingsfeilen som forårsaker mange sekunders forsinkelse i sideinnlasting. Du kan følge trinnene ovenfor for å sette inn forhåndsinnlastingskoblinger manuelt eller ved å bruke plugin. Dette vil hjelpe deg med å fjerne feilen fra Google PageSpeed ​​og forbedre hastighetspoengene.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon