Magento 2 Gotcha! – Developer Mode and Merging CSS

Gotcha! There’s a big, big one that a “Magento 2 user we know” was caught out by only very recently.

It’s possible that this is an area devoid of wider public exposure so we thought we’d jot it down in one place so if someone is suffering the same symptoms they can be relieved quickly – it’s a conversion rate killer rather than anything as quick and acute as a crash or 500 error.

The Symptoms

In short your previously nippy Magento 2 site slows down. A lot. This is apparent in both the front end and the back end.

You also might have either changed mode from production to developer (amazing how many Mag 2 users don’t actually know about this feature!)

Or you might have been trying to improve response times by merging your whole set of CSS or JS files into one.

What’s Happening?

Well basically the creation of a merged CSS or JS file is a good thing. Magento 2 seems to handle this much better than Mag 1 – weve seen many a site fall over with combined JS & combined CSS files in Mag 1 – the static content system in Mag 2 is a radical overhaul and generally works well.

But what you don’t want is is the act of combining CSS and JS files actually being executed on every single page hit! Ues you read that right – every browsing punter you have have is invoking the css combining routine on every single page load!

This is a deliberate feature Magento 2 of developer mode meant to make developers lives easier (whilst simultaneously upsetting real people and destroying your conversion rate and google page speed ranking)

So what to do

Well you either switch off CSS & JS merging – which is quickest and easiest – or you move out of developer mode and into production mode.

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

In production mode you get to have your merged files but not generated on every page hit! The problem with production mode is that it sends your site through the Magento 2 compilation and static deployment processes…. and this will out any shoddy coding on the part of your developers.

So switching off CSS and JS merging gets you out of jail by sweeping under the carpet any issues and reasons for your Magento site not getting through the compilation and static deploy… and that’s the issue you should address straight away afterwards.

It’s enough to make one flip one’s lid!

Don’t  let it happen to you….Buy Layer 5’s anti-lid flipper!