One important detail that is often overlooked by web developers is not having the HTML of their web pages optimized and standardized. You may wonder why is it important? There are various reasons and ways to address them that are outlined in this blog post. A couple to call out early on are “SEO” – web page should have proper markup for search engine crawlers to categorize them correctly, “Faster load times” – this one is also a no-brainer! Faster load times means happy customers!
Logic Square Technologies has been helping clients achieve this for past 6 years. Following are the learnings we have gathered over the years of trying to create the best experience for our clients and their customers
Use Google fonts
Selecting the right font is an important aspect of any design. There are various great fonts available in the market but using google fonts has some benefits over them.
Google Fonts are free and open source (https://fonts.google.com/about). This gives developers a lot of flexibility in using them without worrying about licensing.
They are also optimized for cross-platform rendering. Different rendering systems in various browsers & mobile devices can cause font rendering errors on some devices. This can sometimes mess up the look of the entire website by displaying distorted text.
Google Fonts can also help improve the load times for your website. They are hosted on Google’s Content Distribution Network (CDN), which speeds up the downloads for them. Moreover, you also get the added benefit of “Cross-site caching” which means if the user has visited another website that uses the same font, they are already cached on the user’s computer and they do not have to download it again. This can drastically reduce the “time to interactive” for your website.
Lastly, we would also like to note that from a design perspective, it’s best to use a maximum of two fonts in any project.
Minifying HTML, CSS, JS
Minification is a process of compressing text files by removing white spaces, comments, replacing variables, function names, etc. without affecting how the resource is processed by the browser. This results in dramatically reducing the asset size that saves bandwidth speeds up the downloads, improving the performance of your site.
This minified code is not human readable or editable by hand. You will have to set up a build pipeline where you use modern build tools like webpack, browserify, parcel etc. for this. These tools also generate “source map” files. These are the files that map minified code to the original source that browsers use to display debug information in the developer console.
Compression
Compressing your content can also produce huge gains
Compression is another easy optimization technique. Earlier, it created issues with some of the older browsers but we can now safely assume that all modern browser work smoothly with gzip. In addition, to minify, you should configure your server to serve gzipped contents to further reduce download size.
The basic premise is that the browser specifies that it can work with a gzip response, in that case (if your server has compression enabled) the server responds with a compressed version of the same HTML. The bandwidth savings can be as high as 70-80%.
Configuring Apache to enable compress is quite simple – just add it in the application’s .htaccess file.
https://httpd.apache.org/docs/2.0/mod/mod_deflate.html
Similarly, nginx can be also be easily configured to do this for your application.
Optimizing Images
Images on the page can be optimized to reduce their file size without significantly impacting their visual quality. Optimizing images can yield performance improvements – the fewer bytes the browser has to download, the faster the browser can download & render content on the screen. The benefits are –
Improves Page Load Speed :
The websites having less than 3 seconds load speed are likened by the users. So, you will be improving your website speed if you choose to optimize. It will give your website visitors a faster experience, thus more users would interact with your product and services. There are many tools which can help you in analyzing your page load speed such as Google’s PageSpeed Insights, which will give you the complete insights about your web page.
Improves SEO Ranking :
Image optimization holds a great significance if you desire to improve the page load speed of your website. Faster websites rank better in the search results as compared to slower ones.
Enhance User Engagement:
If your page is loading fast on all devices, a user will spend more time there. A happy customer/user is not a myth, definitely not for those websites which are providing a great user experience. All you need to do is to optimize your website images, improve your page load speed and thus, providing a better overall user experience.
CSS Optimizations
Before the browser renders content, it must process all the style & layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded & processed, which may require multiple round trips & delay the time to first render. If the external CSS resources are small, you can add those directly into the HTML document. In this way it allows the browser to proceed with rendering the page. One must remember if the CSS file is large, adding all of it would cause delays in the quick loading of the page, reason being, above the fold portion of your page is too large. In case of a large CSS file, one needs to identify & add only those CSS that are necessary for rendering the above-the-fold content & defer loading the remaining styles until after the above-the-fold content.
Base64 encoded images
Base64 encoded images become part of the HTML & displays without loading anything instead of a web browser having to download the image. The benefit is that a webpage does not have to load an external image & reducing things a webpage has to load will naturally make that page faster. It is best to only base64 encode tiny images. If you try to base64 larger images you will end up with a great amount of code in your HTML & lose out on the performance benefits.
Load only first fold initially
If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on mobile networks, this can cause significant delays to page loading. To make pages load faster, you must limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page.
Some of these techniques might seem obvious things to do but you would be surprised to see how many developers ignore to take advance of this easy optimization. Creating a great experience for your users requires hard work and discipline. Finding these best practices are not difficult, for example, a Google Chrome extension “Lighthouse” can analyze your web page and give you detailed instructions on how to improve it. If you are ready to work hard & smart, it would reflect the final output that you deliver.
