Load speed improvement tips storage

Add Expires Headers: your server is not instructing visitors’ browsers on how long it should keep some of your files before downloading them again. This means that each time they refresh a page or visit a new one, they may need to download all the same CSS files, images, and javascript files again. This significantly increases load times. Adding Expires headers is simple and involves modifying your .htacces file or installing the Far Future WordPress plugin that does it automatically.

————————-

Combine JS scripts and CSS stylesheets: each element (javascript, CSS stylesheet, image, etc.) requires a separate server request to download. More requests = longer load times.

Currently, your front page references 32 Javascript files and 21 CSS files. That’s 53 requests just to load scripts and stylesheets. Quite a lot.

You can reduce this by combining multiple Javascripts into a single JS file, and multiple CSS stylesheets into a single CSS file. This way the number of files that the user must request is reduced, which reduces the number of HTTP requests, which reduces load times.

The Merge + Minify + Refresh plugin for WordPress does this automatically.


Delay loading of Javascript: it appears that around 1.1 MB of JavaScript is being accessed during the initial stage of loading your page. Here are the files involved.  The user needs to wait for the scripts to load before the page is fully shown in their browser.

A good plugin for solving this is Async JavaScript.

You seem to already be using an Asynchronous script loading plugin, so it’s probably a good idea to take a look at its settings and see if there are more scripts that can be delayed.

——————

Serve resources from a single URL:

For example, these URLs:

  • https://www.sidehustlenation.com/wp-content/uploads/2017/11/listen-to-the-side-hustle-show-2.jpg
  • https://www.sidehustlenation.com/wp-content/uploads/2018/08/listen-to-the-side-hustle-show-2.jpg

are both referenced when loading the front page even though they point to the same image.

It’s best to use just one URL.

This would save you one HTTP request and reduce the size of data the user must download by 35.7KB (~8% of current total page size)

——————-

Use a Content Delivery Network (CDN): I recommend CloudFlare. It’s free for bloggers and easy to set up – you just create an account, then point your domain’s DNS at CloudFlare’s servers and that’s it.

CloudFlare will keep a cached version of your website on multiple servers around the globe and will serve content to your visitors from the server closest to their location. This way, data will take a shorter time to reach the visitor and the website will load quicker for them.

————————–

Better image compression: you could reduce the size of your front page by up to 130 KB (over 20% of its current size) by using better compression. Here’s a list of your front-page images that could use better compression.

A great tool for this is Smush, which will Compress all new images you add and can also compress existing images.

If the above doesn’t help, try the PNG to JPG plugin. This will automatically convert any PNG image you upload to JPG format and allows you to set a compression threshold. I find that setting the quality to 70-80% strikes an ideal balance between aesthetics and file size.

——————

Enable GZip compression: right now, your content is being served to visitors uncompressed, which increases its size significantly and makes it take longer to download. You can enable Gzip compression either by asking your hosting support or by activating the Enable Gzip Compression plugin for WordPress. This should reduce the size of your front page data by around 400 KB, or around 24% of its current size.

———-

Leverage browser caching: right now a lot of your files are not leveraging browsers’ ability to cache files. Instead, the same CSS files, scripts, and images are being downloaded again each time the visitor reloads a page or visits a new one. Generally, you want to have both Expires Headers and Browser Caching to avoid problems in some browsers. This WordPress plugin will enable Browser Caching for your website. Here is a list of all the files that are not currently leveraging browser caching.

Minify CSS and Javascript: the M+M+R plugin will remove unnecessary whitespace from your stylesheets and scripts as well as shorten certain pieces of code without affecting what the code does. The result will be smaller files that load quickly.

This could cut the size of your page by 57KB.

————-

Serve scaled images: currently, two of your front page images are being uploaded to your server in large format, and then their size is reduced in the visitor’s browser using CSS or HTML.

Instead of requiring the user to download the full-sized image (which takes more time) and then resizing using HTML/CSS, consider reducing image size to their intended display size before uploading them to the server.

Serving scaled images could save you up to 270 KB (22% of your front page’s current size).