How to Reduce Webpage Loading Time

Slået op d. - Sidst ændret d.

Statistics show that 45-50% of users stay on a website for 10-20 seconds when they are looking for something, and if they don't find what they are looking for, they close the page and go to another site. If you don't want to lose potential business from a user on your webpage, you need to make those few seconds count. This is why page load time is crucial for any website.

There are a lot of factors that can help decrease your webpage's load time. Here are five that can have a big impact, as well as some tools that you can use to analyze the performance of your websites.

Minimize requests to the Web server. The more HTTP requests you have, the more time it's going to take to load your webpage. Website resources such as images, CSS files, and HTML content/files all use a different HTTP request to load. So if you reference two style sheets, two JavaScript libraries and three images, that makes for a total of eight HTTP requests sent to the server, where the first request loads the HTML code which has the links (src=”...”) and the other seven loads the resources. This causes a delay, especially if there are dependencies between them.

Decrease image size. Optimize your images. For example, if you support three layouts (mobile, tablet, desktop), try to have three different images with different sizes and load the correct one through CSS and media queries (you can read more about media queries in this article). JPEG images (or with a .jpeg extension) with an 80% compression rate are optimal, with images that still look nice but with a smaller size for faster page loads.

Minify Scripts. Nowadays, we have many (but at least one or two) JavaScript libraries loaded on each webpage. It's a good practice to use the minified JavaScript source files in the production environment. This decreases the amount of data that needs to be downloaded to the user's machine, plus you protect your application logic from unwanted eyes.

For development purposes, it's okay to use the full version of the source code, because it will let you debug and find bugs in the browser more easily. The most common tool for minifying JavaScript is the YUI Compressor, but there are other online tools for this. CSS can also be minified — please don't forget this, especially for large webpages where there are many pages that use different stylesheets.

Place JavaScript files at the end of the HTML file. This also has a good impact on page load time. In many cases, executing the JavaScript code triggers other HTTP requests, like loading data from the server or loading extra images. If this is done at the end of the HTML document, 90% of the webpage will already be available for the user before the JavaScript code runs. If you load JavaScript files at the beginning of the HTML code, it starts with extra HTTP requests that take more time to load. Users will then have to wait for the extra HTTP requests to resolve before they see the webpage and the content.

Improve the server's response time. The aim would be to get the response time for each HTTP request under 200ms-250ms. If the response from the server takes around one second or more, you need to analyze. Delays could either be caused by a backend code that needs optimization (it may need to be broken down into multiple requests, which have faster response time), or a big geographical distance between the user and a server.

Geographical distance is a major factor. If, for example, the user is in Mumbai and you are hosting your website somewhere in Dallas, the round trip from client to server and from the server to the client in this case can be significant (even 500ms). To resolve these geographical issues, many hosting providers offer the possibility to deploy your website (or Web application) in multiple regions (North America, Asia, Europe). If you need to have a fast response time for your webpage all around the globe, this can be a good option. Please note thatthis can lead to different synchronization problems, depending on your Web application's logic.

You can use Google's PageSpeed to test your website's loading speed. It also offers hints on how to fix the issues. Inside Chrome, you can use the Chrome Developer Tools to see how much time it takes to load each of the resources, and it offers a nice time-based interface view that shows the load flow.

You can read more about optimizing and increasing webpage performance at the Google Developers website. Check out the Optimizing Performance section and Mozilla's Tips for fast-loading HTML Pages.

Oprettet 12 maj, 2015

Greg Bogdan

Software Engineer, Blogger, Tech Enthusiast

I am a Software Engineer with over 7 years of experience in different domains(ERP, Financial Products and Alerting Systems). My main expertise is .NET, Java, Python and JavaScript. I like technical writing and have good experience in creating tutorials and how to technical articles. I am passionate about technology and I love what I do and I always intend to 100% fulfill the project which I am ...

Næste artikel

5 Things You Need to Know About Social Media Marketing