5 Things You Can Do Right Now to Improve Your Blog's Speed and Performance

I’ve been wanting to redesign my site for a while, and what better time than this inflection point in my work. It’s geekily poetic that my first post on the new site be about optimizing that site for speed and performance. I’m so meta.

Tools like GTMetrix and PageSpeed Insights can point you to very detailed steps you can take to improve your site speed and performance. I’m going to focus on five of the highest impact improvements you can make:

1. Resize Your Images
2. Optimize Your Images
3. Serve Responsive Images
4. Minify HTML, Scripts, and CSS
5. Inline Critical CSS

Our objective here is optimize your site for speed and performance. Optimized doesn’t necessarily mean fastest, nor does it mean perfect. Optimization means to make your site the most effective you can make it, balancing speed and performance with other considerations like your infrastructure, maintenance, cost, and intended audience’s needs. It is perfectly fine if you don’t get a 100% score on your page speed (because you probably won’t).

More than half of the page weight of most websites comes from images. If you do nothing more than the first two improvements below, you’ll have done your website a huge favor. Irrespective of your website tool and host, the one thing you have complete control over are your images. That big beautiful blog you have with 6 full-res photos from your 16MP camera on each post? Go ahead and run it through GTMetrix. I know, you just got the wind knocked out of you.

1. Resize Your Images

The first and easiest thing you can do for your site is to resize your images before uploading them. The majority of desktops worldwide display at 1920×1080 or less. That’s the full screen size, and your featured image is likely to be much smaller. Unless your image is meant to be displayed fullscreen, then any photo you upload that is larger than 1920×1080 is weighing your page down. You can go even smaller by uploading images that are only sized for their specific container on your page. This will make it trickier if you want to move your images across containers, but honestly, I almost never do that once I’ve settled on my page templates.

2. Optimize Your Images

Image compression algorithms have gotten really good. Really, really good. Use an image optimization service to reduce your image file size. There are many out there like, Squoosh and TinyPNG. They can compress your images by as much as 80% without much perceptible quality loss. Unless you are writing for a photography site meant for photographers, most of your audience won’t notice.

There are some great website tools out there like Weebly, Wix, and WordPress. Each has their strengths and weaknesses, and along with your hosting provider, will allow a certain level of flexibility to optimize your site. The last three improvements will be dependent on what your website tool and hosting solutions are.

3. Serve Responsive Images

You should upload your images in multiple sizes for serving them responsively to different viewport sizes. A desktop may be able to display your banner image at 1280px wide, but a mobile device may only be able to display it at 320px in portrait orientation. Serving a 1280px image to a mobile device is heavier than it needs to be. By using the srcset and sizes attributes in your code, you can make sure each device requests the appropriately-sized image.

4. Minify HTML, Scripts, and CSS

If you are writing elegant code, then it is readable and well-documented. That’s for our benefit as humans. But your browser doesn’t need or care about all that fluff. After writing your code, you can run them through a minifier to compress the file sizes.

5. Inline Critical CSS

Moving your critical CSS inline is a balancing act. External CSS files are great for code maintenance, cleanliness, and consistency across your site. The problem is, your browser won’t start rendering your page until all of these external CSS files are loaded first. This means that your viewer is waiting for content while these files are downloaded. These external files are types of render-blocking resources. Moving critical CSS inline—directly in the HTML code itself—will allow your first content to be displayed to the user while the rest of your page loads. Of course, the more code you write inline, the heavier your page itself will be and the harder it will be to manage style across your site, so this is something you have to do intelligently. This can also be a challenge when you decide to make changes to those styles as cached pages may not pick up those new instructions immediately.

These 5 steps alone will probably push your website into 90%+ scores for page speed and performance. First and foremost, your site should be about your content, so focus on great content first. A fast site with garbage content, is still a garbage site. Just don’t let poor site performance limit the potential of that hard work you put into creating that great content. Before I go, I’ll give you one more tip to keep in mind.

6. Mo’ Plugins Mo’ Problems

If you’re using tools like Wix or WordPress, then you will be trading flexibility and control for convenience. The answer on these platforms are plugins and extensions. But not all plugins are created equal. There are some fantastic plugins out there that are well-maintained, fast, and secure. Their development teams deserve to be supported and compensated for their work. Just be aware that each plugin you add might impact your page speed and performance. Not to mention maintenance overhead as you have to manage updates, and the ever-present threat of security breaches. Try to keep your plugins to a minimum and think really hard about whether that slick animation being served by your plugin is worth the performance hit.