The Quickest 3 Ways to Make Your Website Load Faster
Everyone wants their website to load faster: it’s better for business, more people will stay and browse, and it’s one of the things Google uses to rank your website. Suffice it to say, loading speed is important.
But sometimes the speed testing websites (Google PageSpeed, GT Metrix, Pingdom, and others) provide so much information, it can be hard to figure out what to do FIRST to speed up your site the most. After all, 20% of the work often leads to 80% of the results! The 20% you want to focus on to speed up your site are Image Optimization, Gzip Compression, and Asyncing Render-Blocking Resources*.
*This article does not cover caching, a common recommendation for site speed. I’ve found that these three items are generally more impactful for speed than caching. Depending on your website, this may or may not be true. Regardless, these three items are powerful ways of decreasing a website’s loading time.
Image Optimization
This one is the most simple speed optimization tool to implement. Images have three ways of being optimized:
- The size of the image should be no bigger than needed for the space.
- The file type of the image should be correct – jpg/png – and/or use JPEG 2000, JPEG XR, and WebP
- The images should be compressed as much as possible
Before starting each step below, I recommend reading all three steps.
The Size of the Image
The visual size of the image is important. If you’re loading an image that is technically 2400 pixels wide (generally 100 pixels = about 1 inch) into a space that’s only 250 pixels wide, you have an image size problem. But with website responsiveness, resizing isn’t just a simple act. Instead, you’ll want to do some simple math:
First, start with a percentage width of the page that the image is. For example, if the image covers 1/3 width of the website, it would be 33%.
Next, what the max width screen your website supports, or the max width you allow the website to go? I typically support up to 2400 pixels wide (~24 inches).
Finally, complete the math: 33% of 2400 = 792
(2400 * .33 = 792)
So your image should be ~792 pixels wide. Height should be relative, so resize the image and then leave the height as it is.
CHEAT: If your website uses WordPress, you can kind of cheat by using a plugin that automatically resizes like Imsanity. Also, if you’re using WordPress, adding the right image size into the space is vital. When you add an image, make sure you choose the appropriate size image (on the right). Finally, you can make sure images are added by making sure the WordPress theme itself uses responsive coding for images (you’ll need a developer for that one!).
The File Type of the Image
Make sure you’re using image types correctly.
JPG: Pictures of people, items, places
PNG: Icons or vector images (images made of lines, not pixels).
SVG: Vector images; WordPress does not have automatic support for SVG, but there are some major upsides. To implement support make sure you have a plugin that provides support AND security, since SVG files can be a hacker’s paradise.
After confirming that you’re uploading the correct file type, the next step is optimizing the images as WebP images. You can’t skip the original image step because some browsers don’t use WebP images yet.
A plugin can be used to easily create WebP images from your current images, like EWWW Image Optimizer or Litespeed Cache.
But like Google recommends, a plugin can be used to easily create WebP images from your current images. For WordPress, a few options include EWWW Image Optimizer and LiteSpeed Cache. Both of these plugins have other features; the EWWW Image Optimizer also optimizes your images (next step below) and the LiteSpeed Cache also Asyncs Render-Blocking Resources (step 3 in this post). You can also use both plugins, just don’t enable the WebP optimization on both. I use the WebP on LiteSpeed Cache on this website, but use whichever one works better for your site.
Compressing/Optimizing Website Images
After you upload the images in the right size and format (which you should do each time you add a new image to your site), the final image optimization should be compressing the images one last time. If you used Photoshop to optimize the “image for web” before you uploaded, don’t skip this step. This will provide additional optimization.
You can use the plugin mentioned above, EWWW Image Optimizer, for your optimization of images. There are quite a few plugins out there – free and paid – that you can use. I find that EWWW Image Optimizer is effective and it’s free. After installing, go to Media > Bulk Optimize to start the process.
Image Optimization Summary
Effectively optimizing your images can save you multiple megabytes, increasing your speed in Google Speedtest anywhere from 10-30 points.
Gzip Compression
Just like files on your computer, you can provide your website in a zipped (compressed) format to browsers. This can significantly lower the size of the website and thus speed up the loading time.
Thankfully, Gzip Compression is almost always super easy to implement.
Here’s how it works: when you click on a link, the browser you’re using sends a message to the website server that it can load a compressed website (or zipped). The server sends the zipped version if there’s a zipped version of the file available. That’s it; that’s all it is.
Thankfully, this is almost always super easy to implement. However, you will need a developer to help (unless you’re a DYI kind of person).
Test Your Website
First, test to see if your website is already Gzip Compressed. If Google is saying it isn’t, you can move on to implementation below, but you can always put your website in to see: Gzip Compression Test.
If your website is compressed, it will tell you the original size, the zipped size, and the percentage compressed. If it’s not Gzipped compressed, it will tell you roughly how much you can save if you compressed it.
There’s a third option: Brotli. It is like gzip compression, but it can actually compress your site MORE than gzip – which is good!
Installing Gzip Compression
If your website is coming up uncompressed, you can use the following to fix this with WordPress and many other sites (not NGINX or IIS). Add this code to the bottom of the “.htaccess” file in the root of your website (see more instructions below the code). This might take a few minutes to implement, so wait for a few minutes after adding this code before you re-test your site.
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent
For those who may not be familiar with the “.htaccess” file, it’s a hidden file in the root (or base) of your WordPress install. You’ll need to use either FTP or a File Manager to edit it. Either way, you’ll need to make sure “see hidden files” is on. For the File Manager, there’s typically a checkbox before you enter into the File Manager. For FTP, each program will have a different way to doing this.
This file is sensitive though, so it can take down your entire site if you add the code above incorrectly. If that happens, simply undo what you did and re-save. Copy and paste the code and you shouldn’t have a problem.
Give it a few minutes after adding, and then test your site again.
For those more tech savvy, you can also view the console to see if the website is being gzipped. Use Inspect Element (Chrome), choose Network, and then reload the page. Click on the URL on top (in blue below), and you’ll see “content-encoding:gzip” in the Response Headers section.
Gzip Summary
Gzip Compression is one of the easiest items to implement as a developer, and depending on the website, it can speed up your site significantly.
Asyncing Render-Blocking Resources
The last recommended item to fix is “render-blocking resources”. Every file that makes up your site has instructions on how to load. Some files (by default) will require the browser to load them completely before loading the next file. These are called “Render-Blocking” because it’s blocking the next file from downloading. You can overcome this hurdle by allowing the browser to download the next file at the same time as the first: this is called “async”.
Some files (by default) will require the browser to load them completely before loading the next file. These are called “render-blocking”.
This is not as easy as just applying a setting, though, because some files MUST be downloaded fully before the next file is downloaded. If they aren’t, the website will break.
Every website is different, so you’ll need to test the settings of any plugin in multiple browsers to make sure that nothing breaks your site. If you find that it broke something, revert that setting; I would test every couple of changes just to be sure.
As mentioned under the images, I use LiteSpeed Cache on most of my sites. This plugin might work for you, or it might break your site. You can also try Async Javascript, or any other “async” plugin that your heart desires.
While the directions below will be in LiteSpeed Cache, the settings will be similar to other plugins.
First, choose “Show Advanced Options” in Litespeed, so you can see “Optimize” and “Tuning”.
Optimize > Load JS Deferred: I would suggest trying “Load JS Deferred”, and exclude the jQuery. JQuery should never be loaded asynchronously if you’re using jQuery on the site, or all the jQuery will break. If you’re using WordPress, you’re almost certainly using jQuery.
CSS: I almost never load CSS asynchronously because the site will flash without styling and then show normally. Most people feel like there’s something wrong with the site when they see that, which is not the first impression you’re looking for.
Fonts (especially Google Fonts): Same issue loading asynchronously here. If you turn this on, it will flash in whatever standard font is on the computer, and then load the Google font.
Tuning > Remove WordPress Emoji: I remove these (set as “true”), since I don’t use them. I haven’t seen this option in other plugins, though.
Minifying and Combining Files: There are multiple options here regarding CSS and Javascript/jQuery. These will be specific to the site, so turn them on, test to make sure the site is ok, and adjust as needed.
Speeding Up Your Site Summary
Making sure your website loads quickly can be incredibly helpful in your Search Engine Rating as well providing a much better user experience to your users. These three items, Image Optimization, Gzip Compression, and Asyncing Render-Blocking Resources, can be the quickest ways to speed up your site.
Do you need help? Contact us.
