How to improve loading times of your website

Developing a great website requires a lot of work. Besides the development process itself, there are a lot of things to consider. Think about SEO, content, optimizing every single page with a clear call-to-action, and so on.

We’ve built dozens of websites ourselves. Usersnap actually evolved from our work in building websites & web applications for clients.

The website performance, or more specifically the loading times of your website or web app are essential in order to provide a great user experience. Let’s take a look at some things you can do to make your website faster.

Evaluate your current status quo

Before getting started with optimizing your website speed, I’d recommend taking a look at the status quo. Working in web development, you have probably a great internet connection. Never forget that your users don’t have that.
There are great tools available for checking your website speed and evaluating your current status (see the end of the post).

Optimize your images

This is a big one. Images on your website add to the size of the page. The reason is simple enough, larger images take much more time to load. We all know it and yet, it is often overlooked. If you’re looking for information on a website, the worst that can happen is that you have to wait for an image to load. But there are things you can do. Some image optimization efforts might do the trick:

• Format selection – When the quality of the image is your top concern, JPEGs are your solution. PNG images, on the other hand, work best for logos, signs, icons, illustrations and text. Then you have GIFs. Once the backbone of website “design”, this format is now best used only for simple and small images. And last, but not least, it’s best to avoid TIFF or BMP formats.
• Compression – Image compression should never affect the quality of an image. You have to strike a balance between the quality of an image and the size. Using the JPEG format, a compression of up to 70 percent usually yields pretty good results.
• Numbers of images – Unless you’re in a very visual business, using too many images isn’t always a good idea. Try and make sure you really need that last image to be included.

Optimize your CSS

The popularity of CSS and JavaScript definitely helped websites get a rich experience without taking too much of a performance hit. However, using CSS still adds to the loading time and some small changes to your coding habit can go a long way:

• Use shorthand coding whenever possible – Using shorthand writing where possible allows you to use fewer declarations and operators and drastically cut the size of code. Use fewer lines of code, get faster load times.
• Get rid of that browser specific CSS code – Correctional declarations or browser specific hacks add bulk to your CSS files. Use speed optimized CSS code as it is simple and light and so servers can process efficiently

Minification matters!

An important aspect of website speed optimization is decreasing the number of client-server requests for displaying website content.

This can be achieved by optimizing and minifying lines of code as much as possible. Minification is particularly important for external files not cached and inline JavaScript. According to Google, all javascript exceeding 4096 bytes can be minimized without causing any issues at the user’s end.
In addition to this, simply deleting extra spaces, lines, and indentation while maintaining the readability of the code keeps your code lean and mean.

Tools for monitoring & optimizing your website speed

Pingdom tools

The Pingdom Website Speed Test is a great and free tool for testing your website speed and getting a first glimpse on how your website performs.

You get a comprehensive insight on file sizes, loading times of files (such as CSS files, images, and javascript snippets). Further on, Pingdom tools provide some recommendations on how to improve your website speed.

http://tools.pingdom.com/fpt/

Google Webmaster Tools & PageSpeed Insights

The webmaster tools from google are another – yet great – resource for checking your website performance. The webmaster tools from Google will provide you with notifications and messages regarding the mobile usability of your website and if there are any crawling errors.

I definitely recommend checking out the mobile usability since it will definitely affect your search engine ranking and the mobile user experience of your site if there are any errors detected.

https://www.google.com/webmasters/

Besides the Webmaster Tools, Google also offers a great tool for testing your website speed. With PageSpeed Insights you can test the website speed of any URL. Google exactly tells you what you should fix and what you should consider fixing on your site in order to boost your speed.

https://developers.google.com/speed/pagespeed/insights/

W3C validator

I definitely recommend checking out the W3C validator who provides you with straightforward fixes to make. Simply run a W3C test for your website and see which errors appear on your site. The W3C validator tool exactly tells you the specific line of code where the error appears.

http://validator.w3.org/

Nibbler

Similar to Woorank, nibbler not only checks your website speed but takes an overall look on how your website is perceived by crawlers and users.

The free tool from Nibbler takes a look at more than 20 parameters – such as code quality, internal links, page titles, headings and so on – and provides an overall score (between 0 and 10) for your website. Make sure to check your optimization progress regularly with Nibbler.

http://nibbler.silktide.com/

Chrome Developer Tools

Google Chrome offers a pre-set of devices where you can play around with screen sizes and network speed. I recommend testing your website in different network speed settings in order to get a glimpse on your true website speed (I promise you, you’ll be surprised how slow your website gets when using EDGE or a regular 3G connection 😉 )

W3 Total Cache

Caching is an important factor regarding the website speed, although it’s overlooked many times. Every time someone visits your website for the first time the HTML document (including stylesheets, JavaScript files and images) need to be downloaded. Once certain pages have been loaded and stored in the user’s cache, the browser loads the website faster, since the files don’t need to be requested from the server every time a page is loaded.

Static files (like JavaScript or CSS files) can have a cache lifetime of a week (or longer).

Tools like the Plugin W3 Total Cache for WordPress help you setting up your caching strategy for your website. If you’re not using WordPress make sure to check out other tools or projects (e.g. varnish cache project).

I also recommend to check out his post from Tenni Theurer on caching (the post is from 2007, but still a great resource on the basics of caching).

https://wordpress.org/plugins/w3-total-cache/

SpeedCurve

SpeedCurve allows you to monitor your website performance. Besides that, you can also monitor your competitor’s performance.

https://speedcurve.com

Automated and manual browser testing tools

Are you done with all your optimization? Well, definitely make sure to test your website in different browsers. You can automatically test your website with different automatization tools, or you can test your website manually. Not sure which one to choose? Make sure to check out this blog post on how to get started with browser testing.

Wrapping it up

Images (and the right compression and file format), stylesheet and other code snippets are truly important factors when dealing with poor loading times. By making use of these free tools you can do your homework and check on loading times and performances of your website.

This article was brought to you by Usersnap – your customer feedback software for SaaS software companies.

PS: Also make sure to check out our latest post on the most annoying issues that will kill your website performance.