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 🤔).
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:
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.
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:
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.
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.
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.
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! 🍻