Class 29 - Core Web Vitals Part 3 | Website Speed Optimization
|Free Advanced SEO Course
Watch the Full Video : Core Web Vitals Part 3 | Website Speed Optimization
Cache: Temporary storage to keep files/informations safe for repeated use.
Browser Cache: When you visit any website, the commonly used files of that website, like the logo, fonts, and all this information, are saved on the visitor’s computer. (Saving CSS, JS, images, or any other repeated file on the user’s device (Smartphone/Desktop)).
Page Cache: Saving a copy of the entire page, it’s saved on your server.
Database Cache: Saves the query of calculations that your server is making frequently, saved on your server. Memcached and Redis.
Object Cache: It is just like database cache. In this also, server-side database queries are saved for repeated use, but there is a slight difference. In database cache, the queries that are being made are saved completely. In object cache, the application decides whether to save one particular query or one particular part of the database.
Minification
Async: Async means that when the browser checks your website’s code, and the files come line by line, crawling will not stop there. The downloading process will continue in the background, and crawling will continue ahead. (Does not wait for download BUT executes immediately.) As soon as the download is completed, it will be executed at the same time.
Defer: Does not wait for download and does not execute immediately.
Delay: Not downloaded or executed until a certain time (This is done with non-important things.)
If you use defer with a file that displays text on the page, then the whole page will be rendered, but it will not have any text because the text has to come from that file, from that JavaScript file on which defer has been applied. That means it will be executed later, so the whole page will load empty first, then the JavaScript will be executed, then the text will come out, and only then will the text be visible on the page. So the page will render empty first, and then the text will appear, which will look bad. So, we use Async on such files.
And wherever you see any functionality, it means there is a JavaScript file that starts the animations. Now, even if the file that starts the animations is executed later, it is fine because the page will load first, and after that the animation will start, so this is okay. So, we have to implement both Async and Defer after thinking a little about which file is necessary for the page to render and display properly. There, we use Async so that the browser does not wait for the download, and it is executed immediately, so the page renders properly. And we use Defer for things where some functionality is involved, like loading an animation, enabling a click on a form, or a tab where a user clicks and can go to another tab only because of JavaScript. All these actions are performed by the user after the page has loaded.