In this short article we’re going to explore a few simple things any site can do to reach a higher page speed score and reduce load times.
Does this image make me look fat?
In my experience one of the biggest factors for slow page speed is large image sizes. One of the first things you should consider is how to reduce the file size on your sites images.
Often I find sites serving up large images when unnecessary. A few components go into this, like resizing with HTML instead of using the correctly sized image, choosing the incorrect file format, and poor file compression.
- Avoid resizing the image with HTML, as the client still has to download the full size image.
- Use PNG only when necessary, like when you need a transparent background of an image. Otherwise JPG is fine in most cases and generally a much smaller file size.
- Avoid using images to display text. If you can display text in place of an image, do so!
- Sprite your images when possible, like social icons!
- Six Revisions – The comprehensive guide to saving images for the web
- Smush.it – Yahoo!’s image optimization service
- CSS Tricks – CSS Sprites: What they are, why they’re cool, and how to use them
This is as simple as moving any JS to the bottom of your files just before closing body tags.
Buy local, avoid @import!
Sites with many stylesheets may often be using @import to handle multiple sheets and fonts. This could cause too many requests and they may not be loading in the order you would like them to. Never fear! If you don’t want to combine all your stylesheets you can still load them parallel to each other using <link> over @import.
- Steve Souders – Dont Use @import (very in-depth look at import vs link)
When using web fonts like Google Fonts, you have the option to select the weights of the font family you will be using. Instead of including the whole set of weights, evaluate which you use and only include those. I suggest keeping web fonts down to 2-3 at most. A font for headings, body text, and an additional for other areas of your site like quotes or subheadings.
You can take this a step further and even get rid of any unneccessary characters you won’t be using. When using LINK (not @import!) you can add a &text paramater to specify exactly what characters you need from the font family. See further reading for a more in-depth look at the text paramater on Google fonts.
- Digital Inspiration – How to reduce file size of Google fonts for your website
These are just a few simple changes you can make to any site. To reach optimal speed levels you should consider expanding further by evaluating your hosting solution, caching options, and delivering your site to visitors via a CDN.
Hailing from "Charm City," Baltimore, MD. Drew Poland (@bmoredrew) is a WordPress Developer and Consultant, lover of Argyle, and connoisseur of Coffee. Currently cultivating an awe-inspiring beard... one that would even make Zeus jealous. You can find out more about Drew at his WordPress Developer blog.