Optimize Your Front-End Performance.

The last few years we have produced several narratives that brought about new perceptions in design and development. From the workflow and build to deployment phases of web development we have primarily focused on faster time economized, easy tools for the development process.

In this new modern web trend which has forced web development to make huge improvements as well, such as advancements made to JavaScript. JavaScript was used to build the server development platform, Node.js. Other ‘classic’ languages, such as C++, have also been able to learn a great deal from JavaScript’s stardom. In this article I am sharing few of my views and ideas for optimizing front-end performance for modern web apps.

Minimize HTTP requests to a remote server:

Each time your website loads it sends an HTTP request to a remote server. This type of data transfer is called a network protocol used specifically for distributing and storing plaintext files. These often include your basic frontend code such as HTML, CSS, and JavaScript. Our goal is to minimize HTTP requests. One way is to compile or concatenate (combining/merging) CSS and JS into one file each. Automating this process (e.g. using a build tool like Grunt or Gulp) is ideal, but at the very least should be done manually for production.

Seperate your files:

A simple trick which we can apply to our website immediately to speed up performance is to separate our CSS and JavaScript files.

CSS code belongs in the header of your document. This is useful because CSS properties need to be parsed while the DOM is loading. Once a web browser recognizes your CSS styles in the heading it will wait to fully display the web page until all styles have been loaded.

JavaScript can also be render-blocking; therefore its delivery should also be optimized, which can be done the following ways:

  1. Inlining small scripts.
  2. Loading external scripts at the bottom of the document.
  3. Deferring the execution of scripts using the defer attribute.
  4. Asynchronously loading possible scripts using the async attribute.

File Size Compression:

Compressing large files has become very popular . It can now even be utilized in web pages to reduce load times and keep file sizes very low. There are plenty of other free services on the web to help with this task. Minify CSS and Minify JS are common tools to help us with these. Or we can concatenated multiple files into one and minify the concatenated files and use them inside our site.These are well facilitated with plugins for Gulp/Grunt processors.

In case of images they are the major one which loads and make our site bulky.These days SVGs are widely popular and light weighed as its code representation of the image used by us.

You can also squeeze bytes out of images by optimizing them. There are 2 ways to optimize images:

  1. Lossy — lowers image quality
  2. Lossless — doesn’t affect quality

Consideration for fonts:

Using Webfonts make the content more legible and beautiful but can also have negative side effects to page rendering. When loading a page, especially on mobile connections, you may have noticed text becoming invisible for a period of time. This is known as FOIT (Flash of Invisible Text).

When a browser attempts to download a web font, it hides the text for a period of time until it finishes downloading the font and is ready to display the text. In worst case scenarios, the text becomes and stays invisible indefinitely, making the content completely unreadable.We can solve this by providing external CDN links for loading fonts or google font itself.

Source checking Metrices:

By analyzing all of the page elements in your website you can see which took the longest to load and the order in which each piece was loaded. The most popular tool Mozilla Firebug is a plug-in for the Firefox browser. This app installs a small toolbar at the bottom of your browser to check response times, header information, page elements, and scripts for each website. The script has also been ported into Firebug Lite as an extension for Google Chrome.

Finally, here are some tools to know how fast and what optimization can be done to our website, for higher performance.

Google page speed test tool to analyze and optimize our website performance.
https://developers.google.com/speed/pagespeed/

GTmetrix is a free tool that analyzes your page’s speed performance.
https://gtmetrix.com/

Google mobile site speed and compatibility test tool.
https://testmysite.thinkwithgoogle.com/

A free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations
https://www.webpagetest.org/