Wat is het Document Object Model (DOM)?

Wat is het Document Object Model (DOM)

Je kunt de DOM zien als de stappen die de browser neemt nadat hij het HTML-document heeft ontvangen om de pagina te renderen.
De eerste informatie die de browser ontvangt, is het HTML-document. Hierna begint het de inhoud van dit document te ontleden en extra bronnen op te halen, zoals  afbeeldingen, CSS- en JavaScript-bestanden. De DOM is wat wordt gevormd door deze ontleding van informatie en bronnen. Men kan het beschouwen als een gestructureerde, georganiseerde versie van de code van de webpagina.

DOM model

By Birger Eriksson – Own work, CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=18034500

Tegenwoordig is de DOM vaak heel anders dan het oorspronkelijke HTML-document, vanwege wat gezamenlijk dynamische HTML wordt genoemd. Dynamische HTML geeft de mogelijkheid de inhoud van een pagina te wijzigen afhankelijk van gebruikersinvoer, omgevingscondities (bijvoorbeeld de tijd van de dag) en andere variabelen, gebruikmakend van HTML, CSS en JavaScript

De DOM is wat u ziet wanneer je “Inspecteren” of “Element Inspecteren” in je browser aanklikt

 

De impact van een WP Lazy Load Plugin op SEO

De impact van een WP Lazy Load Plugin op SEO

Lazy loading bad for SEOIn deze posting wil ik ingaan op de impact van de Lazy Load-plugin als onderdeel van de optimalisatie van je websitesnelheid in WordPress. Dit soort plugins zijn GRATIS te verkrijgen in de WordPress Plugin Library  en zijn heel eenvoudig te installeren. Helaas zul je slechts stapsgewijs een snelheidsverbetering behalen maar loop je wel het risico dat je negatieve SEO-impact toevoegt aan je site.

Lazy Loading? Wat is het?

Lazy loading verbetert de prestaties van je website door het laden van afbeeldingen op grote webpagina’s te vertragen. Afbeeldingen buiten de viewport (het zichtbare deel van de webpagina) worden pas geladen als de gebruiker ernaartoe scrolt. Gemiddeld bestaat een webpagina voor ​​80% van zijn “gewicht” uit afbeeldingsbestanden. Lazy Loading zal dan ook het formaat van je webpagina absoluut verkleinen waardoor de pagina sneller door de eindgebruiker kan worden ingeladen.Lazy Load en viewport

Hoe werkt zo’n Lazy Load plugin?

Lazy Load werkt met behulp van Javascript door het invullen van het src (bron) attribuut van img-tags wanneer het afbeeldingsgebied de viewport binnengaat. Het src-kenmerk in img html-element wordt standaard leeg gelaten (geen afbeeldings-URL) en anders gevuld met een laadafbeelding (kleiner formaat, als tijdelijke aanduiding). Zodra de gebruiker naar deze content inhoud scrolt, wordt het attribuut src gevuld met de URL van de originele afbeeldingen en weergegeven in de viewport van de gebruiker.

Waarom geeft Lazy Loading negatieve SEO?

Robots van zoekmachines crawlen src attribuut in img-element in het Document Object Model (DOM) van je webpagina. Omdat Lazy Load de originele afbeeldings-URL binnen data-img-src houdt totdat de viewport van de gebruiker het afbeeldingsgebied binnengaat, kan Lazy Load een negatieve SEO-impact hebben. De afbeeldingen worden in dat geval niet gecrawld door zoekmachines en zijn daar dus ook niet te vinden.

Als afbeeldingen met een Lazy Load-plugin niet worden niet gecrawld door zoekmachines zijn ze niet in de zoekresultaten te vinden.

Hoe kun je deze negatieve SEO-impact van Lazy Load vermijden, terwijl je pagina’s toch sneller worden geladen? De beste oplossing om negatieve SEO-impact te verwijderen, is in het script het img src-kenmerk toe te wijzen aan de oorspronkelijke URL. Bij gebruik van zo’n Lazy Load script, is het verstandig om zelf even te controleren of de plugin die jij gebruikt het gewenste resultaat op levert, niet alleen qua snelheid van je website, maar ook qua impact op je SEO.

Hoe weet je zeker dat Google en andere zoekmachines je content kunnen zien?

