Share on facebook
Share on google
Share on twitter
Share on linkedin

Tips to Increase Site Speed

Page speed can get pretty technical, so we’ll break it down for you to make it easier to follow. Pay attention to the following tips, and you’ll be well on your way to decreasing your load time.​

Minify your HTML, CSS, and JavaScript

Every time a website loads, it has to run through all of the HTML, CSS, and JavaScript code that makes up the site. Every time. The longer and more cluttered the code is, the longer it takes to load.

There are tools to use that help “minify” all your code; however, you can also do this manually by removing blank spaces, comments, or unused code. If these are things you need for future development, create a new branch for production with minified code and let your development branch be slow.

If you don’t know what a minified file of code is this diagram will help. The code on the left is regular CSS code. The code on the right is the same as the left, but without the blank spaces. It is more difficult for us human beings to read, but a lot easier for the computer, and therefore faster.

Reduce Redirects

A redirect is a feature of a site that sends a viewer to a different URL. For example, if you visit our site you will be automatically redirected to where our website actually resides, at Redirects take time, so keep them to a minimum. For example, try to serve the site directly to your mobile audience without redirecting to a mobile version (NOTE: this is not the same as building a mobile-first site). If you have a complicated redirect pattern, it will increase load time.

Avoid Render Blocking JavaScript

Whenever a browser encounters a script (a piece of code written in JavaScript), it halts the process of rendering the HTML until it has processed the script. This can easily cause load delay and increase the load time for your site. Avoid using render blocking scripts as much as possible. If the scripts are not essential to the site’s first load, place them at the bottom of your HTML. Alternatively, consider using the asynchronous attribute “async” in script. A very clear explanation of how this works can be found here.

Utilize Browser Caching

A browser cache is a place where the browser stores information such as stylesheets, JavaScript, images, etc. With browser caching, a visitor’s browser won’t have to reload everything when they revisit the page and so load time is decreased. You can set caching memory time in your code. This varies depending on what language your site is written in. We recommend to speak to your developer about this, or if you are a developer, simply Google “how to set cache-memory time using…” and insert your language of choice (PHP, C++, Python, Ruby, etc.).

Use Content Distribution Networks (CDN)

A content distribution network will ensure that your site loads much faster in all parts of the world. If the site a viewer is loading resides on a server in, say, San Francisco and they are loading the site into their browser from Melbourne, Australia, all of the loading requests and messages have to travel all the way from Melbourne to SF and back, which takes time even traveling at internet speeds. 

A CDN stores copies of your website in multiple data centers spread around the country or even the globe to provide users with faster and more reliable access. It means that the SF to Melbourne exchange can be shortened to something along the lines of Melbourne to Sydney. This will help load time around the world.

Content delivery network graphic

File/Image Optimization

Make sure that images and files on your website are not bigger than they need to be (we recommend that they be generally less than 100 kilobytes). Large images uploaded in resolutions way beyond what the website requires take up unnecessary, and precious, load time.

CSS sprites can help with this by combining all images in one giant image and then choosing to only showcase particular parts of that image (which would be the specific image you want to show).

Compress Your Images

We recommend using Adobe Photoshop to compress your images to below 100 kilobytes in size. This will reduce the render time on each URL that has images.

A slow website is a bad website, so refrain from using large raw image files or excessively big resolutions.