This post is on basic site performance tweaks that we make on every site we work on over at Up&Up. We try to keep it updated as our work progresses, but here it is as of now:
Those are good to use when you're first starting out as they give you good explanations of the kind of changes you'll need to perform. As you gain more experience with site performance, however, you'll come to see patterns that you'll need to implement for almost every site and you'll want a faster way to run those tests.
There are also some fun command line tests. Google's Pagespeed Insights has a node.js wrapper, built by Addy Osmani. If you've got node.js and npm installed, run
npm install -g psi
to install. Then run
psi example.com to get the Pagespeed analysis of your site on mobile and
psi example.com --strategy=desktop to get the desktop analysis.
This test is like golf--high scores are bad. The lower your scores across all the test parameters, the faster your site will be. Tackle the high numbers first to get the biggest gains the fastest.
Here are the standard things that we should always make sure that we are doing.
This one shows up all the time. It's a really easy fix--just stick this in the
.htaccess file. If you don't want a certain file type cached for as long, just move it into a different section.
<IfModule mod_headers.c> # 1 YEAR <FilesMatch "\.(ico|pdf|flv)$"> Header set Cache-Control "max-age=29030400, public" </FilesMatch> # 1 Month <FilesMatch "\.(xml|txt|css|js)$"> Header set Cache-Control "max-age=2592000, must-revalidate" </FilesMatch> # 1 WEEK <FilesMatch "\.(jpg|jpeg|png|gif|swf|svg|.mp4)$"> Header set Cache-Control "max-age=604800, must-revalidate" </FilesMatch> # 1 MIN <FilesMatch "\.(html|htm|php)$"> Header set Cache-Control "max-age=60, private, must-revalidate" </FilesMatch> </IfModule>
This one goes in the
.htaccess file as well. Usually if this one pops up it's because svgs aren't being compressed. We add the first two lines to add svgs to the compression.
### Optimizing SVGs
How we handle SVGs is the topic of a yet-to-be written post, but no matter what they should be optimized. There is a really cool SVG optimizer that has a GUI: SVG OMG. You just paste in your svg markup and it spits out the optimized SVG. You can play with all the different settings. Our standard setting is to take all the defaults, and then we also want to enable prettify code and sort attrs. This makes it easier to work with the file in development.
The optimizer also exists in a node.js form. To install run:
npm install -g svgo
To run on a file:
svgo test.svg --pretty --enable=sortAttrs
This gives the same output as the SVG OMG GUI with the options we specified.
To run it on a folder:
svgo -f ../path/to/folder/with/svg/files --pretty --enable=sortAttrs
... and BAM! all your svgs are optimized and ready to use. Here's the full documentation: SVGO