Hoe zorg je ervoor dat je bezoekers je links direct kunnen laden? Je hebt een technologie nodig die linkladen heet. Deze technologie laadt je links automatisch vooraf, zodat je bezoekers de inhoud direct kunnen zien zodra ze erop klikken. In dit artikel leggen we uit hoe je vooraf geladen links aan je WordPress-blog kunt toevoegen.
Het doel van dit bericht is om gedetailleerd uit te leggen hoe je links in WordPress kunt preloaden.
Waarom links vooraf laden in WordPress?
Het is mogelijk om de browser zo in te stellen dat de link op de achtergrond wordt voorgeladen om de laadtijden te versnellen. De bezoeker ziet de link dan al geladen wanneer hij erop klikt. Wanneer een bezoeker alles snel op uw website vindt, is de kans groter dat hij er langer blijft. Dit levert u aanzienlijke SEO-voordelen op.
Als uw interne pagina's vooraf worden geladen, is de kans groter dat bezoekers langer op uw website blijven en meer pagina's bekijken, omdat uw website sneller laadt. U kunt uw WordPress SEO door de snelheid van uw website te verhogen.
Hoewel er veel manieren zijn om je WordPress-website sneller te maken, is het vooraf laden van links een van de eenvoudigste oplossingen en kan het de snelheid van je website aanzienlijk verbeteren.
Als je preloading op de juiste manier wilt instellen, moet je wel een aantal veelvoorkomende fouten. Zo kan het instellen van te agressieve parameters, zoals het vooraf laden van al je interne links, het tegenovergestelde effect hebben en zelfs leiden tot een servercrash.
Links vooraf laden in WordPress: met de Flying Pages-plugin
De eerste stap is het downloaden van de plugin Flying Pages en deze te installeren in je WordPress-dashboard.
Ga nu vanuit je WordPress-dashboard naar Instellingen -> Vliegende pagina's en selecteer de optie Vliegende pagina's. Controleer de pluginconfiguratie onder het tabblad Instellingen en breng indien nodig wijzigingen aan.
De eerste optie die u te zien krijgt, is 'Vertraging bij het starten van het voorladen'. Deze optie heeft standaard een waarde van 0, maar u kunt deze wijzigen. We raden echter aan om de waarde zo te laten. Het verhogen van de waarde zal de start van het proces vertragen.
Daarom moet u het maximale aantal verzoeken per seconde kiezen, want hoe lager dit aantal, hoe minder impact dit op uw server heeft. De standaardwaarde is acceptabel zolang u geen uitgebreide website met een groot aantal bezoekers tegelijk hebt.
Je kunt zelf kiezen of je de andere instellingen zo laat of ze aanpast aan je eigen wensen. Vergeet niet op de knop 'Wijzigingen opslaan' te klikken als je klaar bent, zodat je wijzigingen worden opgeslagen.
Hoe je belangrijke verzoeken vooraf laadt: lettertypen, JavaScript en CSS
Het vooraf laden van resources is een techniek die de prestaties van uw webpagina kan verbeteren. Door belangrijke verzoeken vooraf te laden, zorgt u ervoor dat de benodigde resources beschikbaar zijn wanneer de gebruiker ze nodig heeft. CSS, JavaScript en lettertypen zijn allemaal voorbeelden van resources die vooraf geladen kunnen worden. Om CSS vooraf te laden, kunt u de `@font-face` regel gebruiken. Voor JavaScript kunt u de `PreloadJS` bibliotheek gebruiken. En voor lettertypen kunt u `Font Awesome` of `Google Fonts` gebruiken.
Hoe je een preloadenCSS
Hier volgt een syntax om belangrijke verzoeken voor CSS-bestanden vooraf te laden:
<link rel=”preload” href=”style.css” as=”style”>
JS vooraf laden
Dit is een syntax om belangrijke verzoeken in JavaScript-bestanden vooraf te laden:
<link rel=”preload” href=”main.js” as=”script”>
Vooraf laden van lettertypen
De syntax voor het vooraf laden van toetsaanvragen voor lettertypebestanden ziet er als volgt uit:
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
Google Fonts
Hieronder staat een syntax om belangrijke verzoeken voor Google-lettertypen vooraf te laden:
<link rel=”preload” href=”https://fonts.googleapis.com/css2?family=Roboto&display=swap” as=”style” crossorigin>
Font Awesome
Dit is een syntax om belangrijke verzoeken van Font Awesome vooraf te laden:
<link rel=”preload” href=”/wp-content/theme/fonts/fontawesome-Webfont.woff2” as=”font” crossorigin>
Dit zijn de meest voorkomende bestandstypen die u zult zien in de waarschuwing over preload-sleutelverzoeken van Google PageSpeed Insights.
Bovenstaande methoden kunnen helpen bij het oplossen van de waarschuwing van Google PageSpeed Insights over het vooraf laden van belangrijke verzoeken. U kunt deze methoden op elke website toepassen.
Samenvatting: Lettertypen vooraf laden
<link rel=’preload’ href=’/image.png’ as=’image’>
<link rel=’preload’ href=’/style.css’ as=’style’>
<link rel=’preload’ href=’/script.js’ as=’script’>
<link rel=’preload’ href=’/font.woff2′ as=’font’ crossorigin>
Sleutelverzoeken vooraf laden met behulp van WordPress-plugins
Je kunt sleutelverzoeken in WordPress vooraf laden met behulp van WordPress-plugins zoals Pre*Party Resource Hints, Autoptimize, WP Rocket en Asset CleanUp . Deze plugins helpen de WordPress-waarschuwing voor vooraf geladen sleutelverzoeken op te lossen.
Hieronder vind je de populairste plugins met de functie voor het vooraf laden van sleutelverzoeken.
Tips voor de voorbereiding op het feest
Pre* Party Resource Hints is een van de beste plugins die je veel controle geeft en waarmee je belangrijke resources visueel kunt weergeven voordat ze geladen worden.
Installeer en activeer deze plugin op je WordPress-site en ga vervolgens naar het menu 'Pre* Party' in je WordPress-dashboard. Daar zie je het volgende scherm.
Je ziet het vakje 'Nieuwe resource-hint toevoegen' in de plugininstellingen op het tabblad 'Hints invoegen'. Om een asset vooraf te laden, ga je naar het PageSpeed Insights-rapport en zoek je de waarschuwing over het vooraf laden van belangrijke verzoeken.
WP Rocket
Het vooraf laden van belangrijke verzoeken is een uitstekende manier om de prestaties van je WordPress-website te verbeteren. WP Rocket is een populaire plugin die je hierbij kan helpen. De plugin is gebruiksvriendelijk en beschikt over vele functies die de prestaties van je website kunnen optimaliseren.
Ga in je WordPress-dashboard naar Instellingen > WP Rocket > Voorladen om belangrijke lettertypeverzoeken in WordPress vooraf te laden met de WP Rocket-plugin. Scroll vervolgens naar beneden, naar het gedeelte 'Lettertypen vooraf laden'.
Autoptimize
Als je de prestaties van je WordPress-site wilt verbeteren, is het installeren van de Autoptimize-plugin een van de eerste stappen. Autoptimize versnelt je website door je CSS- en JavaScript-bestanden te optimaliseren. Het minimaliseert ook HTML en cachet je pagina's, waardoor ze sneller laden voor terugkerende bezoekers. Een van de populairste functies is de optie om belangrijke verzoeken vooraf te laden voor WordPress-sites.
Ga vanuit je WordPress-dashboard naar Instellingen > Autoptimiz > Extra om belangrijke verzoeken vooraf te laden met Autoptimiz. Je hoeft alleen de links in te voeren die je hebt gekregen bij de waarschuwing over het vooraf laden van belangrijke verzoeken in PageSpeed Insights. Zorg ervoor dat je meerdere links scheidt met komma's.
Prestaties zijn belangrijk
Deze premium plugin biedt opties voor preload, preconnect en prefetch. Je kunt deze opties controleren in de Perfmatters-instellingen → Extra's → Preloading.
Het vooraf laden van links en verzoeken op uw website is nu succesvol ingeschakeld.
Meer artikelen zoals dit vind je op Seahawk Media.
