Quick Tips for Speeding up Sites
Website load speed directly affects bounce rate and SEO ranking. Which is probably the goal for many websites — to attract more customers.
So here’s a quick and dirty guide to optimizing load speed. I won’t cover everything, just some low hanging fruit.
CDN. Data goes at the speed of light, at best. Light is fast, but the world is big. There’s no way to make it go much faster. One trick is to host mirrors of your web in different parts of the world, called a CDN.
Lower file sizes. The more people download, the longer it takes and the more bandwidth it eats.
The biggest files are images. I’m strongly against profile photos; which is probably the most wasteful thing that doesn’t improve user experience. Where possible, use less, and every time you have to use an image, ask yourself if this is necessary. You shouldn’t buy large fries for no reason, nor should you put in unnecessary images.
Many icons can be replaced with FontAwesome, which has its own load, but can be a better option in many situations.
Compress images. Use Cloudpresso or something. It’s perceptually lossless, you save money and it costs nothing.
Resize images. A 100x100 image is 4 times smaller than the size of a 200x200 one. Auto resize/crop uploaded photos.
Host multiple high/low resolutions of the same photo if you’re using either. Hosting lots of photos cost storage space, but saves on loading time and bandwidth.
Use less fonts. Fonts are not huge but the loading time is really obvious. Ideally use a generic font that’s good enough, and on multiple devices — Open Sans, Helvetica, Roboto. Avoid having to download new fonts for bold, italic, headers and so on. If you want to use more fonts, keep it below the fold.
Host files on servers designed for files, like Amazon S3. Then pop a CDN on that too.
Move your JavaScript below your HTML layout. JS takes more time to load. The page will appear blank until the HTML loads, so you want to load HTML first. One big question is analytics — they take some time to load, but if someone bounces off the page before the analytics loads, you won’t see what happens.
Less files and less API calls. Let’s go over how TCP works: it requests a handshake from the server, it wraps text in a “packet”, sends that packet off, then waits for acknowledgement.
That’s three back and forth rounds for one thing. Now lets say you have a 100 kb file. The cost of sending it is negligible compared to the overhead of going back and forth three times. For optimization purposes, don’t split your code into multiple smaller files.
And especially cut down on API requests. It’s often better to download one giant text file with 200 items than to paginate that into 10 twenty item pages and make 10 different API calls. You’d be surprised that the giant json list is even smaller than your header file.
If you have a lot of stuff, don’t put it on the main page. As in don’t load a full gallery at the top of a page. Be wary though — SEO expects you to have some content on the main page, so you should have a lot of text up there.
Minify your scripts. Remove comments and whitespace and use shorter variable names. There are plenty of tools that do this for you. You shouldn’t be coding on minified script, but only release it in production.
A lot of the above are handled straight by Netlify, which is free for most solo use.
