New CSS Faster Sites

Use of CSS Frameworks

When developing previous versions of our content management system we always had to rely on a css framework to create website templates and layouts in a timely manner that we knew would work across a range of browsers. Since around 2013 it’s almost become a given that all new website should be programmed to work responsively, so they change their layout to fit the screen the viewer is using, be it mobile, tablet or high resolutions desktops.

The framework Bootstrap was our typical solution to this. Bootstrap however is not free when it comes to download size, it typically adds 144kb to the download of the css. Although not a massive amount on the modern web, 144kb can be a bit of a bottleneck on a slower (eg mobile) internet connection.

Modern CSS

With the recent demise of Internet Explorer ( Uk usage at the time of writing is 0.35% ) new css technologies have become widely available in all the modern browsers. These technologies include:

• CSS Grid

• Flexbox

• CSS Custom Properties

We’re no longer restricted in using css floats (via bootstrap) to layout our websites. Powerful css Grid and Flexbox enable us to produce fluid responsive layouts with far fewer lines of code and no need for a css framework.

DuoCMS7 vs DuoCMS8 

CMS7 and earlier had many of the Bootstrap layout elements hard coded into the editing system. While developing the CMS8 editor we have taken great care to move away from these conventions within the built-in tools. This has enabled us to produce newer sites without a css framework, just following some simple conventions.

The CSS downloaded for our DuoCMS7 sample site is 174kb - DuoCMS7 sample site

The CSS download for our DuoCMS8 sample site is 31.3kb. - DuoCMS8 sample site

The layouts are almost identical, but we’re able to write much less css by using modern css, meant specifically for layout. Decoupling the editing system from a specific framework also gives us greater flexibility in the future within the design of our website layouts. 

It’s not just the css that’s got smaller - the two sites above look very similar, but the cms 7 site, once compressed transfers 470kb to load the home page, the cms8 version only 65kb, that’s over 7 times smaller!

As the web progresses sites inevitable get bigger as more content is crammed into every page. Using DuoCMS8 for your next site may not turn back time completely, but the techniques we’re using should give you a solid platform to add your content to. 

Note on Search Engine Optimisation

It’s worth noting it’s not just mobile users who get a better experience. Search engines too can give your site a better ranking by having a page which is faster to load. More information here. So faster sites should get a higher rank. All the more reason to make your next site a DuoCMS8 site.