The latest articles on DEV Community by Vitalii Baranov (@ljresetl). https://dev.to/ljresetl https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3858109%2F9b2d9aca-5d2e-4f63-b806-39d677cfdba1.jpg https://dev.to/ljresetl en Vitalii Baranov Thu, 02 Apr 2026 21:42:46 +0000 https://dev.to/ljresetl/how-i-achieved-100100-lighthouse-score-with-react-typescript-a-performance-deep-dive-19m3 https://dev.to/ljresetl/how-i-achieved-100100-lighthouse-score-with-react-typescript-a-performance-deep-dive-19m3 <p>Every developer wants their website to be fast. But achieving a perfect 100/100 score on Google PageSpeed Insights while using a modern library like React is a challenge that requires more than just "clean code."<br> In this post, I’ll share how I built my portfolio and the specific steps I took to ensure it flies on both Desktop and Mobile.<br> 🖼 The Proof<br> I didn't just aim for green zones; I aimed for perfection. Here are my latest Lighthouse results:<br> Desktop: 100/100 across the board.<br> Mobile: 95+ Efficiency, with 0ms Total Blocking Time.</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy556zmgvpgwz5alatumq.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy556zmgvpgwz5alatumq.png" alt=" " width="800" height="1795"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx4d6tivmr2432y8k4cw.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx4d6tivmr2432y8k4cw.png" alt=" " width="800" height="1795"></a><br> 🛠 My Technical Stack<br> Framework: React 18<br> Language: TypeScript (Strict mode)<br> Build Tool: Vite (for lightning-fast HMR and optimized builds)<br> Styling: SCSS Modules + BEM<br> Deployment: High-speed hosting with global CDN<br> 🚀 Key Optimization Strategies</p> <ol> <li>Zero Layout Shift (CLS) One of the hardest metrics to master. I used CSS aspect-ratio and reserved space for my profile image before it even loaded. This ensured that the content didn't "jump" when the photo appeared.</li> <li>Mastering the Critical Rendering Path I used link rel="preload" for my Largest Contentful Paint (LCP) image. By setting fetchpriority="high", I told the browser to prioritize my main visual asset over everything else.</li> <li>Delayed Non-Critical Rendering I implemented a decorative "code background" that contains an SEO-rich article. To keep the First Contentful Paint (FCP) fast, I used a setTimeout strategy to mount this heavy component only after the core UI became interactive.</li> <li>Font Optimization Instead of blocking the render with Google Fonts, I used the print media query trick and font-display: swap to ensure text is visible immediately. 💡 What I Learned Performance isn't a "final step" — it's a mindset. Every library you add and every image you use must be questioned. As a developer based in Liberec, Czechia, I strive to bring this level of technical discipline to every project I touch. 🔗 Check it out live: I’d love for you to test the speed yourself and give me some feedback! 👉 <a href="http://www.webdevcompass.com" rel="noopener noreferrer">www.webdevcompass.com</a> What's your best tip for squeezing that last 5% out of mobile performance? Let's discuss in the comments! 👇</li> </ol> performance react typescript webdev