Why and how you should optimize your HTML

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 Page Speed 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.

Read full blog here - https://logic-square.com/why-and-how-you-should-optimize-your-html/