Improve the Initial Load Time of Your Web Application
A tutorial on how we can optimize the initial loading time of our web applications.
Hi folks! In this post, we will see how we can optimize the initial loading time of our web applications. When visiting a website, the end user's satisfaction is highly affected by the time the site took for the first interaction.
Sometimes it becomes very hard to achieve meaningful optimizations for vast/growing applications. However, by carefully inspecting the code and using some performance improvement techniques, we can enhance the load performance of the application. Let’s explore a few approaches.
1. Using async and defer
Async and defer allow scripts to load without blocking the HTML parser, meaning user can see the page content even before the scripts load fully.
The major difference between these two- ASYNC scripts execute immediately once they finish downloading, and DEFER scripts execute after DOM Interactive. [read more].
If your script depends upon other scripts, it is recommended to use defer.
<script async src="script1.js"></script>
<script defer src="script2.js"></script>We can apply async/defer and test our applications under tools like Lighthouse for comparing before and after results. But, be patient, it may not improve the loading time drastically but will improve it at least marginally when used aptly.
2. Pre-fetch techniques
Pre-fetching is when the content is downloaded at the background with the safe assumption that the content will be used by the user later in the application.
preconnect is used to connect / make network handshake with a resource early and save us some time during the time the resource will be used.
<link rel='preconnect' href='https://*****.com'>
prefetch is used when we want to fetch something prior to its usage and we are certain that it will be used somewhere in our application. Here, it becomes important not to load very huge size resources as these will be stored in browser cache for future usage.
<link rel='prefetch' href='https://****/images/logo.png'>Above techniques can used to load fonts, static images or scripts.
3 . Implementing CDN (Content Delivery Network)
A content delivery network (CDN) is a group of geographically distributed servers that speed up the delivery of web content by bringing it closer to where users are. CDNs cache content like web pages, images, and video in proxy servers near to your physical location. This allows you to do things like watch a movie, download software, check your bank balance, post on social media, or make purchases, without having to wait for content to load.
When requested content is cached (pre-saved) by a CDN’s servers, an end user’s ISP or mobile provider gets that content by connecting to a server on the CDN’s network, rather than waiting for their request to go directly to the origin.
We can host fonts, static files and CSS, images etc. over a CDN.
4. Code Cleanup and following best practices
This is a time taking yet fruitful approach. We can revisit our codebase for code refactoring and clean-up. Some techniques are —
- Removing unused code snippets, third-party packages, imports in ES6 applications
- Following tree-shaking approach to import a package. Tree shaking is a term commonly used in the JavaScript context for dead-code elimination
import _ from 'lodash'
;import * as utils from "../../utils/utils";// can be effectively written asimport {isEmpty, pickBy} from 'lodash';
import {util1, util2} from "../../utils/utils";
- Use web workers when you need to execute code that needs a lot of execution time
- Placing JavaScript code at the top of the webpage slower down the performance. It’s good to place it at the bottom.
- Avoid using global variables because the scripting engine needs to look through the scope when referencing global variables from within function or another scope, the variable will be destroyed when the local scope is lost.
- JavaScript files can be very large that may impact the load time of your website. Gzip which is good software can be used to compress your JavaScript file.
Lazy Loading for overall performance
We can implement lazy loading for resources that are not critical for the first render to happen. this may not be our first approach when optimizing initial page loads, but it can be implemented on the first page that requires some user interaction, like scrolling /navigations.
Techniques —
- Any script tag with
type="module"is treated as a JavaScript module and is deferred by default. - CSS must be thin, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering.
- Loading attribute The loading attribute on an <img > or <iframe> element can be used to instruct the browser to defer loading of images/iframes that are off-screen until the user scrolls near them.
<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title=".. ." loading="lazy"></iframe>- Code splitting / Bundling — JavaScript, CSS, and HTML can be split into smaller chunks.
That’s all for this post. Thanks for reading!
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.
