Kuinka korjata esilatausavainpyynnöt kirjasimilla WordPressissä?
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.
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.
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.
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.
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ä.
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ä.