search

jackyzha0 / quartz

🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites
https://quartz.jzhao.xyz
MIT License
7.41k stars 2.55k forks source link

Performance optimization: PageSpeed results (unnecessarily) bad? #1426

Open woerndl opened 2 months ago

woerndl commented 2 months ago

Checking the performance for the first 5 pages in the showcase they all show decent loading times in the browser on a good conncetion, but abysmal PageSpeed results for Mobile. Throttling the connection makes it evident that the first paint indeed is blocked quite long (checking in Firefox on 2G throttle with no cache to see). As the architecture states it would be the idea that critical js is loaded in public/prescript.js and non-critical in public/postscript.js but it seems the first paint is still delayed in all these examples. The public/prescript.js in the examples is sometimes empty or very small.

quartz-page-speed

The TTFB is decent so I guess it is mostly optimization for the First Contentful Paint that would be necessary. To be clear: I don't want to imply that quartz is slow, but since "Ridiculously fast page loads" are a quite important feature this optimization potential might be worth looking into. Albeit for SEO and terms of looks.

saberzero1 commented 2 months ago

The 'ridiculously fast page loads' refers to the single page application (SPA), as made clear on the page you linked. Navigation between pages is extremely fast.

Having said that, I agree that there is a lot of potential for speedup. Especially when not using all features of Quartz. For example, katex support adds about 750ms to first load in my test on lighthouse. If you don't use that feature, we shouldn't load it, or only load it on pages that actually use it.

Similarly, we could use a websafe font while the googlefont loads, then replace the font when the googlefont becomes available.

Another thing could be using a placeholder css animation while things load. This does not improve performance, but gives users feedback that the page is in fact still loading.

aarnphm commented 2 months ago

Just want to quickly chime in, I think we discussed offline about having a loading skeleton for a while now, so it should help with loading speed.