10-28-2018, 11:17 AM
Design faster web pages, part 3: Font and CSS tweaks
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-3-font-and-css-tweaks.png" width="995" height="597" title="" alt="" /></div><div><p>Welcome back to this series of articles on designing faster web pages. <a href="https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/">Part 1</a> and <a href="https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/">part 2</a> of this series covered how to lose browser fat through optimizing and replacing images. This part looks at how to lose additional fat in CSS (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a>) and fonts.</p>
<p><span id="more-20267"></span></p>
<h2>Tweaking CSS</h2>
<p>First things first: let’s look at where the problem originates. CSS was once a huge step forward. You can use it to style several pages from a central style sheet. Nowadays, many web developers use frameworks like Bootstrap.</p>
<p>While these frameworks are certainly helpful, many people simply copy and paste the whole framework. Bootstrap is huge; the “minimal” version of 4.0 is currently 144.9 KB. Perhaps in the era of terabytes of data, this isn’t much. But as they say, even small cattle makes a mess.</p>
<p>Look back at the <a href="https://getfedora.org">getfedora.org</a> example. Recall in <a href="https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/">part 1</a>, the first analysis showed the CSS files used nearly ten times more space than the HTML itself. Here’s a display of the stylesheets used:</p>
<p><img class="aligncenter size-full wp-image-20305" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-3-font-and-css-tweaks.png" alt="" width="995" height="597" /></p>
<p>That’s nine different stylesheets. Many styles in them that are also unused on the page.</p>
<h3>Remove, merge, and compress/minify</h3>
<p>The font-awesome CSS inhabits the extreme end of included, unused styles. There are only three glyphs of the font used on the page. To make that up in KB, the font-awesome CSS used at getfedora.org is originally 25.2 KB. After cleaning out all unused styles, it’s only 1.3 KB. This is only about 4% of its original size! For Bootstrap CSS, the difference is 118.3 KB original, and 13.2 KB after removing unused styles.</p>
<p>The next question is, must there be a bootstrap.css and a font-awesome.css? Or can they be combined? Yes, they can. That doesn’t save much file space, but the browser now requests fewer files to succesfully render the page.</p>
<p>Finally, after merging the CSS files, try to remove unused styles and minify them. In this way, you save 10.1 KB for a final size of 4.3 KB.</p>
<p>Unfortunately, there’s no packaged “minifier” tool in Fedoras repositories yet. However, there are hundreds of online services to do that for you. Or you can use <a href="https://github.com/juancarlospaco/css-html-js-minify">CSS-HTML-JS Minify</a>, which is Python, and therefore easy to isntall. There’s not an available tool to purify CSS, but there are web services like <a href="https://uncss-online.com/">UnCSS</a>.</p>
<h2>Font improvement</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">CSS3</a> came with something a lot of web developer like. They could define fonts the browser downloads in the background to render the page. Since then, a lot of web designers are very happy, especially after they discovered the usage of icon fonts for web design. Font sets like <a href="https://fontawesome.com/">Font Awesome</a> are quiet popular today and widely used. Here’s the size of that content:</p>
<pre>current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2</pre>
<p>So the question is, do you need all the glyphs? In all<span id="result_box" class="short_text" lang="en"> probability, no</span>. You can get rid of them with <a href="https://fontforge.github.io/en-US/">FontForge</a>, but that’s a lot of work. You could also use <a href="http://fontello.com/">Fontello</a>. Use the public instance, or set up your own, as it’s free software and available on <a href="https://github.com/fontello/fontello">Github</a>.</p>
<p>The downside of such customized font sets is you must host the font by yourself. You can’t use other online font services to provide updates. But this may not really be a downside, compared to faster performance.</p>
<h2>Conclusion</h2>
<p>Now you’ve done everything you can to the content itself, to minimize what the browser loads and interprets. From now on, only tricks with the administration of the server can help.</p>
<p>One easy to do, but which many people do wrong, is decide on some intelligent caching. For instance, a CSS or picture file can be cached for a week. Whatever you do, if you use a proxy service like Cloudflare or build your own proxy, minimze the pages first. Users like fast loading pages. They’ll (silently) thank you for it, and the server will have a smaller load, too.</p>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-3-font-and-css-tweaks.png" width="995" height="597" title="" alt="" /></div><div><p>Welcome back to this series of articles on designing faster web pages. <a href="https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/">Part 1</a> and <a href="https://fedoramagazine.org/design-faster-web-pages-part-2-image-replacement/">part 2</a> of this series covered how to lose browser fat through optimizing and replacing images. This part looks at how to lose additional fat in CSS (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">Cascading Style Sheets</a>) and fonts.</p>
<p><span id="more-20267"></span></p>
<h2>Tweaking CSS</h2>
<p>First things first: let’s look at where the problem originates. CSS was once a huge step forward. You can use it to style several pages from a central style sheet. Nowadays, many web developers use frameworks like Bootstrap.</p>
<p>While these frameworks are certainly helpful, many people simply copy and paste the whole framework. Bootstrap is huge; the “minimal” version of 4.0 is currently 144.9 KB. Perhaps in the era of terabytes of data, this isn’t much. But as they say, even small cattle makes a mess.</p>
<p>Look back at the <a href="https://getfedora.org">getfedora.org</a> example. Recall in <a href="https://fedoramagazine.org/design-faster-web-pages-part-1-image-compression/">part 1</a>, the first analysis showed the CSS files used nearly ten times more space than the HTML itself. Here’s a display of the stylesheets used:</p>
<p><img class="aligncenter size-full wp-image-20305" src="http://www.sickgaming.net/blog/wp-content/uploads/2018/10/design-faster-web-pages-part-3-font-and-css-tweaks.png" alt="" width="995" height="597" /></p>
<p>That’s nine different stylesheets. Many styles in them that are also unused on the page.</p>
<h3>Remove, merge, and compress/minify</h3>
<p>The font-awesome CSS inhabits the extreme end of included, unused styles. There are only three glyphs of the font used on the page. To make that up in KB, the font-awesome CSS used at getfedora.org is originally 25.2 KB. After cleaning out all unused styles, it’s only 1.3 KB. This is only about 4% of its original size! For Bootstrap CSS, the difference is 118.3 KB original, and 13.2 KB after removing unused styles.</p>
<p>The next question is, must there be a bootstrap.css and a font-awesome.css? Or can they be combined? Yes, they can. That doesn’t save much file space, but the browser now requests fewer files to succesfully render the page.</p>
<p>Finally, after merging the CSS files, try to remove unused styles and minify them. In this way, you save 10.1 KB for a final size of 4.3 KB.</p>
<p>Unfortunately, there’s no packaged “minifier” tool in Fedoras repositories yet. However, there are hundreds of online services to do that for you. Or you can use <a href="https://github.com/juancarlospaco/css-html-js-minify">CSS-HTML-JS Minify</a>, which is Python, and therefore easy to isntall. There’s not an available tool to purify CSS, but there are web services like <a href="https://uncss-online.com/">UnCSS</a>.</p>
<h2>Font improvement</h2>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3">CSS3</a> came with something a lot of web developer like. They could define fonts the browser downloads in the background to render the page. Since then, a lot of web designers are very happy, especially after they discovered the usage of icon fonts for web design. Font sets like <a href="https://fontawesome.com/">Font Awesome</a> are quiet popular today and widely used. Here’s the size of that content:</p>
<pre>current free version 912 glyphs/icons, smallest set ttf 30.9KB, woff 14.7KB, woff2 12.2KB, svg 107.2KB, eot 31.2</pre>
<p>So the question is, do you need all the glyphs? In all<span id="result_box" class="short_text" lang="en"> probability, no</span>. You can get rid of them with <a href="https://fontforge.github.io/en-US/">FontForge</a>, but that’s a lot of work. You could also use <a href="http://fontello.com/">Fontello</a>. Use the public instance, or set up your own, as it’s free software and available on <a href="https://github.com/fontello/fontello">Github</a>.</p>
<p>The downside of such customized font sets is you must host the font by yourself. You can’t use other online font services to provide updates. But this may not really be a downside, compared to faster performance.</p>
<h2>Conclusion</h2>
<p>Now you’ve done everything you can to the content itself, to minimize what the browser loads and interprets. From now on, only tricks with the administration of the server can help.</p>
<p>One easy to do, but which many people do wrong, is decide on some intelligent caching. For instance, a CSS or picture file can be cached for a week. Whatever you do, if you use a proxy service like Cloudflare or build your own proxy, minimze the pages first. Users like fast loading pages. They’ll (silently) thank you for it, and the server will have a smaller load, too.</p>
</div>