I am looking for a method to measure the time difference between:
the time it takes to load and completely reach TTI for example.com/page-B given that example.com/page-A is loaded.
Well, the thing is I am thinking about an idea to mix server side rendering and client side rendering, but I want to collect data to know if this is a good idea or a bad idea.
Please note that I am not looking for opinions (which are off-topic here). I am looking for a specific method to do a specific task.
The following text is an explanation of what I am doing and why I want to do it, so that it may help to understand the situation and what method can fit the case.
I am going to refer to common elements in a common HTML page with the following labels:
html-head: Everything between
page-header: Well, what is commonly understood as a page header. Probably a
<header>element with a
<nav>inside, some logo, and so on. The first piece of HTML that is usually found in every webpage.
main-content: The content that makes each page in a web different. The content itself, be it the contact form and its surroundings, a gallery, a post, the main content of the current page that makes sense on its own.
footer: The page footer and also the closing
The idea (simplified)
A. First request to server
Server spits out a plain HTML page including everything.
B. Following requests (done via JS)
B.1. Server spits out only the
main-content in plain HTML. Not JSON encoded, no properties, just the plain HTML.
main-content in the original already loaded page gets replaced with the new
The idea (explained)
The first request to the webpage will contain the server side rendered content in a traditional way, using PHP as the backend.
The following requests will fetch server side rendered HTML for
main-content only. No
So, once the page is loaded with the common
<head> with my webpage general
style.css and the navigation is set up, I can just remove the
<div id="main-content"> child elements and replace it with the new fetched
But I am unaware of the practical benefits of doing so, and I don't want to get lost into random ideas that may lead to a waste of time and a useless result.
- Intuition 1: Not having to redownload the
fontawesome.css...) for each page request will save time. But browsers cache it anyways. So, is this a benefit or does it not make a difference?
- Intuition 2: Not having to render the page starting from scratch (read the meta tags, setup a new HTML document, render the header, the footer...) will save time. But since the "big part" is actually the
main-content, and I plan to replace that, is there any real benefit in doing so? I mean, it would be very clear that replacing only a small piece of content will make a difference, but does the same apply if I replace the whole
main-content? Could it happen that this makes it even worse (to tear apart the DOM and throw new stuff into it a few times)?
Well, this seems like re-inventing the wheel. Angular, React, Vue... all those already offer ways to achieve a similar or even better effect.
This idea comes because I am "breaking" WordPress for myself (actually opensource). I realized there is a lot of code that I never use. A lot. There are many alternatives to WP, sure. But I like the way it works, the "event driven" architecture (actions and filters), te concept of post types... it's just good an easy to work with, and I built several things that I want to reuse because they are solid and took time to build.
I could use a headless version of WP and build a frontend entirely with some API and so on, but I came up with this idea and I like it and I want to take it to a further point and see if it fits my expectations, before deciding to use something else than the currently "bloated" (not hating!) WP CMS.
I would also be thankful if you provide some points about this being a good idea or a bad idea. I know this falls into opinion territory, and this is not the scope of the question. But I would appreciate it if you share some side-thought(s) you may probably have while trying to interpret the question.