Fast Loading Websites
Jakob Jenkov |
Mobile devices often have limited bandwidth (although it is getting better and better), and limited hardware capacity. Therefore websites often load slower on mobile devices than they would on a desktop computer. Google, as well as other companies, have stated time and time again that you lose users if your website or web app is slow. Web shops have seen the same effect. They lose customers if shopping takes too long time.
To give the users a good user experience (and thereby keep your users), try to make your website load as fast as possible. There are several ways to do that. I will cover them in this text.
Zip Compression on the Web Server
Enabling Zip compression on your web server is probably the single biggest optimization you can apply. When you enable Zip compression, all HTML, JavaScript, CSS, SVG files etc. are sent to the browser in a Zip compressed format. That will reduce the files to anywhere from 10% to 90% of the original file size, depending on the type of file.
If you are running on a Java web server (like Tomcat, Jetty, Glassfish, JBoss, Web Sphere, WebLogic etc.) I have written an article about how to add GZip compression to your Java web application using a GZip servlet filter.
Optimize Images
One of the easier techniques to increase download time of your website is to make sure that your images are fully optimized. If you can, save your images as JPEG and play around with the compression quality until you find a good compromise between the size (in bytes) of the image and its visual quality.
You can use a tool like http://www.jpegmini.com/ to optimize your JPEGs too. JPEGMini removes all unnecessary image data in your JPEGs without any loss in quality. You can save anywhere from 5% to 100+% depending on the image.
You should also think about using an image that matches the device screen size. It makes no sense to load a big, high resolution image on a screen that is too small to display it. On smaller screens, load a smaller image that fits into the website design on that screen. Displaying a smaller image also means loading a smaller image, which saves bandwidth.
Choosing image size depending on screen size requires that your website detects the screen
size and then decides what image to refer to in the <img> src attribute.
You can do that using JavaScript, or by using CSS and media queries. Several responsive web frameworks
also come with responsive image solutions, so if you are using a responsive framework, check what
features it has for responsive images.
Optimize HTML
You can minify your HTML files, meaning you remove all unnecessary characters (e.g. white space). Minifying your HTML will reduce the file size, and thus reduce the download time and the time needed to parse the file for the browser.
You should probably use a tool that creates a set of minified HTML files from a set of original HTML files. Minifying your HTML files make them pretty much unreadable, and thus very hard to work with. Therefore it is smarter to keep the unminified HTML files for working, and then just create a minified version once the work on the original file is done.
Optimize CSS
Your website's CSS styles should be loaded at the beginning of the page, if they are required during the
first rendering of the page. Load these CSS files inside the <head> element of the
HTML code. The faster the CSS styles are loaded, the sooner the browser can start rendering the page,
and the faster the website feels to the visitor.
Some CSS styles are used inside areas that are loaded later, after the first rendering. For instance, if your page loads data via AJAX, the styles used to display that data are often not used during the initial rendering of the page. These CSS styles should therefore be loaded as late as possible.
Another thing you can do to minimize download time of your CSS files is to minify your CSS files. Minifying a CSS file means to remove all unnecessary characters (like white space). Minifying a CSS file can save you a good deal of bytes. You can use a tool like http://cssminifier.com/ to minify your CSS files. Minifying a CSS file will make the file 10-30% smaller. This makes the file faster to download and faster to parse for the browser.
If you have many small CSS files, it may speed up download time if you merge them into one file. If you are using a server side scripting technology like JSP or PHP, you can keep the smaller CSS files and then use your scripting technology's file inclusion features to include the smaller file in one big file. You will then have the bigger file be referenced by your website. That way you still keep the CSS files separated on the server, while only a single CSS file is seen by the browser.
Optimize JavaScript
The techniques for speeding up the download of JavaScript files is the same as for CSS.
Any JavasScript that is needed for the initial page rendering should be loaded at the
beginning of the <head> HTML element.
Any JavaScript that is not needed for the initial page rendering should be
loaded at the bottom of the HTML page, just before the </body> tag.
You can minify your JavaScript (remove all unnecessary characters) using http://jscompress.com/. Minifying JavaScript files will typically reduce the file size 10-30% . That makes the file faster to download, as well as make the file faster to parse for the browser.
You can also include many smaller JavaScript files into a single file on the server, just like with CSS files.
Allow Caching of Static Resources
You can set some HTTP headers that allow intermediate proxy servers to cache your static content (CSS files, images etc.). You add these headers to the HTTP response for the static resources. That way intermediate proxy servers may cache them to serve their users faster.
If you use a page optimization tool like Google PageSpeed Insights (see link in last section of this article), you will be told what caching HTTP headers you need to add, and to which files.
Use HTML5 Application Cache
You can also cache files directly in the browser using the HTML5 application cache features. This way you can force files to be cached in the browser.
Tools for Measuring and Optimizing Page Speed
Here is a list of the tools that can help you optimize the speed of your web pages:
| Tweet | |
Jakob Jenkov | |
