Skip to content

How Can I Improve Page Speed? (+Tools to help you get it done!)

In our last two articles, we talked about how page speed affects SEO and introduced tools to measure your page speed. Some of these tools provide suggestions to improve page speed. Although they may seem daunting, quite a number of them are not as difficult as they seem. Today, we will try to break down some of the more common suggestions, together with some tools to help you with the process. Let’s get started!

Ways to improve page speed

 

1) Optimize images by resizing and compressing them

Larger files take more time to download as compared to smaller files. Often, the biggest culprit contributing to web page size is high quality images. Thus, by optimizing your images, you reduce your web page size which results in a shorter page load time. There are two steps to fully optimize images – resizing and compressing.

  • Resizing

Images should be resized to the dimensions needed on the page. For instance, if you want a 300px by 300px image, the image uploaded should match that exact size. Do not upload a 1000px by 1000px image and alter the size using CSS or HTML tags (e.g. width = “300”). Not only does the larger image take longer to load, it takes extra time to shrink it down to the correct dimensions.

Tools to use: You can resize images using Paint, online tools such as Canva, Picresize or downloadable ones such as Image Resizer for Windows. All of them are easy to use and requires minimal effort.

  • Compressing

After resizing your images, to further reduce the file size, compress them. Image compression combines similar colours and removes useless image data. When done properly, the change in image quality is not noticeable to the human eye.

Tools to use: You can compress images using online tools such as TinyPNG/TinyJPG or Compressor.io. There are many free online image compression tools out there so explore and find ones that you like.

For WordPress: Resizing and compressing images manually can be tedious, especially with many images. If your site uses WordPress, you can install plugins such as WP Smush which you can configure to do the job automatically.

2) Minify resources such as JavaScript, CSS and HTML

It’s completely fine if you are not sure what JavaScript, CSS and HTML means. Basically, they are files that make up the coding of your web pages. To keep it readable, web developers usually write these codes with extra spaces and line breaks. By minifying these resources, any unnecessary space is removed, thereby reducing the overall size of your page. A smaller page size equals a shorter page load time.

Tools to use: There are many tools out there that can help to minify these resources.

JavaScript: UglifyJS2, Closure Complier

CSS: CSSNano, csso

HTML: HTMLMinifier

However, for those of you without any coding knowledge, these codes and tools may be too difficult to utilize. Luckily, there are people who incorporate these codes into more user-friendly interfaces such as refresh-sf.com.

For WordPress: The process can be simplified with plugins such as Autoptimize.

3) Leverage browser caching

To display any web page for the first time, the browser has to download all the page resources from the web server. This includes HTML files, images, JavaScript files etc. When browser caching is enabled, some of these resources are downloaded and temporarily stored. As a result, subsequent visits to the same page or site will load faster as less components have to be downloaded.

The manual method to enable browser caching is to add a set of codes to your .htaccess file. Depending on the type of resources, they can be set to stay cached for varied durations (expiry time). Usually, the duration depends on how often the resource is changed or updated. For example, a later expiry time is set for static resources such as logos since they do not change frequently.

For WordPress: The caching can be done through popular plugins such as WP Super Cache or W3 Total Cache. WP Super Cache is suitable for beginners as it is easy to set up. On the other hand, W3 Total Cache is more useful for experienced users since it requires advanced configuration. It also provides minifying functions.

Optional: If required, you may consider setting up a Content Delivery Network (CDN). When in place, a CDN stores your static resources on its servers across the world. This means that when someone loads your page, the static resources are downloaded from the server that is closest to them. This reduces the page load time. Cloudflare CDN is one of the well-known ones that provides a free plan.

Moving Forward

Of course, there are suggestions out there which we have excluded as they lean towards the more complex technical side. Now that we have discussed the full picture about page speed, go on and start improving your page! If that seems like too much work for you or if you have any more queries about the topic, feel free to reach out to us!

mm

Zachary is a Business Development Executive in Appiloque. In the after-hours, he serves as a Division Agent, taking back the city of New York when all else fails.

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *