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.
Citaat:
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!