Laad belangrijke verzoeken vooraf

Als je in de Google Pagespeed test de melding “Laad belangrijke verzoeken vooraf” hebt gezien zal je misschien afgevraagd hebben “Hoe kan ik het eerder laden”. Dit is wat steeds meer gebruikt wordt als files van andere servers geladen moeten worden. Denk bijvoorbeeld aan Google Fonts, Analytics of jQuery bijvoorbeeld.

Hier zullen we kijken hoe we deze melding kunnen voorkomen en de website beter kunnen laten scoren voor Page speed en Web Vitals. En hiermee uiteraard onze SEO kunnen verbeteren.

Waarom belangrijke verzoeken vooraf laden

Om dit zo makkelijk mogelijk uit te leggen nemen we de @font-face optie die vroeger vaak gebruikt werd om aparte fonts te kunnen laden. Zelfde doet Google Fonts nog steeds. We gaan hier er van uit dat we het in ons eigen style-sheet hebben staan. Dit wordt als volgt in head getoond:

<link rel="stylesheet" href="http://www.mijn-website.nl/css/style-min.css" type="text/css">

Als in deze file @font-face wordt gebruikt ziet dit er ongeveer als volgt uit.

@font-face {
    font-family: "Open Sans";
    src: url("./fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("./fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Wat hier precies gebeurd is dat eerst de file “style-min.css” moet worden geladen. Deze geeft de opdracht om de twee font-files te downloaden. Het zijn dus eigenlijk 3 files die geladen moeten worden. Belangrijk is te weten dat “style-min.css” pas zijn werk kan doen als de andere twee files zijn geladen. Dus dit kost extra tijd.

Bovenstaande gebeurd ook als je bijvoorbeeld analytics gebruikt. In de js worden dan vaak andere js-files en aanvullende css-files geladen. De melding in de Google pagespeed test geeft duidelijk aan welke files meer prioriteit zouden moeten krijgen bij het laden.

Laad belangrijke verzoeken vooraf

Om het je nu makkelijk te maken hier een eenvoudige oplossing om de melding in de Google Pagespeed test te voorkomen. Waarschijnlijk zie je in de pagespeed test aanbevelingen iets als op de volgende afbeelding.

Bij URL staan de links die geladen worden via een andere file. Kopieer deze links en plaats deze zo hoog mogelijk in de head van je website. Plaatst dit voordat andere file moeten worden geladen. Dit kan je op de volgende manier plaatsen.

<link rel="preload" href="http://www.mijn-website.nl/css/fonts/OpenSans-Regular-webfont.woff?v=4.5.0">

Let op dat we hier bespreken hoe je het oplost voor alle soorten files maar voor fonts komen er nog enkele zaken bij. Bekijk hier voor: Zorg ervoor dat tekst zichtbaar blijft tijdens het laden van weblettertypen. Dit is ook een belangrijk onderdeel van de pagespeed en Web Vitals.

Herhaal dit voor alle links die je hebt staan in de Google pagespeed test. Hier zie je rel=”preload” staan. Hiermee geef je prioriteit om deze extra files vooraf te laden. Dit moet dus in elke regel staan.

Als je dit hebt gedaan en opnieuw de website test voor pagespeed zal je zien dat de meldingen zijn verdwenen en je score omhoog is gegaan.