Hoe kunt u ervoor zorgen dat uw bezoekers uw links onmiddellijk kunnen laden? Je hebt een technologie nodig die link loading heet. Die laadt uw links automatisch voor, zodat uw bezoeker de inhoud ziet zodra hij erop klikt. Het doel van deze post is om instructies te geven over hoe je preload links kunt toevoegen aan WordPress blogs.
Het doel van dit bericht is om een gedetailleerde uitleg te geven over hoe je links in WordPress kunt voorladen.
Inhoud
SchakelWaarom links vooraf laden in WordPress?
Het is mogelijk om de browser zo in te stellen dat de link vooraf op de achtergrond wordt geladen om het laden te versnellen. De bezoeker ziet de link al geladen wanneer hij op de link klikt. Als een bezoeker alles snel vindt op je website, is de kans groot dat hij erop blijft. Dit levert je dus aanzienlijke SEO-voordelen op.
Als uw interne pagina's voorgeladen zijn, is de kans groter dat bezoekers langer op uw website blijven en meer pagina's bekijken omdat uw website sneller is. Daarom kunt u uw WordPress SEO verbeteren door de snelheid van uw website te verhogen.
Hoewel er veel dingen zijn die u kunt doen om uw WordPress website sneller te maken, is link preloading een van de gemakkelijkste dingen die u kunt doen, en het kan een grote hulp zijn voor de snelheid van uw website.
Maar als je preloading op de juiste manier wilt instellen, moet je ervoor zorgen dat je een aantal veelvoorkomende fouten vermijdt. Zo kunnen te agressieve instellingen en het vooraf laden van al je interne links een averechts effect hebben en er zelfs voor zorgen dat je server crasht.
Hoe vooraf links laden in WordPress: Flying Pages Plugin gebruiken
Het eerste wat je moet doen is de plugin Flying Pages downloaden en installeren in je WordPress dashboard.
Navigeer nu vanuit je WordPress dashboard naar Instellingen -> Vliegende pagina's en selecteer de optie Vliegende pagina's. Controleer de configuratie van de plugin onder het tabblad Instellingen, en als er wijzigingen moeten worden aangebracht, doe dat dan.
De eerste optie die u te zien krijgt is 'Vertraging om het voorladen te starten'. Standaard heeft deze optie een waarde van 0, maar u hebt wel de mogelijkheid om dit te veranderen, maar wij stellen voor om het te houden zoals het is. Als u het getal verhoogt, zal de start van het proces vertraging oplopen.
Bijgevolg moet u het maximum aantal aanvragen per seconde kiezen, want hoe lager het aantal, hoe minder impact dit zal hebben op uw server. De standaardwaarde is aanvaardbaar zolang u geen uitgebreide website hebt met een groot aantal bezoekers tegelijk.
Het is aan u of u de andere instellingen laat zoals ze zijn of dat u ze wijzigt volgens uw wensen. Vergeet niet op de knop Wijzigingen opslaan te drukken aan het einde van het proces, zodat uw wijzigingen worden opgeslagen.
Hoe sleutelaanvragen vooraf laden: Lettertypen, JS & CSS
Het vooraf laden van bronnen is een techniek die kan worden gebruikt om de prestaties van uw webpagina te verbeteren. Door belangrijke aanvragen vooraf te laden, kunt u ervoor zorgen dat de benodigde bronnen beschikbaar zijn wanneer de gebruiker ze nodig heeft. CSS, JS en fonts zijn allemaal voorbeelden van bronnen die vooraf geladen kunnen worden. Om CSS voor te laden, kunt u de @font-face regel gebruiken. Voor JavaScript kun je de PreloadJS bibliotheek gebruiken. En voor lettertypen kunt u Font Awesome of Google Fonts gebruiken.
HoeCSSvooraf laden
Hier is een syntaxis om belangrijke verzoeken van CSS-bestanden vooraf te laden:
<link rel=”preload” href=”style.css” as=”style”>
JS vooraf laden
Dit is een syntaxis om belangrijke verzoeken van JavaScript-bestanden vooraf te laden:
<link rel=”preload” href=”main.js” as=”script”>
Lettertypen vooraf laden
De syntaxis voor het vooraf laden van sleutelaanvragen van lettertypebestanden is als volgt:
<link rel=”preload” href=”font.woff2″ as=”font” type=”font/woff2″ crossorigin>
Google lettertypen
Hieronder staat een syntaxis om sleutelaanvragen van Google font 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 je zult zien in de waarschuwing preload key requests van Google PageSpeed Insights.
De bovenstaande methoden kunnen helpen om de waarschuwing preload key requests van Google PageSpeed Insights te verhelpen. U kunt deze methoden toepassen op elke website.
Samenvatting: Vooraf laden van lettertypes
<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>
Sleutelaanvragen vooraf laden met behulp van WordPress Plugins
U kunt preload key requests in WordPress door gebruik te maken van preload key requests WordPress plugins zoals de Pre* Party Resource Hints, Autoptimize, WP Rocket, en Asset CleanUp etc. Deze Plugins zullen helpen om de preload key requests WordPress waarschuwing op te lossen.
Hier zijn de populairste plugins met de preload key requests functie.
Pre* Party Hulpmiddelen Hints
Pre* Party Resource Hints is een van de beste plugins die u veel controle geeft en de mogelijkheid om kritieke middelen toe te voegen die u visueel voorgeladen wilt hebben.
Installeer & activeer deze plugin op je WordPress site, ga dan naar het Pre* Party menu vanuit je WordPress dashboard. Daar vindt u het volgende scherm.
Je ziet het vakje Add New Resource Hint op de plugin-instellingen in het tabblad Insert Hints. Om een asset voor te laden, ga je naar het PageSpeed Insights rapport om de waarschuwing preload key requests te vinden.
WP Rocket
Preload key requests is een geweldige manier om de prestaties van je WordPress site te verbeteren. WP Rocket is een populaire plugin die je hierbij kan helpen. Het is gemakkelijk te gebruiken en heeft veel functies die u kunnen helpen de prestaties van uw site te verbeteren.
Ga naar Instellingen > WP Rocket > Preload vanuit je WordPress dashboard om belangrijke aanvragen in WordPress voor te laden met behulp van de WP Rocket plugin. Scroll vervolgens naar beneden, waar je de sectie Preload Fonts ziet.
Automatisch optimaliseren
Als u de prestaties van uw WordPress site wilt verbeteren, is een van de eerste dingen die u moet doen het installeren van de Autoptimize plugin. Autoptimize versnelt uw website door uw CSS- en JavaScript-bestanden te optimaliseren. Het minimaliseert ook HTML en slaat uw pagina's in de cache op, waardoor ze sneller worden geladen voor terugkerende bezoekers. Een van de meest populaire functies is de preload key requests optie voor WordPress sites.
Ga in je WordPress dashboard naar Instellingen > Autoptimize > Extra om belangrijke verzoeken met Autoptimiz voor te laden. Het enige wat je hoeft te doen is de links op tha box invoeren die je hebt gekregen van de preload key requests waarschuwing in PageSpeed Insights. Zorg ervoor dat u meerdere links scheidt met komma's.
Perfmatters
Deze premium plugin geeft preload, preconnect en prefetch opties. U kunt deze controleren in de Perfmatters Instellingen→Extra's→Preload.
Het vooraf laden van links & verzoeken op uw website is nu met succes ingeschakeld.
U kunt meer artikelen als deze vinden bij Seahawk Media.