In a perfect world, performance is something that everyone designs for from the very beginning of a project. But this post is not about that perfect world. This post is about what you can do if you only have an afternoon to devote to performance optimization. I’m going try to strike a balance between techniques that are helpful while being relatively easy to implement. I’ll also keep the explanations brief, because you have some optimizing to do, after all.
First, plug your site into this website speed test tool. This will give you a break down of all the resources that your site loads. It has a History tab so you can track your progress over time.
I pay close attention to # of requests and page size, and those will be the things we tackle in this post.
Reduce # of http requests
Reducing # of http requests is critical because every object that is loaded by the browser has a latency tax. Latency is the time it takes for the browser to communicate with the server and process the request. This time adds up for every request made.
1. Audit your scripts and stylesheets. Remove unnecessary resources and combine similar files in to a single file.
2. Delete plugins that you are not using. These usually use scripts that are loaded on to every page.
3. Audit custom fonts. Check to make sure that there are no unused fonts that are being loaded. Remove unused font weights. Remove unused languages that are often packaged together.
4. Convert images to CSS3 when possible. For example, buttons no longer need to be images like they did for compatibility with older browsers. Nowadays, they are much better to be made with CSS3.
5. Ditch bloated third party social media buttons and create lightweight share buttons instead. This one reduces requests and page size.
Reduce page size
6. Optimize images for your key pages. This one can be a time consuming task depending on how many pages you have, but I recommend at least optimizing images for your homepage and top pages. Check your analytics to figure out what pages are critical to optimize for. Google has a great resource on image optimization. I would pay particular attention to “Selecting the right image format” and “Lossless vs lossy image compression.”
8. Make sure gzip compression is enabled and enable it if it is not already enabled.
For if you want to dive deeper into performance optimization.