零加载时间的幻觉
去年夏天，我通过一个名为“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/