100/100 – score bij Google (technisch)

Calling Guru > Blog  > 100/100 – score bij Google (technisch)

100/100 – score bij Google (technisch)

Voor Calling Guru is een performante, goed vindbare website belangrijk. Wellicht ook voor u. De website is vaak een tweede informatiebron na een telefoongesprek of introductie.

 

Daarom deelt de IT-afdeling van Calling Guru graag enkele tips&tricks voor het verkrijgen van een optimale vindbaarheid online. Dit is een vrij technisch verhaal, dus indien u daar zelf niet helemaal in thuis bent is dit misschien vooral nuttig voor uw eigen IT-afdeling. Sharing is caring !

 

We focussen onze aandacht in deze post op het verhogen van de Google PageSpeed Insights-score, ook te bereiken via het iets grafischere ThinkWithGoogle. Deze score geeft de snelheid, bruikbaarheid en het algemene comfort weer voor de bezoeker. En ook belangrijk: dit bepaalt mee de rangorde van de weergegeven resultaten bij een zoekopdracht. Bij een hoge score, staat uw website hoger in de resultaten.

 

Hieronder de score van Calling Guru na onderstaande optimalisaties.

schermafbeelding-2016-11-06

Wat deden we om dit te bereiken ?

 

Afbeeldingen niet te groot, niet te klein

 

  • Een aantal afbeeldingen, vooral logo’s, worden vaak in groot formaat gebruikt. Zorg dat de afbeeldingen dezelfde grootte hebben als de weergave op het grootste toestel. Herbruik deze afbeelding voor de andere kleindere weergaves, en laat de browser de herschaling doen.
  • Gebruik het juiste formaat voor de afbeeldingen. PNG is voor complexe afbeeldingen vaak een goede keuze. Voor logo’s kan GIF passender zijn. De beste manier om hier achter te komen is beide formaten aan te maken en kijken wat het beste resultaat geeft en het minste opslag vereist.
  • Een interessante techniek is het ‘smushen’ van afbeeldingen. Dit is het verwijderen van metadata van afbeeldingen die niet nodig is voor de weergave. De tool die wij gebruiken heet WP Smush–  de techniek is voor diverse CMS-platformen beschikbaaar. Het ‘resizen’ en ‘smushen ‘ van afbeeldingen kan met deze tool in 1 beweging.

 

“Critical Path CSS”

 

Eigenlijk een eenvoudig principe, maar niet zo eenvoudig om uit te voeren. Het principe is dat de pagina moet opgebouwd worden volgens wat eerst getoond wordt in de browser. Alle inhoud die op het scherm komt zonder de gebruiker naar beneden scrollt (alles “above the fold”), moet eerst verstuurd worden naar de browser.

Hiervoor moet alle inhoud, afbeeldingen, CSS, JS die nodig is om dat deel van de pagina te tonen, bovenaan staan.

 

Gelukkig is er een goede gratis tool, criticalpathcssgenerator, die per pagina bekijkt welke CSS bovenaan moet staan. De betalende versie hiervan, criticalcss.com hebben we voor Calling Guru gebruikt omdat deze enkele verbeteringen aanbiedt. Deze CSS kan nog gecomprimeerd worden door cssminifier.com. Met behulp van de plugin “Above The Fold” werd de CSS dan op de juiste plaats in de pagina’s opgenomen.

 

Autoptimize

Een tool met zo’n naam heeft zeker onze voorkeur: alles wat automatisch en geoptimaliseerd kan verdient onze interesse!

Autoptimize kan de html, CSS, JS comprimeren. Voor het snel doorsturen van de gecomprimeerde inhoud is er een cache voorzien. Wel is het belangrijk om alle functionaliteit op de website te testen na het inschakelen van de compressie: niet alle scripts overleven deze behandeling.

 

 

Compressie

 

De webserver kan automatisch compressie voorzien voor alle data die verstuurd wordt. Het is mogelijk dit in het .htaccess bestand aan te geven.

# Enable Compression

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

</IfModule>

<IfModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

 

Daarnaast kan men ook nog de browser cache inschakelen door de relevante bestanden een leeftijd mee te geven.

# Leverage Browser Caching

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType text/html “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType text/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 1 month”

</IfModule>

 

Cache !

 

Er zijn een aantal heel performante cachesystemen, die de pagina’s op voorhand efficiënt opslaan en database-oproepen vermijden tijdens het surfen door uw klant. De website van Calling Guru gebruikt W3 Total Cache. Dit is een plugin met heel wat instellingsmogelijkheden, afhankelijk van uw hosting. Deze plugin kan ook andere instellingen (zoals compressie hierboven) zelf instellen zodat u dit niet hoeft te doen in .htaccess.

 

Content Delivery Network

 

Met een Content Delivery Network worden de bestanden van uw website op verschillende servers opgeslagen die geografisch verspreid zijn. Afhankelijk van waar uw bezoeker zich bevindt, wordt een andere server gebruikt om de bestanden af te halen. Dit is vooral handig indien u internationaal actief bent. Calling Guru gebruikt Cloudflare, die ook voor een fail-over zorgt: indien de servers van de website offline of niet bereikbaar zouden zijn, kan Cloudflare de gecachete versie tonen aan de bezoeker. Zo bereikt u een 100% bereikbaarheid voor de klant.

 

Ik geraak niet aan 100% wegens Google Analytics.

 

Inderdaad. Vreemd genoeg is de JS GA-code voorzien van een korte lifetime waardoor deze niet door de browser gecachet wordt. Op zich is dit niet erg, maar indien je dit toch wil vermijden, kan je de GA-code uitsluiten indien de speedtest van Google de website bezoekt via PHP.

 

En nu ?

 

Hiermee hebben we de maximum score behaald voor mobiel en gebruiksvriendelijkheid, maar deze waarde is geen “vast gegeven”. Regelmatig onderhoud is nodig, en aandacht bij het maken van wijzigingen op de website. Hopelijk lukt dit u ook.

 

In elk geval: veel succes bij het aantrekken van nieuwe klanten en onderhouden van het bestaand cliënteel !

No Comments

Post a Comment

Comment
Name
Email
Website

Bel ons gerust!