Hoe kan ik Render-blokkerende bronnen elimineren in HTML [2024] 💥
Allereerst, als je een Wordpress-website hebt, is deze tutorial niet voor jou, maar deze voor Wordpress-websites. Oké, om Render-Blocking Resources voor een HTML-website te elimineren, moeten we de Javacript uitstellen en de CSS inline maken. Voor een HTML-website is dit een vrij gemakkelijke taak.
Advertisement
1. Render-blokkerende bronnen JS elimineren
Om het Javascript uit te stellen, gebruiken we de onderstaande code. Uw HTML-websites hebben waarschijnlijk een map met de naam "js" met daarin een script met de naam scripts.js. Als de map met uw Javascript anders is of het bestand een andere naam heeft, moet u dat in de code aanpassen.
<script src="js/scripts.js" defer="defer"></script>De code moet net boven je </body>-tag worden geplaatst, zoals hieronder wordt weergegeven. Overigens kun je het beste hetzelfde doen voor al je scripts, zoals ook te zien is in de screenshot. NIET alle scripts hoeven echter te worden uitgesteld!
2. Eliminate Render-Blocking Resources CSS
Het tweede wat we gaan doen is alle CSS direct op je HTML-pagina's plaatsen. Dit betekent dat u door de map met de bestanden voor uw website moet gaan. Kopieer de inhoud van deze bestanden en plaats deze net onder je metatags op de pagina, tussen <style> en </style>. Om de website nog sneller te maken kun je het beste de CSS comprimeren voordat je deze op de pagina plaatst. De beste tool om dit te doen is CSS Compressor.
Bekijk de onderstaande schermafbeelding om te zien wat het idee is. Overigens kan de inhoud van alle CSS-bestanden in slechts één bestand worden gecombineerd om uw site nog sneller te maken. Een negatief effect hiervan is dat het een soort rommel creëert en als je op een dag wijzigingen in je CSS moet aanbrengen, zal dit de zaken ingewikkelder maken. De keuze is aan jou.
Hetzelfde moet worden gedaan voor uw lettertypebestanden, zoals weergegeven in de onderstaande schermafbeelding. De inhoud voor uw lettertypen is gemakkelijk te vinden in Google Fonts. Net als bij de CSS plaats je de font-content tussen <style> en </style> op dezelfde locatie als de CSS. Vergeet niet alle links naar fonts en CSS op te schonen die nu niet meer nodig zijn!
Het mag duidelijk zijn dat elke afzonderlijke pagina van uw website deze behandeling zou moeten krijgen.
Advertisement