Performance pagina's verbeteren door slim om te gaan met elementen

Geschreven door: op maandag 30 september 2019

Leestijd:

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:

  1. HTML wordt ingelezen en op basis daarvan worden elementen op de webpagina geplaatst.
  2. Afbeeldingen worden gedownload en getoond op de aangewezen plekken.
  3. Stylesheets worden ingeladen en toegepast op de elementen.
  4. 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:

voorbeeld-pagina-1.png

Als ik deze pagina profile, zie ik:

voorbeeld-pagina-2.png

 

 

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:

network.png

Onder de koptekst plaats ik nu een afbeelding en ik herlaad de pagina:

<h1>Koptekst</h1>
<img src="/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.

paint1.png

Dat is sowieso al erg onrustig. Het onrustige is te verhelpen door width en height mee te geven aan de IMG-tag.

paint-2.png

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.

paint-3.png

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.

paint-4.png

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">.

paint-5.png

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!

 

 

 

 

 

 

 

 

 


Andere blogartikelen

  • Het gebruik van een Photoslider

    Geschreven door: op maandag 7 oktober 2019

    Ze zijn er in alle soorten en maten en staan meestal bovenaan een websitepagina. Dan heb ik het natuurlijk over photosliders. Zo bent u vast bekend met de traditionele foto die langzaam vervaagd en wa ...

    Bekijk het artikel »
  • De Controversie van AMP (Accelerated Mobile Pages)

    Geschreven door: op maandag 30 september 2019

    Er heerst al controversie rondom AMP (Accelerated Mobile Pages) sinds Google dit onderwerp heeft ingevoerd! In deze blog duiken we verder in deze controversie en ontdekken we of deze controversie tere ...

    Bekijk het artikel »
  • CSS attribuut font-display

    Geschreven door: op maandag 30 september 2019

    De snelheid van je website is belangrijk. Niet alleen omdat Google je website hierdoor hoger rankt maar ook omdat het gebruiksvriendelijker is voor de bezoekers. Als een website traag laadt, ben je ee ...

    Bekijk het artikel »
Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten