Page load optimizations

[Stefan4472]

This is a general issue for tracking commits related to improving page load metrics as measured by WebPageTest and Google PageSpeed

https://www.webpagetest.org/result/230407_AiDcTA_6H2/ https://pagespeed.web.dev/analysis/https-www-stefanonsoftware-com/wke3b65vfr?form_factor=mobile

[Stefan4472]

106 should improve load speeds because it reduces the number of Javascript sources to load.

[Stefan4472]

Also, the new Bootstrap JS Bundle (which includes Popper) should further improve load speeds by a bit #105

In total we've removed 2 JS references.

[Stefan4472]

Statistics from www.webpagetest.org:

Version	TTFB	Start Render	FCP	Speed Index	LCP	CLS	TBT	DC Time	DC Requests	DC Bytes	Total Time	Total Requests	Page Weight
v0.2	1.325S	2.500S	2.459S	2.500S	2.459S	0	.030S	2.807S	14	480KB	3.067S	15	481KB
v0.1	.834S	2.000S	2.028S	2.304S	2.778S	0	.000S						245KB

It's a bit of a mixed bag, and unfortunately I don't have a big enough sample size to make high-confidence conclusions. v0.1 had a 2.0sec speed index, while v0.2 had a 2.5sec speed index -- but this can be explained by the fact that TTFB (Time To First Byte) was half a second longer. So it seems the performance metrics are mostly neutral.

I think the lessons we can take are as follows:

• "First contentful paint" (FCP) tells us how long until the user starts to see visual progress on the page. This is an important metric to understand why things are taking so long.
• "Last contentful paint" (LCP) tells us the time it takes for the page to finish loading and is maybe the important overall metric.
• There are a lot of variables that go into page load performance. Good benchmarks require a large sample size.
• Obviously, the more complicated and heavier your website becomes (images, CSS, Javascript), the slower it loads.
• Based on a few basic experiments, "preload" doesn't help much for the bottom line. Lazy loading seems like a smart optimization, although I didn't measure how much it actually impacts the bottom line (LCP).

Unfortunately, our Time-To-First-Byte is pretty bad. Improving that requires investment (e.g., globally distributing your webservers and (maybe) paying for premium DNS). A CDN will help to load images faster, but honestly, I don't think that's really the bottleneck here. (Note: PythonAnywhere servers are on the West Coast USA, so performance in Europe/globally will be even worse.)

I think we are close to hitting the limit on how fast we can get while using Bootstrap, which adds weight and requires an extra download. The best possible performance would be to have a static HTML website that just uses plain HTML+CSS and is served from a CDN.

Finally: it's important to avoid getting caught up in the LCP metrics, which measure the time for a single load without a browser cache. Users on the site who load multiple pages in sequence will experience way better performance on the subsequent page loads.

I think we can move on to other things and stop worrying about performance... It's good enough for now.