In 2015 al heeft Google bevestigd dat zij Javascript kan crawlen en dat zij de Document Object Model (DOM) gebruikt om websites uit te lezen. De kans is daarom groot dat de inhoud van je website wordt geladen door Google als je deze zelf ook in de DOM kunt herkennen.  Om je er van te verzekeren dat je complete pagina wordt ingeladen door de zoekmachines, kun je de volgende tests overwegen:

  • Controleer of de inhoud wordt weergegeven in de DOM.
  • Test een subset van pagina’s om te zien of Google inhoud kan indexeren.
  • Controleer handmatig citaten uit uw inhoud.
  • Fetch met Google in Google Search Console (GSC) en kijk of de inhoud wordt weergegeven. Fetch met Google gebeurt zogenaamd rond de load-gebeurtenis of vóór time-out. Het is een goede test om te controleren of Google uw inhoud kan zien en of JavaScript in uw robots.txt wordt geblokkeerd. Hoewel Fetch met Google niet waterdicht is, is het een goed startpunt.

Mocht dit je allemaal teveel werk zijn, of je weet niet goed hoe je dit aan moet pakken, houd je dan vast aan de stelregel: Content is King

Het is natuurlijk het allermooiste als je een website hebt die razendsnel laadt en SEO-vriendelijk is. Zeker ook omdat snelheid ook een onderdeel is van het Google algoritme. Deze focus op snelheid is met de Google Mobile First Indexing alleen nog maar groter geworden. Maar als je toch een keuze moet maken tussen zoekmachine optimalisatie door content of door snelheid, kies dan altijd voor content. Het is de content op je website die bepaald of je gevonden wordt.

The need for speed

(http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia CommonsSnelheid als rankingfactor

Inmiddels is iedereen er wel van overtuigd dat websites niet alleen geschikt moeten zijn voor verschillende mobiele apparaten qua layout (responsive) en snelheid. Toch is bepaald niet iedereen doordrongen van het belang ervan; vrijwel geen enkele site scoort op alle onderdelen van de Google snelheidstest een voldoende. Dit zal op korte termijn wel eens vervelende gevolgen kunnen gaan hebben. Google neemt deze criteria namelijk wel serieus.

Ongetwijfeld blijkt uit één van Google’s vele onderzoeken dat sneller ladende websites beter zijn voor Google’s gebruikers. Misschien blijkt uit Google Analytics meta data ook wel dat snellere website beter converteren.
Maar wat betekent snelheid van een website in de praktijk? Er kan natuurlijk maar één manier zijn om naar snelheid te kijken; vanuit het perspectief van de gebruiker. Helaas is dit nog niet de manier waarop de meeste websites gebouwd worden.  De meeste webdevelopers zijn tevreden als de site mooi responsive is en rond de seconde laadtijd zit en daar blijft het meestal bij. Maar dat is vanaf nu niet meer genoeg!

Omdat er  nogal wat factoren zijn die de snelheid van een website beïnvloeden, is het ook geen eenvoudige klus om je site hierop aan te passen. Ik denk hierbij onder andere aan:

  • De bestandsgrote van alle documenten, afbeeldingen, scripts etc
  • Het aantal requests dat verstuurd wordt / het aantal bestanden waaruit een site bestaat
  • Het aantal extern ingeladen scripts (bijv. Google Analytics)
  • De snelheid van de webhosting
  • Het type website (blog, e-commerce, cms etc)
  • Het aantal bezoekers op de site op een willekeurig moment
  • Het aantal bots op de site op een willekeurig moment
  • en alles wat je verder nog voor de voeten komt.

Snel maar veilig

De afgelopen jaren heeft Google duidelijk gemaakt dat ze zich sterk willen maken voor een veilig en snel internet. Geheel in de stijl van Google zijn dat geen loze woorden. In 2010 werd al aangekondigd dat snelheid onderdeel was geworden van het algoritme, in 2015 lanceerde Google het AMP project (Accelerated Mobile Pages) voor een sneller open mobiel web.

In 2014 kondigde Google ook al aan dat websites met een veilige verbinding (SSL) een streepje voor gaan krijgen in de zoekresultaten. In 2016 werd op hun security blog duidelijk dat websites met een onbeveiligde verbinding een markering gaan krijgen in de zoekresultaten in Chrome. Google staat daar niet alleen in, zo blijkt uit het lijstje sponsors van Let’s Encrypt, een dienst voor gratis SSL-certificaten. Kortom; zowel snelheid als veiligheid zijn onderdeel geworden van het lijstje factoren waarmee de ranking van websites in de zoekmachine van Google worden bepaald.

Hoe snel is jouw site?

Er zijn diverse (gratis) meetinstrumenten ontwikkeld om snelheid van sites te meten, GTMetrix, één van die gratis aanbieders meet niet alleen je site maar geeft ook suggesties om problemen op te lossen. Daarbij doet zij verschillende metingen, zodat je site niet alleen geoptimaliseerd wordt voor Google en de Google Chrome browser. Door de door GTMetrix gesuggereerde aanbevelingen in jou site door te voeren ben je weer verzekerd van een goede ranking.

Mocht je er zelf niet goed uitkomen, neem dan gerust contact met me op.