广州蓝景分享—HTML+CSS功能,让页面加载速度提高数倍

news2025/1/9 1:43:21

Hello,各位小伙伴,今天跟大家分享前端技术干货,页面加载速度问题。

首先我们都讨厌加载缓慢的页面!

要知道加载时间每增加1秒(0-5秒之间),网站转化率就会平均下降4.42%。页面加载时间的前五秒对转化率的影响最大。
在这里插入图片描述
幸运的是,我们可以通过优化HTML和CSS文件来提高网站的页面加载速度,而无需花费昂贵的服务器资源!

注:本文将仅关注如何使用HTML和CSS文件来提高页面加载速度。
延迟加载

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

a) 拆分CSS文件

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

<!-- 加载和解析整个sytles.css文件会阻塞主浏览器渲染 -->

<link rel="stylesheet" href="styles.css" />

对于打印媒体,可以使用:

<!-- 加载和解析print.css时不会阻塞渲染,只会在打印模式加载该样式 -->

<link rel="stylesheet" href="print.css" media="print" />

对于移动设备屏幕,可以使用:

<!-- 只会在移动设备这样的小屏幕下才会加载和解析该样式 -->

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

对于平板电脑屏幕,可以使用:

<!-- 不会在大屏幕上加载和解析该样式 -->

<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" />

对于移动屏幕横屏或竖屏,也可以使用不同的CSS文件:

<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->

<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />

通过将CSS分离成多个文件,主文件(在本例中为styles.css)变得小多了,从而减少了渲染被阻塞的时间,大大提高了页面加载速度。

b) CSS的font-display属性

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

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

c) HTML文件中的图片懒加载

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

<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />

2.选择正确的图片格式

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

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

下图是WebP与PNG图片格式对比:
在这里插入图片描述

下图是WebP与JPEG图片格式对比:
在这里插入图片描述

所有这些测试都可以证明,即使是有损压缩,webp图片的压缩率也更高,因此大大减少了页面加载时间!

你还可以尝试另一种图片格式.avif,在少数情况下比.webp更好,但由于该格式比较新(2019年发布),因此还没有多少浏览器支持.avif格式!

使用元素

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

b)在不支持webp格式的情况下提供替代图片格式。

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

如果为高DPI显示器提供更高分辨率的图像版本,请改用元素上的srcset。这允许浏览器在数据保存模式下选择低分辨率版本,并且你不必编写显式media条件。

<picture>
  <source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
  <source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
  <source srcset="my-logo-narrow.webp" type="image/webp" /> 
  <img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>

3.渲染图像

由于图像是异步加载的,并在第一次绘制后继续加载,如果在加载之前未定义其尺寸,则可能会导致重排到页面内容。例如,文本因加载图像而被推下页面。因此,设置width和高height属性至关重要,以便浏览器可以在布局中为它们保留空间。

对于任何background-image,设置background-color值很重要,以便在下载图像之前,覆盖的内容保持可读。

4.压缩HTML和CSS文件

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

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

以上就是今天广州蓝景跟大家分享的页面加载技巧,希望能帮到你。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/83080.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

linux 虚拟机nat模式网络配置

文章目录1. linux 版本&#xff1a;2. 下载地址 Index of /centos-store/7.6.1810/isos/x86_64/ (liu.se)3. 账号密码&#xff1a;root root4.选择nat 模式&#xff0c;勾选 将主机虚拟适配器连接到此网络&#xff0c;勾选 使用本地DHCP服务将iP地址分配给虚拟机5.点击Nat 设置…

数据仓库分享

前言 数据仓库&#xff0c;是为企业所有级别的决策制定过程&#xff0c;提供所有类型数据支持的战略集合。它出于分析性报告和决策支持的目的而创建的。 数据仓库是一个数据集合 数据仓库是一个为业务决策提供数据支持的数据集合 数据仓库是通过监控业务流程的形式为业务决策提…

Css不常用的方法

flex布局换行之后&#xff0c;下面一行的布局会异常 .homeItemBox{ display: flex; flex-wrap: wrap; justify-content: flex-start;} .homeItem{ display: flex; width: calc((100% - 20rpx) / 4); flex-direction: column; align-items: center; flex-shrink: 0; …

盘点系列:一度大热的TWS耳机今年表现如何?

根据Canalys最新市场研究数据显示&#xff0c;全球智能个人耳机市场在2022年Q3已连续第二个季度出现下滑&#xff0c;出货量同比下降4%至1.136亿台。 而TWS是唯一出现增长的子类别&#xff01; Q3真无线耳机TWS销量达7690万部&#xff0c;同比增长6%。苹果&#xff08;含beats&…

软件测试基础理论体系学习6-黑盒测试方法白盒测试方法简述

13 白盒测试方法1 黑盒测试1.1 黑盒测试概述1.2 黑盒测试的使用场景1.3 “黑盒”的两种基本方法1.4 黑盒测试的优缺点1.4.1 优点1.4.2 缺点1.5 黑盒测试的测试用例设计方法2 白盒测试2.1 白盒测试概述2.2 逻辑覆盖2.3 语句覆盖2.3.1 基本思想是2.3.2 优点2.3.3 缺点2.4 判定覆盖…

Python及其在数据科学中的应用

前言 Python及其在数据科学中的应用 Python易学&#xff0c;语法也比较简单。它是一种流行的数据科学语言&#xff0c;因为它功能强大且易于使用。Python是一种出色的数据分析语言&#xff0c;因为它包含各种数据结构、模块和工具。 使用Python进行数据科学的原因有很多&…

