A fast website is crucial in maintaining a positive user experience. Evidence suggests that users become distracted if there is even a one-second delay. Every second after that increases the likelihood the end-user will leave. This is why it's imperative your website loads quickly. This article will briefly address a number of methods that you can use to speed up your website's loading time.
Tips On Improving Your Website's Loading Time
Reduce File Sizes
The amount of content that can be delivered in a discrete amount of time is limited by a finite amount of bandwidth. All things being equal, the larger the files on a site, the longer it takes for them to load. While large file sizes may not have much of an impact on users who use extremely high-speed connections (such as T1 or T3 connections), it will impact those running on slower hookups.
The best way to reduce file sizes is to run your images through various optimization techniques. Some techniques include:
- Compressing images via tools such as Photoshop and/or Compress PNG. There are several image compression tools out there that make it simple to make files smaller.
- Resizing your image so it's smaller. The smaller it is, the faster it loads.
- Picking a file type appropriate for your image. Typically, you'll choose between JPEG, GIF, and PNG. JPEG is great for quality in a small size, GIFs should only be used for thumbnails and as decorative images, and PNGs are excellent because their quality won't degrade with re-saves.
Sometimes, you might need to consider eliminating some files. The less your website has to load, the better.
Turn on GZIP Compressing
After reducing file sizes, compress images on the server using HTTP compression. This will reduce the amount of bandwidth required to load content, thus improving the speed of your website.
One way you can compress files is with Gzip compressing. Gzip can compress HTML, JavasScript, XML, CSS, fonts, and just about anything you render on your site. Gzipping can be enabled on an Apache server using the mod_deflate module in your root .htaccess file and adding a filter for each file type that your site delivers.
Caching
If a website requires a webpage load every time there is a unique visit, then every file that you have on the page needs to be downloaded individually. This includes everything from the HTML, CSS, JavaScript, and any other assets your site provides. This can lead to slow load times for a particular webpage.
The best way to prevent this is to use the caching function most browsers have built-in. Doing so will speed up the response time of a page on subsequent visits.
In addition to this, you can let browsers know to serve a cached version of a webpage by adding Expires Headers. These headers tell the browser which content is static and which content is dynamic. This is a great option to cut some of the load time for repeat visitors.
Reduce Server Calls
Too many calls to the server can lead to significant slowdowns of your website. Sending any request to a server requires full communication, including a request and response, before the page can be rendered.
Here are a number of ways you can reduce HTTP calls.
Use CSS Image Sprites
Creating CSS image sprites is one easy way to reduce the number of server calls your website receives. Instead of loading 20 individual images to a site, sprites load one large image containing all the necessary elements in it so it can be zeroed in using CSS.
Reduce Your HTTP Redirects
If several 3xx response codes appear on your website, you are likely sending users to get information from too many locations. Avoid doing this, even if it is for SEO purposes.
Fix Broken Links to Files
Anytime your site sends instructions to a server to look for a file that doesn't exist, a 404 error will appear. Too many 404s can increase your page load time.
Take the time to fix any 404s you come across. Doing so will significantly improve your website.
Optimize Your Dynamic Content
Minify
While a blank space within CSS and JavaScript files may appear to be empty to the human eye, each blank character must be read and processed by the browser engine. In cases such as these, make sure to minify by reducing the number of blank characters in files. Doing so will decrease the amount of time it takes a web browser to render content.
There are several free tools you can use to minify your files:
Use HTML
Some sites automatically convert HTML into an in-site scripting language. As you can imagine, the time it takes to convert HTML can slow down your website. It's better for your website if your content is delivered as raw HTML.
CSS at the Top/JavaScript at the Bottom
CSS should be placed near the top of your page. This ensures the page loads right away and is rendered properly.
JavaScript can take a while to load, so you want it near the bottom of the page. This way it runs after the rest of the page loads. With CSS near the top, this will make sure users at least have content while the rest of the webpage loads.
If you are using a small amount of JavaScript, avoid calling it in a separate file. Instead, to reduce HTTP requests, include JavaScript code directly on the page.
Note: if you intend to use any popular JavaScript libraries, use a CDN to deliver your content to take advantage of the fact that many people will already have these downloaded in their browser caches. This will significantly reduce page load time.
Optimize Your Database
Writing well-designed query database calls can have a significant impact on the time it takes for content to be delivered to your site. Poorly written queries can have a pronounced negative effect on page load time. This is particularly true for sites that have quite a bit of traffic and/or deliver a large number of products.
While database optimization is a large topic, here are a few quick tips.
One of the most common mistakes made by developers is to use a wildcard query to retrieve results. Take, for instance:
"select * from table_name"
A large table can slow you down quite a bit. If you don't need every field, request individual keys from the table, like so:
"select field1, field2 from table_name"
Other ways you can improve performance include making sure that the database is properly indexed, reducing correlated subqueries, and avoiding temporary tables.
Hosting Provider
A website is only as fast as its weakest link, so choosing a good web provider and plan may prove to be a crucial factor in delivering your site at optimum speeds. If you're using large central providers such as AWS, you may wish to use Content Delivery Networks (CDNs).
Use a CDN to Reduce Latency
Physical distance from the server can increase the time it takes for a server to respond to an HTTP request. By using CDNs, you can place servers in different locations around the globe, which will reduce load times for people in different regions.
Final Notes
This is only a small sampling of different techniques one can use to speed up a website. Each one could easily be covered in more detail. However, you may wish to use this piece as a checklist of techniques you can try if your site has slow response times.
Not sure if your website is running slow? That's where Airbrake's Performance Monitoring comes in. Our developer-centric Performance Monitoring software gives you the tools you need to make sure your app or website is running smoothly and quickly. With Performance Monitoring, you'll have access to requests and response times, Apdex Score, error occurrences, and so much more. Try Airbrake Performance Monitoring today with a free 14-day trial where you'll get unlimited performance events, error monitoring, unlimited users, and unlimited projects.
