Today, web application owners are not as constrained for creating visual, rich web interfaces as they have been in the past. Never before has the visual interface of websites been so important. It is a true deciding factor for visitors to stay or turn-away, as more than 50% of people leave a site today in fewer than 15 seconds.
And although a rich user interface adds to user conversion rates, a poorly implemented web front-end cause poor performances on the application and eventually leaves the user extremely dissatisfied.
Web front-end usually consists of HTML, Java script, CSS, images, XML etc. - each of these interacting with the others to display the application interface and make user actions possible. Each of these front-end element have to be downloaded from a web server. Obviously the size, prioritization of download, number of HTTP requests to the web server and rendering of each of these components will decide the user’s perspective of web application speed. Hence the performance of web front-end is as important as the back-end performance… if not more.
At Innominds, we know first-hand this can be challenging. So to help, we have created 9 simple tips to help you optimize your web page performance.
1. Reduce the number of HTTP requests
HTTP requests are used to get the HTML content and all the resource files (scripts, stylesheets, images, etc.,) that are required for rendering the HTML page from the web server. Once the browser receives the HTML content from web server, it parses the content and sends one additional HTTP request to get each resource file that is needed. HTTP works on top of TCP/IP and each request has to first establish the TCP connection with web server, and then follow the standard set of TCP procedures before it starts the download of content. Each file is downloaded over a separate TCP connection. Hence the larger number of HTTP requests to the web server the more overhead on file downloading.
Our recommendation, therefore, is to keep the number of files that need to be downloaded to a minimum. This can be achieved by avoiding features that may not be necessary and clubbing multiple files, like JS and CSS files, together wherever possible.
2. Keep Java script and CSS in external files
It is not recommended to write the Java script stylesheet code directly in the HTML page, but to keep the script and stylesheet code in separate files from the HTML page. Writing script and stylesheet code directly in the HTML page will increase the page size and, thus, increase the time it takes to download it. Most of the modern browsers support the client-side caching and these browsers store the resources, like scripts, stylesheets and images, in the cache of the browser.
If the script or stylesheet is directly written in to the HTML page, browsers will download the entire HTML page for every fresh request to that page and lose out on a huge advantage that the browser cache provides, particularly for the application whose users are typically returning users.
3. Include the script files at the bottom of the page
Generally, browsers support parallel downloading to get resources from the web server. Parallel downloading is downloading more than one resource file simultaneously. However, script files doesn’t support parallel downloading, which in-turn means that while a script download is in progress no other resource file download is allowed.
Including the script file links at the top of the page will block the downloading of all other resource files of that page. This will display a blank page for the user until the script file is download, which will then lead to an increase in user-perceived download time. On the other hand including the scripts at the bottom of the HTML page will improve the user experience by allowing all the other resources to be downloaded in parallel before the script file begins to download.
4. Include stylesheets (CSS) at the top of the page
Similarly with the stylesheet files, it is recommended to include them at the top of the page typically in the head section of the HTML page. Including stylesheet files at the top will allow the browsers to render the page progressively instead of displaying the white blank page to the user.
If the stylesheet files are included at the bottom of the page, it wouldn’t allow browsers to render the page until the CSS files are downloaded. A blank page is displayed until that happens.
5. Minify Java script and CSS files
Removing unnecessary characters, like white-spaces and comments from a file, is called Minification. Minifying JavaScript and CSS files will remove the unnecessary characters from the file and will reduce the file size and execution times. Remember, smaller files always take less time to download. There are many freeware tools available for minifying the JavaScript and CSS code.
6. Use GZip for compression
Gzip compression of the text file based components, like HTML, JS, CSS, XML, are supported by almost all of todays browsers. A simple configuration change is required to enable GZip compression on the web server. Once GZip compression is enabled, the web server will compress the files and send them to the client along with an HTTP header indicating the components are compressed. When browsers receive the GZip contents from the server, they identify it using the header and handle the compressed components accordingly so that the browser can render the content. Compressing the files using GZip will reduce the total size of the HTTP response and drastically reduce the download time.
Note: Binary files like media files, PDF files, images, etc are already compressed and don’t really provide an added advantage if compressed again using Gzip. It may, in fact, unnecessarily add an additional processing overhead on the server and browser.
7. Remove unused files from the Page
Many times developers include links to external files in the HTML page while designing the page and forget to remove unwanted or duplicate links and files. This will cause the browser to make unnecessary calls to the web server, impacting the page download and rendering times. So whenever a file link is no longer used or required, make a habit of removing them from the HTML page.
8. Use CDNs
Modern day web-applications are accessed by users spread across the globe. If an application is deployed from a location far away from the point of application deployment , the user experience could be very poor. So if having multiple instances of the application in different geographical locations is not feasible, make sure to at least provide static content to be served from web servers spread across various geographical locations.
The technology of serving static content from geographically distributed web servers to users depending on the proximity of the user to server is called Content Delivery Network. Static content like JavaScripts and CSS images make up the majority of the page size, and serving these resources to users from a near location will dramatically improve the page performance. There are many Content Delivery Network (CDNs) services available for those who cannot have their own static resource servicing web servers. Contact us at Innominds to learn more about this.
9. Use optimized images
Using optimized images and choosing the right type of files for different images will improve the performance of the application many times over. Usually the optimized images will retain most of their color and other information without too much loss of details when optimized images are smaller in size. In general, JPEG images are preferred for displaying colors (for example photographs, images for slide shows) and PNGs are used for displaying text, logos and images with alpha transparency.
For more information on optimizing web page performance or help with some of the challenging projects you are faced with, contact us at Innominds!