详细介绍NLP对话系统

任务型对话系统 任务型对话系统主要应用于固定领域。任务型对话的广泛应用的方法有两种&#xff0c;一种是模块法&#xff0c;另一种是端到端的方法。 模块法是将对话响应视为模块&#xff0c;每个模块负责特定的任务&#xff0c;并将处理结果传送给下一个模块。 端到端的任务…

分布式事务 - Seata - TCC模式

目录一、什么是TCC二、AT & TCC区别 及 适用场景三、代码集成示例3.1 升级Seata 1.5.23.2 示例场景说明3.3 TCC核心接口定义3.4 TCC相关阶段规划3.5 TCC核心代码四、TCC三大问题&#xff08;幂等、空回滚、悬挂&#xff09;之前介绍过分布式事务之Seata AT模式&#xff0c;…

智慧新零售异业联盟帮你搞定多店跨界整合,让你开启共富时代

大家好&#xff0c;我是林工&#xff0c;在如今的时代&#xff0c;不管你所看到的商业模式是什么样的&#xff0c;以不变应万变&#xff0c;目的只有一个&#xff0c;把买卖发展壮大&#xff0c;想要将买卖发展壮大&#xff0c;那就需要精准的吸粉引流获客方式和能力。 林工常常…

Fluent Mybatis 牛逼!

这玩意比ThreadLocal叼多了&#xff0c;吓得我赶紧分享出来。 推荐一些chrome浏览器必装的插件&#xff01; 40 个 SpringBoot 常用注解 VSCode 花式玩法&#xff08;摸鱼&#xff09;收藏一下 &#xff01; 使用fluent mybatis可以不用写具体的xml文件&#xff0c;通过jav…

【面试大全】互联网面试软实力【必看】

软实力 推荐大家使用Markdown语法写简历&#xff0c;然后再将Markdown格式转换为PDF格式后进行简历投递。如果你对Markdown语法不太了解的话&#xff0c;可以花半个小时简单看一下Markdown语法说明: http://www.markdown.cn/ 面试 假如你是网络申请者【拉勾、boss等】&…

Latex 分式格式处理

分式 分式命令&#xff1a;\frac{分子}{分母}。 对于行内短分式&#xff0c;可用斜线/输入&#xff0c;例如&#xff1a;(xy)/2 举例&#xff1a; 行内分式 \(\frac{xy}{yz} \) (显示为&#xff1a;) 行间分式 \[\frac{xy}{yz}\] (显示为&a…

【PCB设计特别篇之阻抗计算】还在用SI9000进行阻抗计算?

有了叠层信息后&#xff0c;才可以进行阻抗计算&#xff0c;走线阻抗与线宽、线距、介质厚度、绿油厚度、介质介电常数、铜箔厚度等一些信息相关&#xff0c;所以要现有叠层&#xff0c;才能进行阻抗计算。 阻抗计算的工具有很多&#xff0c;下面介绍几种&#xff1a; 1、SI900…

RSS Can:使用 Golang 实现更好的 RSS Hub 服务(一)

聊聊之前做过的一个小东西的踩坑历程&#xff0c;如果你也想高效获取信息&#xff0c;或许这个系列的内容会对你有用。 这个事情涉及的东西比较多&#xff0c;所以我考虑拆成一个系列来聊&#xff0c;每篇的内容不要太长&#xff0c;整理负担和阅读负担都轻一些。 本篇是第一…

Go代码审计学习(二)

文章目录环境搭建漏洞一&#xff1a;代码逻辑错误、没有做有效的鉴权漏洞二&#xff1a;目录穿越、任意文件读取漏洞三&#xff1a;条件竞争漏洞四&#xff1a;钩子函数执行命令参考链接环境搭建 Gitea是从gogs衍生出的一个开源项目&#xff0c;是一个类似于Github、Gitlab的多…

自学python第三年才懂,这事儿影响着最终的学习结果

前言 如果这件事你还没搞明白&#xff0c;那你学python会跟我一样&#xff0c;学了几年跟没学差不多&#xff01; 当然&#xff0c;这件事仅限于学python是想赚钱或者提升职场竞争力的人明白即可&#xff0c;其他人别浪费时间了。 这事儿很重要 我从2018年底开始自学python&a…

SpringBoot2核心技术(基础入门)- 03 自动配置原理【3.1依赖管理+2容器功能】

1、SpringBoot特点 1.1、依赖管理 ● 父项目做依赖管理 依赖管理 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.4.RELEASE</version> </parent…

(已更新)2023春节倒计时新款HTML单页源码

2023春节倒计时新款HTML单页自适应页面&#xff0c;有兴趣的可以看看&#xff01;背景图片自己修改喜欢的&#xff01; 源码介绍 自适应页面&#xff0c;支持安卓和ioswx背景音乐播放附带多个背景音乐&#xff0c;由于技术原因&#xff0c;一些js进行了加密&#xff08;支持i…

Spring boot 使用@DS 配合druid连接池切换数据源及切换数据源失效情况

一、导入包 <!-- dynamic-datasource --> <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.2.1</version> </dependency> 二、配置yam配置文…

【Flask框架】——09 视图和URL总结

目录一、创建flask项目1、安装环境2、创建项目3、启动程序4、访问项目二、flask参数说明1.初始化flask项目2.参数说明3.DEBUG调试模式三、应用程序的参数加载1.从配置对象中加载2.从配置文件中加载3.从环境变量中加载4.从Pycharm中的运行时设置环境变量的方式加载5.企业项目开发…