Verklein JavaScript
In de Google pagespeed test is het mogelijk dat men de melding “Verklein JavaScript” te zien krijg als aanbeveling voor verbetering van page speed. Het verbeteren van page speed wordt steeds belangrijker want mobiele telefoons hebben vaak een minder snelle internetverbinding. En de mobiele telefoon worden steeds populairder en het is daarom belangrijk om hier rekening mee te houden.
Er wordt ook steeds meer Javascript gebruikt op website. Niet alleen voor animaties, sliders en dergelijke maar ook voor veel andere zaken. Dit zijn er tegenwoordig al te veel om op te noemen. Voor websites in Joomla of WordPress worden ook veel plugins gebruikt. Deze plugins hebben bijna allemaal hun eigen Javascript bestand. Dit maakt het daarom steeds belangrijk om dit ale maal zo klein mogelijk te maken om de website sneller te kunnen laden.
Ten eerste moet men altijd proberen om zo min mogelijk te laden en alleen te laden wat echt nodig is. Probeer dan ook om bestanden alleen te laden op pagina’s waar het nodig is en anders niet. Verwijder bestanden die niet nodig zijn of probeer ze samen te voegen. Dit is niet wat we hier gaan behandelen maar hier gaan bekijken hoe we de Javascript kunnen verkleinen.
Alles is bedoeld om de website zo snel mogelijk te laden en de bezoeker een zo goed mogelijke bezoekerservaring te bieden.
Verklein JavaScript
Net als bij het verkleinen van CSS is het belangrijk om ook bij JavaScript alle onnodige teksten, spaties en enters te verwijderen. Door deze te verwijderen worden de bestanden kleiner en kost het minder bandbreedte om deze te laden.
Hier als voorbeeld gebruiken we een scroll-top functie voor scrol top button.
jQuery(document).ready(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 100) {
jQuery('#btn-scroll-top').fadeIn();
} else {
jQuery('#btn-scroll-top').fadeOut();
}
});
jQuery('#btn-scroll-top').click(function () {
jQuery("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
});
Als we deze code verkleinen door alle onnodige tekst, spaties en enters te verwijder, ziet het er als volgt uit:
jQuery(document).ready(function(){jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>100){jQuery('#btn-scroll-top').fadeIn()}else{jQuery('#btn-scroll-top').fadeOut()}});jQuery('#btn-scroll-top').click(function(){jQuery("html, body").animate({scrollTop:0},600);return false})});
Het is mogelijk om dit geheel handmatig te veranderen maar dat is heel veel werk in de meeste gevallen. Hier kan het dus handig zijn als we dit op een andere, snellere, manier kunnen doen. Dan kan men zich meer concentreren op belangrijkere zaken die meer aandacht nodig hebben. En er zijn verschillende manier om dit te doen. Het an online gedaan worden maar ook met PHP.
Online JavaScript verkleinen
Verklein JavaScript online voor kleine en grote file. Dit kan je doen voor JavaScript bestanden maar ook voor inline scripts. Om JavaScript online te verkleinen kan je gebruik maken van JavaScript and CSS minifier of Minify JavaScript.
Beide kunnen ook CSS verkleinen en werken heel eenvoudig. Plaats je JavaScript, selecteer JS of CSS en klik op de knop. Daarna kan je de verkleinde JavaScript kopiëren en in je bestand plaatsen.
Verklein JavaScript met PHP
Het is niet echt aangeraden om dit te gebruiken voor een website omdat hiermee iedere keer opnieuw het JavaScript moet verkleinen. Dit zou alleen interessant zijn al er vaak zaken veranderd wordt aan het JavaScript en men de mooie overzichtelijk versie nodig heeft om ermee te werken.
Toch is het belangrijk om dit te bespreken en te laten zien hoe je JavaScript kan verkleinen met PHP.
De PHP functie:
<?php
// Minify JavaScript
function my-mini-javascript($js){
return preg_replace(array("/\s+\n/", "/\n\s+/", "/ +/"), array("\n", "\n ", " "), $js);
}
?>
Het beste is om dit te gebruiken onder de footer, net voor </body<. Voor page speed is het belangrijk dit zo laat mogelijk te laden. Hier zou dan het volgende kunnen gebruiken om de verkleinde JavaScript te plaatsen.
<?php
echo '<script type="text/javascript">'.my-mini-javascript($custom_js).'</script>';
?>
Hier is $custom_js het JavaScript dat verkleind moet worden.
Vraag vrijblijvende een offerte aan.
Page speed en Web Vitals
JavaScript verkleinen heeft voor Page speed en Web Vitals in vloed op FCP (First Contentful Paint) en LCP (Largest Contentful Paint). Deze bepalen samen 35% van de page speed score. Hier gaat het voornamelijk on de laadtijd van de website. Dit heeft uiteindelijk ook invloed op SEO uiterlijk.
Alles is bedoeld om de website zo snel mogelijk te laden en de bezoeker een zo goed mogelijke bezoekerservaring te bieden. Daarom is het belangrijk om hier nog iets dieper in te gaan op JavaScript en page speed.
Er worden vaak te veel JavaScript bestanden geladen. Probeer dit zo veel mogelijk te beperken. Zie bijvoorbeeld Beperk niet-gebruikt JavaScript voor meer informatie.
Het kan handig zijn om alle JavaScript bestanden samen te voegen en deze als 1 bestand te laden. Dit heeft ook weer voordelen voor page speed. Nadeel is dat het een groot bestand kan worden wat voor vertraging kan zorgen. Belangrijk is ook dat op een pagina alleen wordt geladen dat nodig is op die pagina. Op deze manier is het moeilijk hier onderscheid in te maken.
Slechte ontwikkelaars gebruiken WP autoptimize die dit automatisch doet. Met alle nadelige gevolgen van dien. Het is veel beter om zo veel mogelijk te beperken. Begin bij WordPress met het beperken van het aantal plugin dat gebruikt worden. Verwijder wat niet nodig is en ook wat je eventueel zou kunnen missen op de website.
Het is ook mogelijk om JavaScript inline te plaatsen en dus om geen bestanden te laden. Dit is ook weer handig want de browser kan het pas gebruiken als het volledig is geladen en dit hangt vaak weer af van andere bestanden die geladen moeten. Vergeet alleen niet om dit onder de footer te plaatsen net voor </body<. Het is dan makkelijker om dynamisch te bepalen wat wel en niet geladen wordt.
Er zijn nog geen reacties. Wees de eerste..!!