我重建了我的投资组合🌻现在它只需 1.6 秒即可加载🎉这是我的做法

TLDR

以下是我如何提高性能的方法

注意：本文仅用于解释我如何加载我的网站。这些步骤可能会根据你的使用情况而有所调整（使用原生 JavaScript 构建电商网站并非明智之举）。

大家好！

我的旧作品集加载时间为 4.2 秒，性能得分为 43 分，因此我决定重建（并重新设计）我的作品集网站，现在它的加载时间为 1.6 秒，并且灯塔评分为 100 分！（网站链接位于本文末尾）

它是使用 Vanilla JavaScript 构建的，不使用任何外部脚本或样式表（谷歌字体除外）。

以下是来自灯塔的性能见解

TLDR

因此，为了获得更好的表现，我：

使用rel="preload"

    <link rel="preload" href="assets/css/index.css" as="style" media="all" onload="this.onload=null;this.rel='stylesheet'">

将 CSS 拆分为index.css&并仅在移动设备上mobile.css加载mobile.css

    <link rel="stylesheet" href="assets/css/mobile.css" as="style" media="screen and (max-width:768px)">

延迟加载图像
使用 CDN（我正在使用Cloudinary，它还为我提供了一种在请求时间内更改图像宽度的方法，因此我加载了与要渲染的图像相同大小的图像。）
使用屏幕外画布（说实话，不要使用它，它是实验性的，并且仅适用于 Chrome。我设法做了一些解决方法，忽略屏幕外画布并在未支持的浏览器中加载与普通脚本相同的文件）

以下是我如何提高性能的方法

<head>
    <!-- Other head tags -->
    <link rel="preload" href="assets/css/index.css" as="style" media="all" onload="this.onload=null;this.rel='stylesheet'">
    <style>
        html,body{
            background-color: blue;
        }
        .lazyload, .main-container{
            display:none;
        }
    </style>
</head>
<body>
    <header>
        <!--Header content -->

        <h1 class="lazyload">Hi, I am Saurabh welcome to my website!</h1>
    </header>
    <main class="main-container">
        <!-- Main Content -->
    </main>
    <!-- Remaining HTML -->
</body>

这使得主要内容和一些标题文本被隐藏

那index.css我就这么做了。

.lazyload, .main-container{
    display: block !important;
}

覆盖规则<style>并显示内容

我使用的代码与上面解释的并不完全相同。我做了一些动画来让文本显示出来，所以输出看起来与上面的代码略有不同。

拆分 CSS

如果您针对移动设备的媒体查询太大，则有必要为其创建一个单独的文件，因为该代码在桌面上加载是完全没用的。

<link>标签为我们提供了仅在与媒体属性值匹配的设备中加载 css 文件的选项

<link rel="stylesheet" href="assets/css/index.css" as="style" media="all">
<link rel="stylesheet" href="assets/css/mobile.css" as="style" media="screen and (max-width:768px)">

使用此 mobile.css 文件将仅在匹配的设备中加载screen and (max-width:768px)

图像优化

延迟加载

有趣的是：浏览器很快就会在 IMG 标签中添加loading="lazy"属性。在此之前，我会这样做：

<img id="projectimage-1" src="placeholder.webp">
<img class="lazyimage" data-cover="projectimage-1" style="display:none;" src="actualimage.webp">

<script>
function loadProjectImage(e){
    const image = e.target;
    document.getElementById(image.dataset.cover).src = image.src;
}
document.querySelectorAll('.lazyimage')
    .forEach(imgEl => imgEl.addEventListener('load', loadProjectImage))

</script>

使用 CDN

CDN 或内容分发网络对图像的响应速度比通常的服务器更快。

除了这个优势之外，Cloudinary（我使用的 CDN）还提供了一些定制功能，帮助我进行更快的优化。

拥有 .webp 扩展名对网站很有好处，因为它提供了更好的图像优化，使用 cloudinary，您可以简单地更改.png或.jpg输入图像 URL .webp，它会为您生成 webp 图像！

此外，cloudinary 还提供了一种通过在 URL 中传递参数来调整图像大小的方法

Cloudinary 图像 URL 如下所示：
https://res.cloudinary.com/saurabhdaware/image/upload/c_scale,w_300/v1552455020/saurabhdaware.in/projects/eotm-portfolio.webp

此处，w_300表示图像宽度为 300。更改此值将返回该宽度的图像。因此，您可以在 JavaScript 中动态更改此值，以加载与渲染大小完全相同的图像。

嘿，Cloudinary！如果你正在读这篇文章，请给我付费 :3

奖金

此外，除了这些因素之外，我还使用 OffScreenCanvas 在 Web Worker 中渲染标题动画，但由于它是一个实验性功能，我认为现在还不是将其应用到您的产品中的合适时机。

我不会说不使用库就让它变快。但是，不使用框架确实让我能够更好地控制文件，这样我就可以决定预加载哪些文件、何时加载哪个文件以及如何将它们捆绑在一起。

但是，您可以使用库，并且网站加载速度仍然很快。您只需妥善处理即可。对于像作品集这样的小型网站，避免使用这些比整个网站本身还大的大型库确实很有意义。

完成🎉💃

我希望你喜欢这篇文章！

我的投资组合链接：https://saurabhdaware.in
（将鼠标悬停或点击网站中的某些元素可能会产生令人惊讶的结果😉）

我很想收到一些关于我的投资组合网站的反馈

哦，我还重新设计了我的网站标志

谢谢你！

文章来源：https://dev.to/saurabhdaware/i-rebuilt-my-portfolio-now-it-has-100-lighthouse-score-here-s-how-i-did-477a

我重建了我的投资组合🌻现在它只需 1.6 秒即可加载🎉这是我如何做到的 TLDR 这是我如何提高性能

我重建了我的投资组合🌻现在它只需 1.6 秒即可加载🎉这是我的做法

TLDR

以下是我如何提高性能的方法

TLDR

以下是我如何提高性能的方法

目录

预加载资源

拆分 CSS

图像优化

延迟加载

使用 CDN

奖金