TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

14

Nykyään nopeus on kaikki kaikessa. Selaimet yrittävät tallentaa verkkosivun sisällön välimuistiin nopeuttaakseen lataamista. On monia tapoja informoida selainta siitä, mitä välimuistiin tallennetaan, milloin välimuistiin ja kuinka kauan säilytetään välimuistissa oleva sisältö. Esilataus on yksi tällainen välimuistitoiminto, joka auttaa parantamaan WordPress -sivuston sivujen latausnopeutta. Tämä voi kuitenkin aiheuttaa virheen Google Lighthouse -raporteissa, joita käytetään Google PageSpeed ​​Insights -työkalussa. Tässä artikkelissa kerromme, miten voit korjata fontin aiheuttaman PageSpeed ​​Insightsin esilatausavainpyyntöongelman.

Kuinka käyttää esiladatusta?

Esilataus, kuten nimestä käy ilmi, ilmoita selaimelle, että se aloittaa resurssien tallentamisen verkkosivulle heti, kun sivu alkaa latautua. Tämä auttaa välimuistissa CSS: ää, skriptejä ja fontteja, joita tarvitaan myöhemmin. Voit lukea lisää esilatauksesta tästä Googlen kehittäjäartikkelista.

Periaatteessa esilataus on rel -ominaisuuden arvo HTML -linkkitunnisteessa. Tässä on syntaksi esilatauspyyntöjen käyttämisestä sivustossasi:

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

Sinun on lisättävä tämä linkkitagi HTML -koodisi head -tunnisteiden väliin jokaiselle sivustolle ladatulle CSS-, komentosarja- ja kirjasintiedostolle.

Google PageSpeed ​​-ongelma esilatauksessa

Vaikka esilataus nopeuttaa latausaikaa, sitä on käytettävä oikein. Tarkista sivustosi PageSpeed ​​Insights -työkalun avulla, onko esilatauspyynnön vuoksi käytettävissä mahdollisuuksia. Alla on esimerkki tapauksesta, joka osoittaa, että voit säästää 7,05 sekuntia esilatausavainpyyntöjen vuoksi.

Kun napsautat alanuolta, näet kaiken viivästyksen aiheuttavan aiheeseen liittyvän sisällön. Tässä tapauksessa kaikki ovat verkkosivulle ladattuja fontteja.

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

Preload Key Requests -virhe PageSpeed ​​Insightsissa

WordPress -laajennukset ja esilataus

Nyt saatat hämmentyä siitä, miten esilataus näkyy WordPress -sivustosi Google PageSpeed ​​-raportissa. On monia syitä, miksi saat tämän virheen:

  • Teemat ja laajennukset lataavat fontteja tuomalla ne CSS: ään.
  • Käytät välimuistilaajennusta, kuten WP Rocket, sivujen esilataamiseen, mutta et fontteja.
  • Käytät kolmannen osapuolen fontteja mainoksissa, kuten Google AdSense, tai käytät laajennusta ladataksesi mahtavia kirjasinkuvakkeita sivustollesi.

Välimuistilaajennukset lisäävät esilatauspyyntöavaimet kaikkiin resursseihin. Kuitenkin fontit, jotka tuodaan CSS: ään käyttäen @font-face, eivät käytä esilatausavainpyyntöjä. Tämä voi olla virhe PageSpeed, joka osoittaa, että sivustosta ladatut fontit eivät käytä esilatausavainta.

Kuinka korjata esilatausavainpyynnöt kirjasimilla?

Voit poistaa virheen lisäämällä manuaalisesti esilatausavaimet sivustosi otsikkoon PageSpeedissä näytetyille resursseille. On kuitenkin myös laajennuksia, jotka lisäävät sisällönkuvauskentät automaattisesti otsikkoosi. Selitämme sekä manuaalisia että laajennusmenetelmiä.

WP Rocketin käyttäminen Google PSI: n esilatausavainpyynnön korjaamiseen

Ensin selitämme WP Rocket -laajennuksella, koska se on helppoa eikä sinun tarvitse muokata PHP -tiedostoja.

Sisällytä fonttien esilataus WP Rocketilla

WP Rocket on premium -välimuistilaajennus, jonka avulla voit sisällyttää fontteja esilataamalla. Jos käytät WP Rocketia, siirry kohtaan "Asetukset> WP Rocket> Preload". Liitä fonttiresurssien suhteelliset URL -osoitteet "Preload fonts" -tekstikenttään ja tallenna muutokset. Tämä auttaa sinua pääsemään eroon esilatauspyyntöistä Googlen PageSpeed ​​Insights -työkalussa. Muista, että suhteellisen URL-osoitteen on oltava muodossa "/wp-content/themes/your-theme-name/font-file-name" teemafontteille ja "/wp-content/plugins/plugin-name" /font-file-name "laajennusten lataamille kirjasimille.

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

