Why should you read this article?
- For those of you who are new to this and see too many new terms
- For those of you who may have been doing FE for a while but still sometimes don’t know such a thing exists in the world.
- There are a few keywords to optimize website performance
Common terms
In this article, I will talk about optimization related terms!
Code split
To put it simply, you have a very large code file, you split that large file into many small files, it’s called code split.
Or another example is you have a website built with React, which includes Header, body and Footer. Then you can build a bundle.js file including all 3 components above or you can also split that bundle into 3 files, each file contains a component
Think of code split simply as you cut a large piece of cake into many small pieces
Lazy load
Lazy loading means a way to delay the loading of a resource until it is really needed
As in the video above, it will be quite resource-intensive if we load an image that the user does not really need to see. Therefore, it applies lazy load so that when we are close to scrolling to that image, it will load the image. While saving CPU for the user’s machine, it also saves 3g for people
Resource here you can define as anything like
- A code file
- An
img. tag - A library
- A response from the API
When thinking about lazy loading, you need to think: What can be lazy and what can’t be lazy. Separating which resources can be lazy loaded and what cannot be lazy loaded helps you have a better resource management strategy.
Back to the above term Split code as an example. Your question is to cut the big bundle into many small bundles for what?
The answer is usually you cut it into two parts: the part that can be lazy-loaded and the part that can’t be lazy-loaded.
Therefore, you will see that the concept of lazy loading is often associated with split code because lazy loading the resource code needs to cut it into many smaller chunks to implement lazy loading.
Theoretically, all resources related to user interaction (Scroll, click, hover, press, …) can be lazy loaded
Prefetch/Preload
Prefetch means you tell the Browser “I have this resource, when you are free, please load it first”
Preload
Preload means that you tell the Browser “Load these resources first for me, if you are free or not, load ”
Ok so when should I use prefetch or preload?
Prefetch is useful when you believe the user will need some of these resources in the future. For example, when a user hovers over a link, I’m not sure if the user will actually click on this link, but it’s highly likely. So if I prefetch this link before, if the user clicks it, it will already be loaded with cmnr, so this page will load quickly vkllllllllllll
Preload is useful when you need extremely important resources for the first render. The most obvious example is Font, preloading the font helps your website render for the first time, the visuals are also ok. Instead, if you render to the web page without the font, then load the font and then have to render it again. Changing the font like that easily causes the layout to be flicked and from the user’s perspective, it is quite bad
Tree Shaking
You imagine your code/module pile as a tree. Now you hold that tree and shake it really hard, what will happen? The weak components on that tree will fall out such as old, dry branches, nests, etc.
Tree shaking in code is similar, you remove unnecessary things in the code (dead code) automatically.
This is like reducing the “fat” for your bundle, which will help load the web faster, without wasting time on unnecessary things.
SEO
Short for Search Engine Optimization – Optimizing for search engines. Simply put, there are countless websites on the internet, right, and when you search Google, it will return you hundreds or millions of results. So how to make your website higher on that list so that more users know it?
So SEO is a way to optimize a website to help it rank higher in search engines like Google, Bing
Google will have many criteria to decide whether your website is suitable for users such as Content, keywords, images, page load speed, language, etc. So when you say SEO, you do enough. style so that those criteria are better, more suitable for users (of course, according to Google’s criteria)
Google Page Speed
It’s this page
Google built a tool to measure the speed of your website and give it a scale from 0 to 100. The higher the score, the faster your website “loads”
Usually this is a criterion that everyone uses to see if your website is relevant or not.
I think it’s relatively good, but people rely on it too much to judge a website
The fold
The fold means you cut the web page horizontally, above the fold is what hits the user in the face immediately when they open your website. What is below, people have to scroll down to see.
And since the definition is what hits the user in the face immediately, the concept is quite… relative. Because users can use different devices, different sizes. Can hit the face on the MateView 4k 27inch screen with the Dell FullHD 24 inch screen it is different so the fold in those two screens is also different.
Why distinguish the fold? It helps you to optimize for users like
- Above the fold, it loads as quickly as possible because it is what appears immediately when the user opens the website
- Below the fold, you can apply lazy load because the user has to scroll down to see it, right
CSS critical
Is a way to extract the above the fold CSS separately to optimize loading speed.
Remember the thing I said above is optimizing for things Above the fold, this is a way to optimize Above the fold. Although the idea of just injecting CSS above the fold is pretty cool, it’s actually very, very difficult to do this. So I find it fun to listen to)
CSS in JS
The name says it all: Writing CSS in JavaScript.
But why not write in the css file?
When using css at the same time in combination with libraries, or frameworks that are almost full, it will have some problems
- CSS is global, while I want my component to be isolated and not be, or create styles on other components
- I missed the JS code, so I stopped coding all JS
Since it’s written in CSS, it’s easier when you want to do some more advanced things with CSS like CSS extraction, critical, etc.
Service worker
As a script that runs in the background, it can intercept requests and responses between your web and the server, and do a few other cool things (Notification, cache, sync data, etc.)
Because it stands in the middle, you can imagine it as a proxy, you can change the data sent or received. So the usage of service worker is also quite creative, maybe
- Mock proxy server
- Cache the response to turn your website offline
- Precache the necessary resources
An important key when it comes to Service workers is that because it runs in the background, you can do some cool things without slowing down your website.
Web workers
Previously, the web had only one thread of execution, called the Main thread. And since there’s only one real thread, it creates a problem: When you’re working on something, other interactions have to wait for that task to finish before it can run.
The real test case is for example you code a website to calculate salary for employees, when there is a payroll calculation task running below and if it is quite heavy, now no matter where the user clicks, your website will not respond. I got it back (because I’m so busy calculating my salary, why are you making me do something else????)
Therefore, Web worker was born to solve the above problem. Simply put, if something heavy is calculated, push it to another thread, leaving the Main thread idle and handling interaction from the user.
Hydration
This word is a bit rare but it is important and is encountered in most SSR support libs.
Hydration is the process of attaching event listeners and corresponding nodes generated from the SSR process
https://github.com/thanhlmm/blog/blob/master/public/materials/lazy-hydrate.mp4?raw=true
I have a post about this here
How does server side rendering with Hydration waste resources?
List virtualization
You imagine that your web is a super long scroll and you are looking at it through a small window (Window). That means I am looking at a very small part of that scroll, and to see it all, you have to scroll.
List virtualization is a technique that only renders the DOM node located in your window, outside things leave it out of the DOM so the browser doesn’t waste resources to take care of unimportant things.
You will find this very important when applying for sites with extremely long and complex lists such as Facebook, Twitter News feed, etc.
It’s been quite long here, the more I write it, the more it gets, so I don’t know if I’m missing anything important.
In addition, do you want to learn more about terminology (Layout, CSS, state management, …)? Comment below!