CSS en JS Gzip voor betere performantie op LiteSpeed server

Ingediend door Donny op za, 21/05/2011 - 13:26

Toen ik onlangs mijn website verder aan het optimaliseren was trachtte ik ook de Drupal modules css_gzip en javascript aggregator bij in te schakelen. In de core van Drupal 7 zit dit nu standaard ingebakken maar voor V6 moet je ze nog apart bij installeren.

Deze modules had ik reeds op tal van websites gebruikt maar op mijn eigen hosting bleek het plots mis te lopen. Na het inschakelen konden de CSS of JavaScript bestanden niet langer gelezen worden. Jammer genoeg vond ik niet dadelijk een oplossing en was ik genoodzaakt om de modules tijdelijk uit te schakelen tot ik weer even tijd vond het om het verder uit te zoeken.

Enkele dagen terug kreeg ik dit probleem echter opnieuw voor op een andere website waardoor het hoog tijd werd om dit eens van naderbij te bekijken. Daarop startte ik met de modules over verschillende hostings en lokale installaties heen te gaan installeren.

De modules bleken overal te werken buiten op LiteSpeed servers, laat dat nu net het type van server zijn waarop mijn site gehost staat. Aangezien deze optimalisaties standaard mee in de Drupal 7 core zitten leek het mij het beste om daar op zoek te gaan naar issues en oplossingen.

Blijkbaar loopt er iets mis met het versturen van de juiste headers naar de browser om overweg te kunnen met geGzipte bestanden. Wanneer ik de opties voor het uitschakelen van het aanmaken van .htaccess bestanden op de performantie pagina uitschakelde, bleek alle CSS en JavaScript terug te werken. (Indien dit niet het geval is kijk dan zeker in de css en js mappen of er geen .htaccess meer aanwezig is, deze mag je anders verwijderen)

Aangezien de door de modules aangemaakte .htaccess bestanden voor de juiste headers dienden te zorgen zijn we op dit moment nog niet veel verder door dat er nog niet aan de browser verteld wordt om de gegzipte bestanden te gebruiken.

Deze headers gaan we nu mee opnemen in onze root .htaccess
Open dit bestand en plaats onderstaande code onderaan net voor het afsluiten van <IfModule mod_rewrite.c> ... </IfModule>

# Serve gzip compressed CSS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]
# Serve gzip compressed JS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]
# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1]
<FilesMatch "(\.css\.gz)$">
  # Serve correct encoding type.
  Header append Content-Encoding gzip
  # Force proxies to cache gzipped & non-gzipped css/js files separately.
  Header append Vary Accept-Encoding
</FilesMatch>
<FilesMatch "(\.js\.gz)$">
  Header set Content-Type text/javascript
  Header append Content-Encoding gzip
  Header append Vary Accept-Encoding
</FilesMatch>

Om te controleren of we nu de juiste headers sturen naar de browser kunnen we dit het best doen met Firebug. Kijk na of je Content-Encoding op gzip staat en dat het Content-Type zeker op text/css blijft staan. (Voor een CSS bestand) Als je hier aan twijfelt hoe het er juist uit dient te zien, kan je dit bv altijd op een andere site zoals Facebook nakijken.

Firebug

Wanneer je nu je website nog eens nakijkt met PageSpeed (Google) of Yslow zou je zeker over betere resulaten dienen te beschikken. Een andere handige website om dergelijke zaken na te kijken is zeker GTmetrix.