Postcard {3} : Optimize The Front-end
What is front-end optimization? Why do we need it? Is my site optimized? How can I improve? All the key concepts and useful resources in a 5-7 minutes bundle.
Once upon a time, in the context of web development, the meaning of “optimization” was just optimizing the database queries. But with the advancement of web technologies, the topic got various dimensions in the last decade. Especially, in the era of front-end heavy apps, SPA and Jamstack, the optimization of Front-end deserves serious attention.
In this edition, I’ll try to compose a primer on front-end optimization with necessary topics and useful tools.
What is front-end optimization?
Front-end optimization is the process of improving the performance of a website or web application by optimizing the front-end components, such as HTML, CSS, and JavaScript. Front-end optimization can help reduce page load times, improve the user experience, and increase the overall efficiency of the web application.
Why should I care?
Unbounce surveyed 750 consumers and 395 marketers, and a key finding was - 70% of consumers admit that page speed impacts their willingness to buy from an online retailer. Also, 46% of users bounce if a landing page loads longer than five seconds.
Google says actual user behaviour shows most people bounce after 3 seconds. So, optimizing the performance of the front end should be considered with utmost importance.
How can I optimize the front-end of my web app?
There are several techniques and processes to improve the performance of the web app front-end. Here are a few key techniques to start with:
Minimizing HTTP requests: Reducing the number of HTTP requests made by the browser can significantly improve page load times. This can be achieved by combining multiple files into a single file (e.g., combining multiple CSS files into a single file).
Minifying assets: Minification refers to the process of removing unnecessary characters from code, such as whitespace, comments, and block delimiters, without changing its functionality. Minifying HTML, CSS, and JavaScript files can reduce their size and improve page load times.
Compressing assets: Compression refers to the process of reducing the size of files by encoding them in a more compact format. This can be done using techniques such as gzip compression for text-based assets (e.g., HTML, CSS, and JavaScript) and lossless compression for images.
Caching assets: Caching allows the browser to store commonly-used assets locally so that they don't have to be downloaded from the server each time the page is loaded. This can significantly improve page load times for repeat visitors.
Optimizing images: Properly optimizing images can also help improve page load times. This includes using appropriate image file formats, resizing images to an appropriate size, and using tools such as image compression software to reduce file sizes.
Using a content delivery network (CDN): A CDN is a network of servers that are used to deliver content to users based on their geographic location. Using a CDN can help reduce the load on the main server and improve the speed of content delivery to users.
Please don’t get overwhelmed - with the right tools and processes, most of the things above can be automated. It’s not as complex as it may look. 😌
A few upcoming episodes of BetweenCurlyBrackets will contain hand-picked resources and recommendations on minification, compression and caching of static web assets (e.g. CSS, Js Images).
🎛 Key metrics to determine front-end performance
There are several key factors that can be used to determine the effectiveness of front-end optimization. Let’s be familiar with the most important ones.
Speed Index: First Contentful Paint marks the time at which the first text or image is painted
Time to first byte (TTFB): This is the time it takes for the first byte of data to be received from the server after a request is made. A low TTFB indicates that the server is responding quickly to requests.
First Contentful Paint: First Contentful Paint marks the time at which the first text or image is painted.
Time to Interactive: This is the amount of time it takes for the page to become fully interactive.
Total Blocking Time: Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.
🛠 Tools to audit and optimize the front-end
How can I measure if my app is front-end optimized? The following are a few tools that can be used to audit the front-end optimization of a website or web application.
Google PageSpeed Insights analyzes the content of a web page and generates recommendations for improving its performance. It provides a score for the page based on its performance and provides specific recommendations for improving the score.
Lighthouse is an open-source tool developed by Google that can be used to audit the performance, accessibility, and SEO of a web page. It can be run from the command line or as a Chrome extension.
WebPageTest is a web-based tool that allows you to test the performance of a web page from multiple locations around the world. It provides detailed performance reports and recommendations for improvement.
YSlow is a browser extension that analyzes web pages and provides recommendations for improving their performance.
GTmetrix: This is a web-based tool that analyzes the performance of a web page and provides recommendations for improvement. It also allows you to test the page from multiple locations around the world.
If you like this post, please subscribe to receive new posts from BetweenCurlyBrackets immediately. Also, I appreciate a follow on Twitter.
📢 News and Updates
PHP has now a well-written OpenAI client and a Laravel package on top of it. Here is a quick intro to getting started.
Docker is bringing Extensions for Docker Desktop that will let us use third-party tools to extend its functionality.
Taylor Otwell announced in a recent tweet - the Laravel Certification program is no longer official!
🐦 Tweet of the week
Many people are afraid of losing their job because of AI and ChatGPT. On the other side, programmers are finding out innovative ways to use them to make their job easier, quicker and effortless.
This guy is using Python examples here. But you may try the same ideas with PHP, Javascript, Golang, Swift or any other modern language.
🥳 Fun!
The result of live web analytics: when your app has tons of awesome features, but it takes 39 seconds to load.
It’s 2023 here! So what is your plan to make this year significant? What are you planning to learn? Please share in the comments so that we can discuss interesting topics together.
Happy Coding! 👋