To make a web site load faster, Cache, Cache, Cache ! and that’s where you are wrong ! There are many situations where standard caching simply won’t work and that is where web components come to save the day.
Web.dev is the latest standard dictated by Google and it states that a Google website should load under 2.5 seconds. So, the big question now is how do we improve page load speed.
Now, let’s be honest a lot of website are not static sites. The content changes when a logged in user is detected. If you have a simple login method in your site’s header and want to display to the user that she is logged in.
You are actually generating a new page for every user as this header changes for every logged in user. So by caching plugins your home page will be cached whenever a new user logs in which will generate insane amount of cache. Eventually, you will either run out of space or you will turn off the cache and leave your poor site site on her own.
So, the solution is to somehow the dynamic elements once the cached page has loaded. This solution is widely used by several top sites already, the result is faster page generation and less wait time for the user.
Lets take a look at Udemy’s header. The entire page loads extremely fast and the logged in user is displayed later.
Linkedin Learning [ Lynda ]. employs similar strategy to load logged in user and related courses to display to the user.
Lets look at the course page of Udemy in slow motion so that we can observe how the components load on the page
The trick is to leverage the best of what caching has to offer and yet keep the dynamic elements dynamic by loading at a later stage. Now, there are many benefits :
a. As all pages are cached, the server is not required to render these pages again for users, hence the load is removed.
b. The entire load of loading the page with dynamic elements like [ logged in user detection, related course recommendation, pricing, course status ] is distributed for the server from 1 specific point to a series of smaller and faster hits.
Web components can be build using standard javascript or any modern libraries like ReactJS or VueJS. The react 17 hook based with react Portal is actually perfect for implementing Web portals and we have used similar technique in our WPLMS project version 4.
You will have to see above video at least twice to see the order of how web components are loaded on the page. The web page is loaded first then logged in user and then the buy now button of the course.
Web components maintain their own lifecycle and have the ability to pass-on information to other components. Web components essentially break down the initial server load into several small hits. WordPress now has a huge inbuilt set of react based components which can be leveraged by developers into building faster interfaces and sites.