[SEOguru]

In de volgende video laat Google woordvoerder Matt Cutts weten dat de laadsnelheid van websites een factor van belang gaat worden in het bepalen van de rankings ervan:

Video: Matt Cutts Gives More Caffeine Details, Talks Site Speed

De video gaat overigens voor het grootste deel over de uitrol van Google Caffeine. Ook interessant.

[goalgorilla]

Ja interessante video! Laadsnelheden was al eerder aangekondigd, maar nog niet zo nadrukkelijk. Via Google Webmaster tools kun je kijken hoe lang de Google bot erover doet om je pagina in te lezen. Daarnaast kun zijn tools als Firefox extensie YSlow goed om te kijken hoe snel je website is en waar je verbeteringen door kunt voeren.

Snelheid is dus een belangrijke factor bij het kiezen voor hosting en een CMS systeem. Het CMS dat wij gebruiken (Drupal) comprimeert bijvoorbeeld externe JS en CSS bestanden zodat er minder requests naar de server hoeven te gaan.

[SEOguru]

Even wat vraagjes, Taco.
1. Hoezo moeten er minder requests naar de server als de bestanden zijn gecomprimeerd? Ik kan alleen zien dat gecomprimeerde bestanden sneller kunnen worden opgehaald omdat ze kleiner zijn.
2. En waar vindt het decompressen plaats? In de browser?

[goalgorilla]

Goede vraag, ik was wellicht niet helemaal duidelijk genoeg.
Drupal comprimeert witruimtes in de CSS. Maar daarnaast worden de bestanden ook geaggregeeert of samengevoegd (van aggregation). Als laatste wordt gebruik gemaakt van CSS Sprites. Dit alles gebeurd serverside.

Tegenwoordig hebben grotere sites verschillende CSS en JS bestanden die extern worden ingeladen in de HEAD van een website. Elk request hiervoor naar de server kost tijd.

Drupal kan automatisch externe bronnen zoals CSS en JavaScript
optimaliseren, wat zowel de grootte als het aantal aanvragen aan uw
website kan verminderen. CSS-bestanden kunnen samengevoegd en
gecomprimeerd worden tot één enkel bestand, terwijl
JavaScript-bestanden samengevoegd (maar niet gecomprimeerd) worden.
Deze optimalisaties zijn optioneel en kunnen de serverbelasting,
benodigde bandbreedte en paginalaadtijden verminderen.

Hoe ziet dit eruit in de praktijk?

1) Zonder Bandbreedte-optimalisatie:

<link type="text/css" rel="stylesheet" media="all" href="/modules/admin_menu/admin_menu.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/cck/theme/content-module.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/fckeditor/fckeditor.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/greybox/greybox.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/lightbox2/css/lightbox.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/admin.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/cck/modules/fieldgroup/fieldgroup.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/themes/acquia_marina/style.css?8" />
<link type="text/css" rel="stylesheet" media="all" href="/themes/acquia_marina/icons.css?8" />

<script type="text/javascript" src="/misc/jquery.js?8"></script>
<script type="text/javascript" src="/misc/drupal.js?8"></script>
<script type="text/javascript" src="/sites/default/files/languages/nl_7518d5f34eb4eec46e493fdd16235b40.js?8"></script>
<script type="text/javascript" defer="defer" src="/modules/admin_menu/admin_menu.js?8"></script>
<script type="text/javascript" src="/modules/greybox/js/greybox.js?8"></script>
<script type="text/javascript" src="/modules/lightbox2/js/lightbox.js?8"></script>
<script type="text/javascript" src="/themes/acquia_marina/script.js?8"></script>

HTTP Requests - 54
Total Weight - 211.9K


2) Met Bandbreedte-optimalisatie:

<link type="text/css" rel="stylesheet" media="all" href="/sites/default/files/css/css_784837d01978920c177a1fbec7a69ee7.css" />
<script type="text/javascript" src="/sites/default/files/js/js_22778cbc190c148e3316b49c72d83f43.js"></script>

HTTP Requests - 39
Total Weight - 204.7K

Dit gaat dus niet zozeer om de grote van je pagina, maar puur om het aantal requests. Dit kan aardig oplopen in laadtijd besparing.

Een zeer goed artikel hierover mbt Drupal staat op:
Improving Drupal's page loading performance | Wim Leers

Daarnaast heeft de Yahoo! Yslow tool zeer veel uitleg om je pagina nog sneller te laden! Zo gebruiken we ook Smush.It™ om plaatjes te verkleinen.
Succes!

[SEOguru]

Helder, dank.

Ik neem aan dat er na bandbreedte-optimalisatie twee requests nodig zijn, één voor de (samengevoegde) .css en één voor de (samengevoegde) .js?

[goalgorilla]

Dat klopt dit zijn nu twee requests. Elk plaatje is er bijvoorbeeld nog eentje. En nog twee naar Google Analytics etc. Zo zitten we toch nog op 39 requests voor GoalGorilla.com.

Om dit verder terug te dringen kun je bijvoorbeeld heel veel plaatjes in één plaatje stoppen en deze in een keer inladen. Dit doen grote sites zoals YouTube dan ook: http://s.ytimg.com/yt/img/master-vfl125983.png

[SEOguru]

Interessant.

Ik zie dat ytimg een domein is van youtube via welke -naar ik aanneem- de images uitgepakt kunnen worden uit dat ene .png bestand.

Maar hoe kunnen wij dat met onze website doen? Het zou bijvoorbeeld mooi zijn als je door een argument mee te geven aan de .png de specifieke image eruit kan halen. Maar dan moet het .png-formaat dat wel ondersteunen, en ik heb geen idee of dat zo is. M.a.w. wat is een goede manier?

[goalgorilla]

Ik ben helaas geen designer, het heeft te maken met het volgende op YouTube:

.yt-uix-expander-arrow{
height:16px;
width:12px
;margin-right:4px;
background:url(http://s.ytimg.com/yt/img/master-vfl125983.png) no-repeat 0 -322px;  }

Dit wordt ook wel PNG masking en positioning genoemd. Misschien zijn er nog desginers op het forum die hier meer van weten..?

[site-maker]

Ja, je legt met css in principe een masker over het gehele plaatje en laat dat alleen dat deel zien dat op -322px staat. Zo kun je toe met 1 plaatje en alles vanuit dat ene plaatje vormgeven.

Overigens moet je met die kleine plaatjes wel voorkomen dat je niet meer bytes aan css code schrijft dan dat zo'n plaatje qua omvang zou zijn want dan behaal je het tegenovergestelde resultaat :-)

Overigens begint het hele snelheidsverhaal met een goed gestructureerde en netjes gecodeerde website. Dat laat nog wel eens te wensen over. Als je je strict houdt aan de XHTML/css scheiding en modellering heb je in de basis al een zeer snelle website.

Daarna is optimalisatie voor snelheid op je productie platform uiteraard altijd gewenst. YSlow is daar buitengewoon handig bij.

[goalgorilla]

@site-maker, we hadden het over het verminderen van het aantal HTTP requests. Stel je website wordt door CSS aanpassingen 30 Kb groter, maar je verminder het aantal requests door de plaatjes te mergen met 20, dan is dit nog steeds erg gunstig voor je laadtijd..