零加载时间的幻觉
去年夏天，我通过一个名为“The Odin Project”的在线课程开始学习网页开发。随着我对网页标准和用户界面设计的逐渐熟悉，我决定构建一些个人项目：我的个人网站。
作为一名在Instagram、YouTube、TikTok和Snapchat上拥有超过100万粉丝，并且每月浏览量超过1000万的内容创作者，我希望有一个真正反映我个性的网站。最终，我的网站包含四个页面：主页、关于我、作品集和赞助信息。
我最喜欢的部分是作品集页面，在这里我使用视差效果展示我的艺术作品。但在早期，我遇到了一个严重的性能问题：页面加载完全需要大约30秒。Lighthouse给我的性能评分约为20%。
经过一些调查，我意识到问题出在——太多大型PNG文件。我将它们转换为WebP，这是一种现代图像格式，具有更好的压缩效果且质量损失最小。这使我的评分提升到了约50%，但加载时间仍然明显。
因此，我进行了进一步优化。我在React中使用了“useEffects”钩子，在主页加载后预加载所有WebP图像对象。由于大部分流量是通过主页进入的（链接在我的社交媒体个人简介中），这个优化确保了用户在访问作品集时图像已经准备好。
结果如何？Lighthouse评分超过90%，图像几乎瞬间渲染。
在这里查看： https://artbyaalice.netlify.app/
查看原文
Last summer, I started learning web development through an online course called The Odin Project. As I got more comfortable with web standards and user interface design, I decided to build something personal: my own website.<p>As a content creator with over 1 million followers across Instagram, YouTube, TikTok, and Snapchat, and over 10 million monthly views, I wanted a site that truly reflected who I am. The result is a 4-page website featuring a homepage, about me, portfolio, and sponsor info.<p>One of my favorite parts is the portfolio page, where I showcase my artwork using a parallax effect. But early on, I ran into a major performance problem: the page took ~30 seconds to fully load. Lighthouse was giving me a performance score of ~20%.<p>After some digging, I realized the issue—too many large PNG files. I converted them to WebP, a modern image format that uses better compression with minimal quality loss. This brought my score up to ~50%, but load times were still noticeable.<p>So I optimized further. I used the “useEffects” hook in React to pre-load all WebP image objects after the homepage loads. Since most traffic enters through the homepage (linked in my social bios), this optimization ensured that images would be ready by the time users reached the portfolio.<p>The result? Lighthouse score over 90%, and near-instant image rendering<p>Check it out here: https://artbyaalice.netlify.app/