3 Quick Fixes For Site Speed
Your site got a low site speed score? We've all been there.
When I first discovered Google PageSpeed insights, my first thought was to try and run it on my personal site.
I scored a 7 out of 100. It wasn't a happy day.
After hearing a friend give a great talk on site speed, I took an hour to dig in to a few key tips and was able to get it into the 90s. But that first journey into site speed was a scary one for me. And may be a scary one for you!
Since 2018, page speed has been one of the defining traits that search engines like Google use to boost its search results. But beyond this, a slow page leads to a higher bounce rate and a terrible user experience. A site that is hard to visit will be hard to find.
But there are some quick fixes you can do to address this right away. This is a pretty high-level overview, but should point you in the right direction.
Minify your resources
HTML is the frame and engine of your site. CSS is the body and detail. JavaScript is the electronics and features.
Each of these kinds of files that are included in your site usually hold a lot of whitespace. This is usually just dead space and indentation that is used by developers to help write clean code. But this space can add up, and it can easily add load time to your site.
For example, take the common JavaScript library, jQuery. The space saved between loading the normal version and minified version is almost 2/3!
Most CMSs have some sort of solution for this, such as a plugin or add-on. If not, consider using a web-based tool such as Minify Code!
Optimize Image Loading
Media is one of the biggest resources that your site can bring. Having a site that is visually engaging can really boost your content. But it can also make your site really slow. There are a crucial steps to take here.
First, use next generation image formats, as your website system allows. Typical images, like JPEGs and PNGs, can be optimized, but WebP and SVG can be much smaller and much faster. WebP lossless images, which are great for more complex images, are up to 26% smaller in size compared to PNGs (Google has a tool that can help with this). SVGs are primarily text based, based on XML formats, and are best used for icons and logos.
Second, load images as they show up using lazy loading. Lazy loading allows for images to be loaded in the browser window as they appear in the window. Set a height and width on the particular image you are calling, and set loading="lazy" on your img tags to implement it!
Third, whenever you are using JPGs and PNGs, make sure to optimize them for web. Consider both the height and width of the image being loaded (think twice before loading an image over 2000 pixels wide). and the size of the image being loaded (aim for under 1 MB). Your best bet is to use an image optimizer, like our favorite, Image Compressor!
Cache And Compress
Even if your site is highly dynamic, there is quite a bit that won't change. Making the size of your site being loaded as small as possible is a great way to get your site loading faster as well.
Many of the files on your site will stay the same for a long time. Using a cache, a way to allow the browser to keep those files, makes each load much faster for the user. Services like Cloudflare can be a great way to get this going quick.
And if you have access to your server, consider enabling server-side compression, like Gzip. This allows files to be compressed while being sent to the browser, and then sent in a much smaller format, making your load times much faster.
What's Your Next Step?
Sign up Hey Check It and see how your site is performing. Our site speed page will show you some of your struggle points and give you some easy starting points. And check out our other resources for other help!
