Fast Loading Websites
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
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.
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
also come with responsive image solutions, so if you are using a responsive framework, check what
features it has for responsive images.
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.
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.
Any JavasScript that is needed for the initial page rendering should be loaded at the
beginning of the
<head> HTML element.
loaded at the bottom of the HTML page, just before the
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: