网站优化页面布局-(网站内容优化关键词布局)

小伙伴们好，今天广州蓝景给大家分享一下前端技术的干货和页面加载速度的问题。

首先，我们都讨厌页面加载缓慢！

要知道网站优化页面布局，加载时间每增加 1 秒（0-5 秒之间），网站转化率平均会下降 4.42%。页面加载时间的前五秒对转化率的影响最大。

幸运的是，我们可以通过优化 HTML 和 CSS 文件来提高我们网站的页面加载速度，而无需花费昂贵的服务器资源！

注意：本文将只关注如何使用 HTML 和 CSS 文件来提高页面加载速度。

延迟加载

延迟加载是一种缩短关键渲染路径长度的策略，从而减少页面加载时间。

a) 拆分 CSS 文件

尽可能拆分 CSS 文件以避免在所有屏幕尺寸上执行完整的 CSS。

对于印刷媒体，您可以使用：

对于移动屏幕，您可以使用：

对于平板电脑屏幕，您可以使用：

您还可以为横向或纵向的移动屏幕使用不同的 CSS 文件：

通过将 CSS 分成多个文件，主文件（在本例中为 .css）变得更小，减少了呈现被阻塞的时间，并大大提高了页面加载速度。

b) CSS的font-

font- 应用于@font-face 规则并定义浏览器如何加载和显示字体文件，允许在字体加载或加载失败时以后备字体显示文本。这可以通过使文本可见而不是空白屏幕来提高性能，但代价是闪烁的无样式文本。

@font-face {
font-family: "nunito", sans-serif;
font-weight: 400;
font-style: normal;
font-display: fallback;
}

c) 延迟加载 HTML 文件中的图像

使用 ="lazy" 以便仅在需要时加载图像。这将大大降低页面加载速度。

2.选择正确的图片格式

.webp 格式的图像被推荐为网络图像格式标准。

WebP 无损图像比 PNG 小 26%。在相同的 SSIM 质量指数下，WebP 有损图像比可比较的 JPEG 图像小 25-34%。动画 WebP 图片支持有损、无损和透明，与 GIF 和 APNG 相比可以提供更小的尺寸。

下图是WebP和PNG图片格式的对比：

下图是WebP和JPEG图片格式的对比：

所有这些测试都可以证明，即使使用有损压缩网站优化页面布局，webp 图像也被压缩得更多，从而大大减少了页面加载时间！

您也可以尝试另一种图像格式 .avif，在某些情况下它比 .webp 更好，但由于该格式相对较新（2019 年发布），支持 .avif 的浏览器还不多！

采用

元素

a) 可用于针对不同的媒体条件裁剪或修改图片（例如，在较小的显示器上加载大图片的缩略图版本）。

b) 如果不支持 webp 格式，请提供替代图像格式。

c) 通过为查看者加载最合适的图像来节省带宽并加快页面加载时间。

如果为高 DPI 显示器提供更高分辨率的图像版本，请使用

在元素上。这允许浏览器在数据保存模式下选择低分辨率版本，并且您不必编写明确的媒体条件。

3.渲染图像

由于图像是异步加载的，并且在第一次绘制后继续加载，如果在加载之前未定义它们的尺寸，则可能会导致页面内容回流。例如，由于加载图像，文本被推离页面。因此，设置 width 和 属性是至关重要的，这样浏览器就可以在布局中为它们预留空间。

与任何 -image 一样，重要的是设置 -color 值，以便在下载图像之前叠加层保持可读。

4. 压缩 HTML 和 CSS 文件

缩小是指从代码中删除所有不需要的字符以减小大小。删除的是不需要的空白字符，如空格、换行符、制表符等，以及注释。

使用 CSS 等缩小工具缩小 HTML 和 CSS 文件。有助于为网站提供更快的页面加载速度。