Frontend Optimization Checklist 2018

Today I wanted to write down a collective list of things you can do on the frontend to save all of the kbs (or mbs 🤔).

First off, if you have not heard of Google’s Lighthouse plugin yet, head on over and download it. This will help you understand where your website needs improvement.

I will break things down into sections:

SVGs & Images

Use of Inline SVGs - If you are not using SVGs for icons/logos/pretty much anything other than an actual photo, you should start doing so. Inline SVG is taking things a step further, instead of referencing a SVG in an <img>, inline it! This cuts down on so many asset requests on your page, for example:

<!-- 3 extra requests -->
<img src="/extra/request/blue-circle.png">
<img src="/extra/request/yellow-circle.png">
<img src="/extra/request/red-circle.png">
<!-- 0 extra requests -->
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="blue" />
</svg>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="yellow" />
</svg>
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Obviously SVGs can’t be used for everything (well they probably could but there is a tipping point as to when to use an SVG and when a .png is better), but when you can use them, you should.

Optimize SVGs - Before any SVGs hit production, please run them / upload them to svgomg first, this optimizes SVGs, saving even more page weight.

Resizing images - Always make sure the images you are serving up are cropped and sized down to the smallest size they will ever display as. With the responsive approach and max-widths of markup containers, this can sometimes be overlooked.

Image Compression - Mac users swear by imageoptim but I’ve used it and many other applications, nothing has beat out TinyPNG. TinyPNG is literally the only tool you need when it comes to PNGs and JPGs.

CSS & Javascript

PurgeCSS - I recently heard about PurgeCSS and instantly started using it. If you are not familiar with it, take a look at their Configuration page. This will give you a high level view of what can be done with it.

My use case:

See my use in gulpfile.js as part of my Web Starter repo, a boilerplate to meld Nunjucks, SCSS and ES6 (with production code in mind).

Minification - No css or javascript files should ever go to production unless they are minified.

If you have a gulp build, start using, gulp-clean-css to minify css and gulp-uglify to minify js.

I mean at the very least, there are web tools for minification, jscompress and cssminifier.

GZip - This is taking things a bit further, Chris Coyier has a great article on Difference between Minification and GZipping. As you can see, there is definitely even more savings on page weight when you GZip. Just keep in mind when serving these files up, setting the metadata Content-Encoding to gzip is a must.

Fonts

Font Face and the use of font-display: - Almost every project at work calls for the use of @font-face, and if you are serving up custom fonts you really should check out the css property: font-display. Google gives a great breakdown here: Web Font Optimization

Video & GIFs

First off, I say GIFs not JIFs because they are gifts. I use Giphy Capture most of the time for quick screen recordings of prototypes or examples I want to display (examples of recordings). It’s great and my go to for sure, but I quickly realized that gifs are HEAVY.

So then I saw an article about converting GIFs to .mp4, and wrote about the massive file size optimization here. Now all GIFs on this blog have been converted to .mp4.

That is just the first big win if you are using GIFs, so now let’s talk about video. Using the <video>, please keep in mind some great attributes within: poster, preload and all others.

Accessibility concerns for video: captions/subtitles, take a look here.

Server Side

HTTP/2 - Wherever you are serving up your files on the server, make sure they are using the faster HTTP/2 protocol instead of the HTTP/1.1 protocol. To test if you are, run Lighthouse on the desired site.

On apache servers, the use of the modules for file serving/expiration/caching: mod_headers, mod_expires and mod_deflate Take a look at my .htaccess file on github for help.

This post was mainly in response to this Twitter Post from Chris Coyier.

Also, take a look at the repo for my blog and it’s current Lighthouse score. I’ve listed out a good bit of helpful things in the readme. I hope something on this post helped you! 🍻