U draait een test in PageSpeed Insights en ziet twee vertrouwde adviezen: “CSS verkleinen” en “JavaScript verkleinen”. In uw cacheplugin staat er een vinkje voor. U zet het aan, laadt de site opnieuw en de opmaak is weg. Of het menu doet niets meer. Vinkje weer uit, en het advies blijft staan. Veel ondernemers laten het daar dan maar bij.

Dat is jammer, want minify van CSS en JS in WordPress is op zichzelf een nuttige, veilige stap, mits u begrijpt wat het doet en waar het spaak kan lopen. In dit artikel leggen wij het uit zonder technische omhaal, en geven wij een volgorde waarmee u het aanzet zonder dat er iets kapotgaat.

Wat minificatie precies doet

Een stylesheet of scriptbestand wordt geschreven door mensen. Het bevat spaties, regelovergangen, inspringingen en commentaar, zodat een ontwikkelaar het kan lezen. De browser heeft daar niets aan. Minificatie haalt al die leesbaarheid weg: overbodige spaties en regels verdwijnen, commentaar wordt verwijderd en in JavaScript worden lange variabelenamen soms vervangen door korte. Het resultaat doet exact hetzelfde, maar is kleiner.

Twee begrippen worden vaak op één hoop gegooid, maar zijn verschillend:

  • Minify verkleint elk bestand afzonderlijk.
  • Combineren (ook wel “concatenate” of “samenvoegen”) plakt meerdere bestanden aan elkaar tot één bestand, zodat de browser minder aanvragen hoeft te doen.

Cacheplugins bieden meestal allebei aan, vaak onder één kopje. Het combineren is de stap die het vaakst problemen geeft, niet het minifyen zelf.

Wat het oplevert (en wat niet)

Wees hier realistisch over. Uw hostingserver comprimeert bestanden waarschijnlijk al met gzip of Brotli voordat ze naar de bezoeker gaan. Die compressie haalt het grootste deel van de winst al binnen. Minificatie doet daar nog een schepje bovenop, in onze ervaring ruwweg vijf tot vijftien procent extra op de CSS en JavaScript. Op een site met 300 kilobyte aan stylesheets en scripts is dat een paar tientallen kilobytes.

Voor combineren geldt iets vergelijkbaars. Sinds HTTP/2 kan de browser veel bestanden tegelijk ophalen, waardoor het samenvoegen tot één groot bestand minder oplevert dan vroeger. Het kan zelfs nadelig zijn: wijzigt u één regel CSS, dan moet de bezoeker het hele gecombineerde bestand opnieuw downloaden.

Kortom: minify is een nette afwerking, geen wondermiddel. Als uw site traag is door een afbeelding van vier megabyte of trage hosting, verandert dit vinkje daar niets aan. De volgorde van maatregelen die wij aanhouden bij een professionele snelheidsoptimalisatie begint dan ook zelden bij minificatie.

Wanneer minify van CSS en JS in WordPress misgaat

De problemen ontstaan bijna altijd in dezelfde hoeken.

JavaScript dat de bewerking niet verdraagt

Sommige scripts zijn slordig geschreven en missen bijvoorbeeld puntkomma’s aan het einde van regels. Zolang elk bestand apart wordt geladen, merkt u daar niets van. Zodra de regelovergangen verdwijnen of het script aan een ander wordt geplakt, breekt de code. Eén fout in één script kan alle scripts erna stilleggen, omdat de browser stopt bij de eerste fout.

Volgorde die verandert

Veel WordPress-scripts leunen op jQuery. Als een plugin bij het combineren de volgorde verandert, draait een script voordat jQuery is geladen. Het resultaat is een menu dat niet openklapt, een slider die stilstaat of een formulier dat niet verzendt.

Relatieve paden in CSS

Een stylesheet verwijst naar lettertypen en achtergrondafbeeldingen met een pad ten opzichte van zijn eigen locatie. Wordt de CSS verplaatst naar een gecombineerd bestand in een andere map, dan kloppen die paden niet meer. Iconen verdwijnen, lettertypen vallen terug op Arial.

Inline scripts en scripts van derden

Code van een chatwidget, een cookiebanner of een boekingssysteem staat vaak direct in de pagina of komt van een externe server. Sommige plugins proberen ook die te verwerken. Dat gaat regelmatig mis, omdat die code niet is gemaakt om aangepast te worden.

Al geminifieerde bestanden

Goede thema’s en plugins leveren hun bestanden al verkleind, herkenbaar aan .min.css of .min.js. Die nog eens minifyen levert niets op en kost bij elke cache-opbouw rekentijd.

Zo zet u het veilig aan

  1. Maak een back-up en werk bij voorkeur op een staging-omgeving.
  2. Gebruik één plugin. Twee plugins die allebei minifyen, is vragen om problemen.
  3. Begin met CSS-minify, zonder combineren. Laad de site, bekijk de homepage, een productpagina en een pagina met een formulier.
  4. Zet dan JavaScript-minify aan, opnieuw zonder combineren. Test alle interactie: menu, slider, formulier, winkelwagen, zoekfunctie.
  5. Open de browserconsole (F12, tabblad Console). Rode meldingen wijzen op een gebroken script. De melding noemt meestal het bestand.
  6. Sluit probleemgevallen uit. Elke serieuze plugin heeft een veld voor uitzonderingen. Zet daar de bestandsnaam uit de console in.
  7. Combineren alleen als het meetbaar helpt. Meet voor en na. Is het verschil nihil, laat het dan uit.

Wilt u JavaScript ook uitgesteld laden, dan is dat een aparte stap met eigen valkuilen; die beschrijven wij in het artikel over JavaScript uitgesteld laden.

Als het al is misgegaan

Ziet u een pagina zonder opmaak of knoppen die niets doen? Zet de minify-opties uit, leeg de cache van de plugin en de cache bij uw hostingpartij, en laad de pagina met Ctrl+F5. Werkt alles weer, dan weet u dat de oorzaak in de minificatie zat. Zet de opties daarna één voor één terug aan, met de uitsluitingen erbij.

Blijft het misgaan, kijk dan of er meer dan één plugin met deze functie actief is. Dat gebeurt vaker dan u denkt en is het onderwerp van dit stuk over gestapelde optimalisatieplugins.

Conclusie

Minificatie is een kleine, veilige verbetering als u het rustig aanzet en na elke stap test. Verwacht er geen wonderen van en laat combineren uit tenzij de meting het rechtvaardigt. Begin vandaag met alleen CSS-minify, controleer drie pagina’s en bouw daarna verder.