Best ways to improve the front end loading performance ✍️
One fine day our team was assigned a very crucial task, which is nothing but PERFORMANCE IMPROVEMENT!!!.
For an end-user who is using a particular software or application, it does not really matter how it is designed or architected or what design patterns have been involved.
All that matters to them is how fast they can make their first interaction with the piece of software/app before he loses his patience.
So. Here is the challenge that was thrown at us. All our user facing tools should get loaded within a second at 1MBS internet connection.😳
Everyone in the team looked at each other with a similar question the expression on their face — “Dude, is it really possible to achieve? 😒”
Why not……..?
What do you think are the key factors we should focus on, man?🙄
Not sure. Let’s give it a shot.!!!
Why my website/app is too slow?????😫
It’s important to step before you start. Make note of all the causes that are making your site slow.
I will take you through the root causes that we figured that’s making the site slow and how did we overcome those.
Reduce the network requests calls
One of the important factors in performance improvement is to reduce the number of network calls may be it scripts, CSS, images, API etc.
Do not make unnecessary API calls during the loading time.
Caching
Why???
Cache busting is the major key point we should consider it. It will improve the loading performance.
Let’s see how can we achieve it!!!
1.Load files from the browser network cache.
2. Set the max-age in the request header.
Cache-Control: max-age=900, public3. Fetch the static contents from the cache memory(Redis).
4. Append BUILD_NUMBER as a parameter to the network request call.
Example:
<script src=”js/script.min.js?BUILD_NUMBER=12034"></script>5. Maintain versions in both script and CSS files.
Example:
<script src="js/script.min.1.3.5.js"></script>
<link rel="stylesheet" href="css/styles.min.1.3.5.css">6. If you are using angular 1.7.+ and if you are loading multiple angular templates then use angular template cache to improve the loading performance.
Use WOFF(Web Open Font Format)/WOFF2 format font files
Why???
WOFF/WOFF2 format type is lesser in size compared to other font format type.
WOFF has built-in compression. Ensure that your WOFF compressor is using optimal compression settings.
WOFF2 uses custom preprocessing and compression algorithms to deliver ~30% file-size reduction over other formats.
So which one should you use? According to caniuse, 93% of browsers support the WOFF format, and 80.91% support the WOFF2 format. Only IE8 and older Android mobile browsers don’t support it. So the best recommendation would be to provide WOFF and WOFF2 (take advantage of extra compression) to all of the modern browsers and then fall back to a web-safe font, such as Arial for the rest, which we will cover more about below.
Source link: https://www.keycdn.com/blog/web-font-performance
Supported browser: https://caniuse.com/#search=woff
Use CDN
Why???
CDN Improves the user’s experience in terms of speed
Ensuring a consistent experience for all your users is important.
CDNs not only ensure a faster experience to your users, but they also help to prevent site crashes in the event of traffic surges and It will distribute the bandwidth across multiple servers.
Use image sprites
STOP!! Loading multiple images…. ❌
Why???
Let’s say, You are using 50 Images, each image is taking around of 1sec to load, then total time is 50*1sec = 50 Sec’s. Dude!!! User has to wait 50 Sec?? Hence create an image sprite and refer the coordinates of those images in your html to display.
Lazy rendering of images
If you don’t want to go with the image sprite approach then there is another approach which is “Lazy Rendering ” of images.
Why???
Don’t Make user to wait until all your assets rendered.
Use lazy rendering of assets.
Even Medium also uses lazy rendering of assets you might have already noticed. For more details refer this.
Minify your script and css
Do not load any script/css files without minification.
Why???
If you have a low internet bandwidth connectivity then bigger script/css files will take a huge amount of time to download.
So minimize your script and CSS files as much as possible.
Use any build tools it can be webpack/gulp/grunt to minify your files.
The current trending tool is webpack.
Use gzip/brotli compression
Why???
Configure your assets to load as gzip/brotli compression format rather than loading normal. It will compress your assets to almost 50% reduction.
gzip: This HTTP header is supported in effectively all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)
According to research conducted by CertSimple:
- JavaScript bundles compressed with Brotli are 14 percent smaller than Javascript bundles compressed with Gzip.
- HTML files compressed by Brotli are 21 percent smaller than their Gzip equivalents.
- CSS files compressed by Brotli are 17 percent smaller than those compressed by Gzip.
In the end, let’s say…!
Actual script size = 5MB
Minified script size = 3MB
gzip/brotli script size = 1MB // This is what you will get if you use gzip/brotli compression.Avoid DNS Lookup
Why???
It’s an important piece of the puzzle when it comes to calculating your total page load times.
A DNS lookup, is like the process of a finding a specific DNS record. You can think of it as your computer looking up a number in a phone book.
STOP!!!! Writing inline CSS
Tool: https://rawgit.com/webbhuset/test-elm-performance/master/index.html
Why???
As a general rule, avoid including CSS in HTML code (like in divs or your headings) like in the inline CSS pictured above. You’ll get cleaner code if you put all of your CSS in your external stylesheet.
This reduces the size of your code and creates fewer code duplications. When setting up your styles, it’s also best to only use one external CSS stylesheet, since additional stylesheets increase HTTP requests.
Finally!!!!!! How to Test My Website Performance?😒
Do you want to check with low/high internet speed?
Use LightHouse: https://developers.google.com/web/tools/lighthouse/
OR
Use the Chrome Dev Performance Tool for the performance test.
How we have built Authoring Tool
link: coming soon.... ✌
Please feel free to drop your feedback in the comment section, as this is my first blog post.
If you enjoyed this story, please click the 👏 button and share to help others find it! Feel free to leave a comment below.
Thank you so much for reading this article 🙏
