使您的网站更快的 5 个技巧

作者

目标是不要让您的用户下载不必要的内容，因为它会减慢您的网站速度，恶化转化率和 SEO。

缩小你的文本资源

5 Tips to make your Website faster

请注意，bootstrap您从他们的站点下载的文件之所以命名
bootstrap.min.css，是因为该文件已缩小。以下是缩小为我们做的一些事情：

  • 删除空格
  • 删除评论
  • 删除不需要的分号
  • 减少十六进制代码长度

缩小前：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      This is just a comment......
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

缩小后：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="%PUBLIC_URL%/manifest.json"><link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><title>React App</title></head><body> <noscript> You need to enable JavaScript to run this app. </noscript><div id="root"></div></body></html>

缩小版在一行，注释已被删除，变得不可读了。然而，浏览器没有阅读问题html，
js或者css资产被缩小，实际上去除空白并减小文件大小更有效。

压缩资源最简单的方法是使用像
webpack这样的模块打包器。

使用 GZIP 编码

gzip内容意味着使用一种算法来查找所有重复的字符串并用指向第一个实例的指针替换它们。如果我们打开我们的开发工具并检查
网络选项卡中的响应标头，我们可以确定内容是否使用gzip 编码提供。content-encoding

GZIP 用于压缩和解压缩– 浏览器有一个请求标头accept-encoding：gzip, deflate, br。通过发送此标头，他们表示他们接受 gzip 文件。然后您的 Web 服务器（apache、nginx）或 CDN（cloudfront）对请求的资源进行 gzip 压缩并将其发送到浏览器。最后，浏览器必须解压缩文件并呈现它。

GZIP 在基于文本的资源上表现最佳：css、js、html。所有现代浏览器都支持 GZIP 压缩，并且会自动为所有 HTTP 请求请求它。

优化你的图片

  • PNG 图像是无损压缩 – 它们在压缩时不会损失任何质量。带有.png扩展名的图像通常是最多 kb 的。
  • JPG 图像是有损压缩 – 它们会损失一些质量，但压缩后文件大小会大大减小。
  • WEBP 图像可以是无损压缩和有损压缩。它们是网络优化图像。与 a 相同的图像.webp通常小于jpg或
    png图像。webp图像支持透明度，就像png图像一样，但加载速度更快。

通常你想.webp为你的网站使用图像，除非你需要最高质量并且可以让你的用户下载更大的图像。请注意，IE11 和更早的 IE 版本 (6-10) 不支持.webp图像 –
浏览器支持

  1. 将您的图像转换为.webp
  2. 裁剪图像以删除不必要的空间
  3. 调整图像大小以进一步减小文件大小
  4. 可选择尝试压缩图像以降低质量并节省 kbs

不要加载太多图片

如今，延迟加载图像有一个非常方便的属性 –
loading="lazy"当用户滚动到您的网页上不可见的图像时，它们会被延迟加载。

<image src="/my-img.webp" alt="white-cat" loading="lazy" />

截至 2020 年 12 月，支持率约为 75%，但如果浏览器不支持loading图像属性，它只会加载所有图像，其他一切都会正常工作。

使用系统字体栈

不要下载许多 KB 的呈现阻止字体，而是使用访问者使用的特定操作系统的系统字体。这样浏览器就不必下载任何字体文件。

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}

上面片段的分解是：

  • -apple-system并BlinkMacSystemFont用于苹果设备
  • Segoe UI适用于 Windows 设备
  • Roboto适用于安卓设备
  • Oxygen-Sans, Ubuntu,Cantarell对于 linux 系统
  • Helvetica Neue并sans-serif用作后备，以防某些以前的字体无法加载

–

发表评论