Fix Doc Page Performance
Closed this issue · 5 comments
Hey @trieloff, sorry I'm not quite familiar with improving the lighthouse score performance so wanted to ask for your opinion. I saw your team's previous fix on home page performance is by adding the 'hero' and 'logo-wall' block to LCP_BLOCKS.
I tried that approach in a separate branch redesign/seo-testing-2, in which I created Doc Detail Hero block for the hero image and put that into the LCP_BLOCKS array. I saw a bit on the performance improvement, but I'm not entirely sure if that's the right/correct way in fixing the issue. If that's the correct way, we'll need to add the Doc Detail Hero block in the google doc for the doc detail pages and bulk publish doc detail pages again after merging the fix into main.
Link: https://redesign-seo-testing-2--helix-website--adobe.hlx.page/drafts/redesign/testing/seo-testing-authoring
Google doc link: https://docs.google.com/document/d/1bObmtnIhvH8d9ZontfkDOElP5LVYjVI6FMbCEWHU1ns/edit
PageSpeed: https://pagespeed.web.dev/analysis/https-redesign-seo-testing-2--helix-website--adobe-hlx-page-drafts-redesign-testing-seo-testing-authoring/6vsbk2d45y?form_factor=desktop
Still the score above is 98 but not 100. Based on your experience, I was wondering if there're other common factors that you know about will contribute to the decrease in performance. Thank you so much for your help!
I think we should be able to do this without content changes.
- speed index seems to be the biggest issue
- the film strip shows that the entire page gets rendered, hidden, and re-rendered
- we get quite a bit of total blocking time from
highlight.js
#344 moves the needle a bit into the right direction, but speed index is still bad.
The loading of the footer still hides the rest of the page, but I think we should fix this once you are done with #332
Note for highlight.js performance improvement, the following measures may help in addressing the issue:
- using the documented way of adding highlights that does not require to scan the full page
- using an intersection observer to only start highlighting when the user scrolls to code examples
- re-bundling highlight.js and only include languages that we actually need in the docs:
js css bash yamlshould be enough