Blog

Debug minify settings in W3 Total Cache

7 september, 2015

Debug minify settings in W3 Total Cache

Er bestaan verschillende plugins om een WordPress website sneller te laten laden. De bekendste plugins voorbeelden hiervan zijn WP Super cache, WP Rocket en W3 Total Cache. Mijn persoonlijke voorkeur gaat uit voor W3 Total Cache. Deze plugin is gratis en heeft vele mogelijkheden om je website sneller te maken. Door deze vele mogelijkheden is het echter soms lastig om W3 Total Cache goed te configureren. Dit geldt met name voor het minificatie gedeelte van deze plugin. Vaak komt het voor dat door een verkeerde minificatie de website niet meer werkt of dat het design niet meer klopt. Oorzaak zijn vaak kleine foutjes in de CSS- of JS bestanden of een verkeerde volgorde. In dit artikel wordt beschreven hoe je deze fouten kunt opsporen en oplossen en alsnog je website sneller te maken.

Minificatie

Eén van de moeilijkste setting maar ook één van de belangrijkste is de minificatie settings. Via minificatie worden css- en js-bestanden verkleind en samengevoegd. Door de minificatie en samenvoeging hoeft een browser minder requests te doen naar de website. De laadtijd van een website kan zo dramatisch worden verkleind. Een kleine test via de pingdom tool voor mijn website met en zonder minificatie levert de volgende resultaten op.

Zonder minificatie

Met minificatie

Het verschil is in mijn geval vrij groot. Bijna de helft minder requests resulteert in een 5 keer zo sneller laadtijd. Om dit te bereiken dien je ten eerste W3 Total Cache goed in te stellen. Hieronder staan mijn standaard instellingen.

Configuratie van minify settings

Algemene settings

Onder het menuitem Performance > general settings staan de algemene settings van W3 Total Cache. In de sectie minify activeer je de minify en zet de minify mode op auto en laat ik de minification methodes op standaard instellingen staan.

Minify settings

Onder het menuitem Performance > minify kun je de minify settings tweaken. Veel thema’s en plugins maken gebruik van inline styling. In de sectie HTML & XML activeer ik minify settings zodat de pagina in zijn geheel wordt verkleind.

In de sectie JS (Javascript) vink activeer aan en zelf de optie minify aan.

In sectie CSS (Stylesheets) vink activeer aan en line break removal aan. Ook zet ik de @import handling op Process (dit zijn bestanden waarin binnen een CSS bestand met @import wordt verwezen)

Debugging minificatie

Als je minificatie aanzet komt het wel eens dat de pagina’s niet meer werken het design niet meer klopt. De oorzaak hiervan is :

Door fouten in de js- of css-bestanden waardoor de minificatie een probleem krijgt.
Doordat door minificatie de volgorde (en dus de prioriteit) van de CSS bestanden veranderd.

Met de volgende stappen kun je deze problemen fixen.

Zet in W3 Total Cache Debug aan. Ga naar de algemene settings i W3 Total Cache en vink de optie “Minify” in de sectie “Debug” aan.

Als het goed is krijg je wanneer je een pagina herlaadt onderaan in de source van de pagina een overzicht te zien van de geminificeerde bestanden. Zie hieronder voor een voorbeeld.
Deactiveer achtereenvolgens de secties “HTML & XML”, “JS” en “CSS” om erachter te komen in welke sectie het probleem zich voordoet. Vergeet niet om achter elke stap de Cache van W3 Total Cache te legen!! Als het probleem verdwijnt doordat de minificatie niet meer aanstaat voor deze sectie, dan zit in die sectie het probleem.
Speelt het probleem zich af in een js-bestand, controleer eerst of alle javascript bestanden geen fouten bevatten. Dit kan online via de site http://www.jslint.com/. Vind deze een probleem, probeer het bestand aan te passen. Kan dit niet (omdat het bijv. een js-bestand is van een plugin), sluit dan het bestand uit van het minificatie proces via de “Never minify” optie in de sectie “Advanced”. Zowiezo kun je admin script-bestanden en admin css-bestanden uitsluiten van het minificatieproces wat altijd weer wat extra kilobytes scheelt (deze worden nm. niet gebruikt aan de frontend).
Speelt het probleem zich af in een css-bestand, controleer eerst of alle css bestanden geen fouten bevatten. Dit kan online via de site http://csslint.net. Vind je een probleem, probeer het bestand aan te passen. Kan dit niet (omdat het bijv. een css-bestand is van een plugin), sluit dan het bestand uit van het minificatie proces via de “Never minify” optie in de sectie “Advanced”.
Lost dit niet jouw probleem om, dan ligt de oorzaak waarschijnlijk in de inlaad volgorde van de bestanden. Je kunt dan één voor één de css-bestanden uitsluiten van de minificatie via de “Never minify” optie in de sectie “Advanced” (vergeet niet de cache te legen bij elke stap) en te kijken of het probleem zit oplost.