𝗔𝗹𝗹-𝗚𝗿𝗲𝗲𝗻 𝗟𝗶𝗴𝗵𝘁𝗵𝗼𝘂𝘀𝗲: 𝗛𝗼𝘄 𝗜 𝗙𝗶𝘅𝗲𝗱 𝗘𝘃𝗲𝗿𝘆 𝗔𝘂𝗱𝗶𝘁
I wanted perfect scores on my AnalogJS blog.
I started with low scores. Mobile performance was only 59. Desktop was better, but still not perfect.
After making specific changes, I reached 100 in every category on both desktop and mobile.
Here is how I did it:
Fix Analytics Triggers I tried to load analytics on scroll. It failed because Lighthouse auto-scrolls during audits. This triggers the scripts and lowers scores. I changed the trigger to click, keydown, and touchstart. Audit tools do not simulate these actions.
Fix SEO Files My robots.txt file was missing from the build. I had to move it to the correct directory so Vite would include it in the final deployment.
Fix Code Contrast My code blocks had poor color contrast. I wrote a CSS override to ensure every color meets WCAG AA standards. This cleared 78 violations.
Improve Accessibility I added aria-labels to sliders and fixed heading orders in Shadow DOM components. I also cleaned up mobile menu button labels to ensure screen readers announce the correct names.
Support AI Agents I added an llms.txt file. This helped my Agentic Browsing score jump from 33 to 100.
Optimize Loading I used an IntersectionObserver to lazy-load the comments section. I also added fetchpriority="high" to my main cover images to speed up the Largest Contentful Paint.
Go Zoneless I removed zone.js and used zoneless change detection in Angular. This dropped my Total Blocking Time to roughly 20 ms on mobile.
Use Modern Images I switched from PNG to WebP for cover images. This reduced my image weight by 92%.
Inline CSS My CSS was only 9 KB. Instead of making a separate network request, I inlined the entire stylesheet. I also preloaded the cover image. This moved my mobile performance from 78 to 100.
The biggest lesson: Measure before you act. I almost used heavy tools for critical CSS extraction, but inlining a tiny file was much faster and simpler.
Source: https://dev.to/dalenguyen/all-green-lighthouse-how-i-fixed-every-audit-on-my-analogjs-blog-102c