Performance pagina's verbeteren door slim om te gaan met elementen
Als ik een website open en het duurt te lang voordat ik deze kan gebruiken, dan ben ik meestal al weer weg. En ik ben niet de enige. Dit geldt voor de desktop, maar met name mobiel. Trage websites verlagen de conversies aanzienlijk en wil je als bedrijf dus vermijden.
De traagheid kan een aantal mogelijke oorzaken hebben: je internetverbinding is traag, de webserver is niet snel genoeg of er worden heel veel resources ingeladen, die eerst allemaal gedownload moeten worden. Sigma Solutions heeft hier een aantal oplossingen voor: Content Delivery Network, het bundelen van resources en adaptive of responsive images.
Bovenstaande heeft allemaal te maken met data en de snelheid waarmee het wordt gedownload, maar er zijn ook veel optimalisaties te behalen wanneer alle data binnen is. Gedurende het ophalen van de data en erna, bouwt de browser de webpagina op:
- HTML wordt ingelezen en op basis daarvan worden elementen op de webpagina geplaatst.
- Afbeeldingen worden gedownload en getoond op de aangewezen plekken.
- Stylesheets worden ingeladen en toegepast op de elementen.
- Javascript wordt uitgevoerd en past mogelijk elementen aan.
Al deze bewerkingen kosten tijd. Hoe minder bewerkingen, hoe beter of liever nog: zo efficiënt mogelijk. Dit geldt voor alle browsers. Chrome heeft als developer tool handige functionaliteit om te zien en te controleren wat er nou gebeurt bij het opbouwen van een webpagina: Open de console (F12), ga naar performance en klik op ‘start profiling and reload page’.
Als voorbeeld heb ik een eenvoudige website:
<!doctype html>
<html>
<head>
<title>
Voorbeeld
</title>
</head>
<body>
<h1>Koptekst</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus cursus est ac placerat. Sed maximus ac massa sed mollis. Aliquam erat volutpat. Integer tristique massa laoreet arcu tempus, dictum imperdiet neque ornare. Phasellus dapibus elementum metus sed rutrum. Fusce porttitor lectus interdum malesuada bibendum. Aliquam pharetra nisi justo, vel euismod nisi dapibus et. Quisque sodales sem eu placerat blandit. Fusce et sapien eget ante tristique mollis id at orci. Nam pretium diam eu dui gravida elementum. Etiam tincidunt, nunc eget tempor rutrum, felis justo maximus lorem, vitae consectetur nisi magna ac libero.</p>
</body>
</html>De browser toont het volgende:
Als ik deze pagina profile, zie ik:
Niet verkeerd, het staat er allemaal behoorlijk snel, maar dat is logisch, want er zijn weinig elementen en geen afbeeldingen of andere externe afhankelijkheden.
Laten we nu eens een afbeelding toevoegen. Ik gebruik een relatief kleine afbeelding van 800Kb en laad deze in vanaf mijn eigen computer, dus dat gaat nog steeds erg snel, maar om een langzame verbinding te simuleren, gebruik ik de console van Chrome om mijn verbinding te limiteren:
Onder de koptekst plaats ik nu een afbeelding en ik herlaad de pagina:
<h1>Koptekst</h1>
<img src="//static.accessify.cloud/img/medium-afbeelding.png" />In het Performance-panel kan je niet alleen de laadtijden zien, maar worden er ook frames getoond met tijdelijke screenshots van de pagina. Ik zie eerst de tekst, deze verspringt daarna naar beneden en na een tijdje is de afbeelding ingeladen.
Dat is sowieso al erg onrustig. Het onrustige is te verhelpen door width en height mee te geven aan de IMG-tag.
Wat je in dit geval echter ook doet, is dat de tekst al op de juiste plaats staat. Het hoeft na het inladen van de afbeelding niet meer verplaatst te worden en de tekst hoeft dus ook niet meer opnieuw gerendered te worden. In deze opstelling is het verschil verwaarloosbaar, want als ik naar Event Log ga en kies voor Rendering en Painting, dan zie ik dat er één Layout-activiteit bij is gekomen met een duur van 0,2ms. Maar bij complexe pagina’s en meer elementen en resources, gaat dit op een gegeven moment tellen.
Het toepassen van CSS zorgt er ook voor dat de pagina opnieuw berekend en getekend moet worden. Tevens zijn er Javascript-libraries die styling toepassen wanneer ze volledig ingeladen zijn, bijvoorbeeld jQuery-tabs. Dit kan op complexe pagina’s weer voor een onrustig effect zorgen.
Ik verwijder de afbeelding nu weer, maar plaats er een referentie naar jQuery in. Ook maak ik snel een een eenvoudig tabmenu. Ik wacht af tot jQuery is ingeladen en pas dan enkele opmaakregels toe:
<!doctype html>
<html>
<head>
<title>
Voorbeeld
</title>
<style>
.ui-tabs{
width: 100%;
height: 30px;
background-color: black;
}
.ui-tabs a{
color: white;
}
.ui-tabs li{
float: left;
}
p{
clear: both;
}
</style>
</head>
<body>
<h1>Koptekst</h1>
<ul>
<li><a href="#algemeen">Algemeen</a></li>
<li><a href="#bestanden">Bestanden</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras luctus cursus est ac placerat. Sed maximus ac massa sed mollis. Aliquam erat volutpat. Integer tristique massa laoreet arcu tempus, dictum imperdiet neque ornare. Phasellus dapibus elementum metus sed rutrum. Fusce porttitor lectus interdum malesuada bibendum. Aliquam pharetra nisi justo, vel euismod nisi dapibus et. Quisque sodales sem eu placerat blandit. Fusce et sapien eget ante tristique mollis id at orci. Nam pretium diam eu dui gravida elementum. Etiam tincidunt, nunc eget tempor rutrum, felis justo maximus lorem, vitae consectetur nisi magna ac libero.</p>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$('ul').addClass('ui-tabs');
});
</script>
</body>
</html>Ik zie weer content verschuiven en het oogt weer erg onrustig.
In zo’n geval kan je ervoor kiezen om de styling die wordt toegepast door Javascript alvast zelf te te passen door de juiste classname in de elementen te plaatsen, zodat het minder onrustig wordt en de browser wederom minder berekeningen hoeft uit te voeren: <ul class="ui-tabs">.
Mocht je kortom ervaren dat je website onrustig oogt of ondanks andere verbeteringen toch nog langzaam lijkt, kijk dan eens in het Performance-tabje om de opbouw van je pagina te analyseren. Het is weinig moeite, maar levert veel resultaat op!