Esilataa fontit WP Rocket -laajennuksessa

WP Rocket optimoi monia muita ominaisuuksia, kuten kriittisen CSS-generoinnin, DNS-esipalvelun ja kolmannen osan skriptien, kuten Google Analyticsin, isännöinnin paikallisesti. Siksi on hyvä idea käyttää laajennuksia, kuten WP Rocket, parantaaksesi WordPress -sivustosi yleistä nopeutta. Uusin WP Rocket -laajennus ohittaa fontin esilatauksen automaattisesti, kun olet ottanut käyttöön "Optimoi CSS -toimitus" -vaihtoehdon "Tiedoston optimointi" -välilehdessä. Varmista siis, että poistat CSS -optimoinnin käytöstä, kun haluat käyttää fonttien esilatausta.

Esiladattujen sisällönkuvauskenttien lisääminen manuaalisesti

Lisää metatunnisteet manuaalisesti teemasi header.php -tiedostoon seuraavasti. Suosittelemme lapsiteeman käyttöä, jotta muutokset pysyvät pysyvinä, kun päivität pääteeman.

Linkin sisällönkuvauskenttien valmistelu

Ensimmäinen askel on hakea kaikki Google PageSpeedin resurssien URL -osoitteet. Normaalisti näet URL -osoitteiden loppuosan. Vie hiiri linkkien päälle nähdäksesi estoresurssin koko URL -osoitteen. Nyt voit kopioida URL -osoitteen ja liittää sen tekstieditoriin.

Sinun on käytettävä alla olevassa muodossa olevia URL -osoitteita sisällyttääksesi linkkitagiin:

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

Valmista linkkitagit kullekin teemasi ja laajennustesi käyttämälle fonttiresurssille.

Seuraava vaihe on kopioida kaikki linkkitunnisteet esilatauspyyntöineen ja liittää sivuston otsikko -osioon. Sinun on liitettävä WordPress -sivustosi linkkikoodit aktiivisen teeman header.php -tiedostoon. Voit käyttää File Manager -sovellusta isäntätililtä tai FTP: llä muokata header.php -tiedostoa ja lisätä koodin otsikkoon.

  • Kirjaudu hosting -tilillesi käyttämällä FTP -asiakasta, kuten FileZilla, tai etsi File Manager -sovellus hosting -tililtäsi.
  • Siirry kansioon "/wp-content/themes/yourtheme" ja etsi header.php-tiedosto.

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

Muokkaa otsikkotiedostoa

  • Muokkaa tiedostoa ja lisää esilatauskoodi otsikko -osioon.
  • Se näyttää seuraavanlaiselta ja muista lisätä kaikki Google PageSpeed ​​Insights -työkalussa näkyvät pyynnöt.

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

Lisää Preload -parametri otsikkotiedostoon

Vaihtoehtoisesti voit myös siirtyä järjestelmänvalvojan hallintapaneelin "Ulkoasu> Teemaeditori" -kohtaan ja muokata tiedostoa. Suosittelemme käyttämään aliteemaa ja muokkaamaan header.php -tiedostoa. Jos muokkaat pääteematiedostoa, sinun on lisättävä tämä koodi manuaalisesti aina, kun teemaa päivitetään.

Tarkista PageSpeed ​​uudelleen

Kun olet lisännyt linkkitunnisteen manuaalisesti tai käyttänyt WP Rocketia, muista tyhjentää sivustosi välimuisti. Tarkista uudelleen PageSpeed ​​Insights, ja nyt et näe esilatausavainpyyntövirhettä.

Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?

Ei esilatausongelmia

Voit napsauttaa "Hyväksytyt tarkastukset" -osiosta ja tarkistaa, että "Esilataa avainpyynnöt" -ongelma on hyväksytty.

Johtopäätös

Yleensä Google PageSpeed ​​Insights näyttää esilatausvirheen, joka aiheuttaa monen sekunnin viiveen sivun lataamisessa. Voit lisätä esilatauslinkkejä manuaalisesti tai käyttämällä laajennusta yllä olevien ohjeiden mukaisesti. Tämä auttaa sinua poistamaan virheen Google PageSpeedistä ja parantamaan nopeuspisteitä.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja