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!
#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 yaml
should be enough