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.
Minimize HTTP requests to a remote server:
Seperate your 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.
- Inlining small scripts.
- Loading external scripts at the bottom of the document.
- Deferring the execution of scripts using the
- Asynchronously loading possible scripts using the
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:
- Lossy — lowers image quality
- 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.
GTmetrix is a free tool that analyzes your page’s speed performance.
Google mobile site speed and compatibility test tool.
A free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations