使用html和css技巧提升网站加载速度

这篇具有很好参考价值的文章主要介绍了使用html和css技巧提升网站加载速度。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用html和css技巧提升网站加载速度

加载时间每增加一秒(0-5 秒之间),网站转化率平均就会下降 4.42%。页面加载时间的前五秒对转化率的影响最大。

通过更改htmlcss文件可以提高网站的页面加载速度,本文现在就来介绍一下怎么实现。

延迟加载资源

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

把css分割成多个文件

css文件越小越好,这样渲染就能更快.通过分割css文件,把一些不需要在首页渲染的css单独抽离出来,后续访问到在进行请求加载.

可以通过使用media类型来加载:

比如说这是个完整的css,包含了网站的全部css

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

设置print(打印预览模式/打印页面),

<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)" />

适配手机屏幕的不同方向:

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

通过将 CSS 分离到多个文件中,主要的渲染阻塞文件(在本例中为 styles.css)要小得多,从而减少了渲染阻塞的时间,就能大大提高了页面加载速度。而其他设了媒体查询,只有符合条件时才会进行渲染.

css中的font-display属性

应用于@font-face规则时,font-display属性用于定义浏览器如何加载和显示字体文件,允许在字体加载或加载失败时以一个备选方案显示文本。这通过使文本可见而不是出现空白屏幕来提高性能,但缺点是会出现无样式的文本。

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

html中img标签

通常我们只需要展示屏幕可见范围内的图片,其他并不需要第一时间加载渲染,在不可见的img标签中添加loading="lazy"以便仅在需要时加载图像。这会大大降低页面加载速度。

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

选择正确的图像格式

将图像设为.webp格式。web推荐将其作为网络图像格式标准。

PNG 相比,WebP无损图像的尺寸[小 26%`](https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results) 。在同等SSIM质量指数下,`WebP` 有损图像比同类 `JPEG` 图像[小 `25-34%`](https://developers.google.com/speed/webp/docs/webp_study)。动画 `WebP` 图像均支持有损、无损和透明,与 `GIF` 和 `APNG` 相比,它可以提供更小的尺寸。

WebP 与 PNG 图像格式对比

使用html和css技巧提升网站加载速度,html,javascript,html,css,前端

WebP 与 JPEG 图像格式对比

使用html和css技巧提升网站加载速度,html,javascript,html,css,前端

通过所有这些测试,证明即使在有损之后,webp 图像的压缩程度也会更高,因此会大大降低页面加载速度!

还可以检查图像格式 .avif,在少数情况下它比 .webp 更好,但它是市场上的新格式(于 2019 年发布),但是还没有多少浏览器支持 .avif 格式.

使用元素作为图像

  • 用于根据不同media条件裁剪或修改图像(例如,在较小的显示器上加载具有太多细节的图像的简单版本)。
  • 在不支持 webp 格式的情况下提供替代图像格式。
  • 通过加载最适合查看者显示的图像来节省带宽并加快页面加载时间。

如果要为高 DPI (Retina) 显示提供更高密度版本的图像,在<source>元素上使用srcset。这使浏览器可以在数据保存模式下选择较低密度的版本,并且我们还不需要编写明确的media条件。

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

渲染图像

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

对于任何background-image,设置一个background-color值非常重要,以便在图像下载之前覆盖的任何内容仍然可读。

代码压缩

从代码中删除所有不必要的字符以减小大小。不需要的空白字符(如空格、换行符、制表符等)和注释将也删除。

使用CodeBeautify、CSS Minifier等缩小工具来缩小 HTMLCSS 文件。这些将有助于为我们的网站提供更好的页面加载速度。文章来源地址https://www.toymoban.com/news/detail-601716.html

到了这里,关于使用html和css技巧提升网站加载速度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 大二Web课程设计——美食网站设计与实现(HTML+CSS+JavaScript)

    👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比

    2024年02月06日
    浏览(51)
  • html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | H5微商城购物商城项目 | HTML期末大学生网页设计作业,Web大学生网页 HTML:结构 CSS:样式 在操作方面

    2024年02月09日
    浏览(59)
  • HTML5期末大作业:游戏网站设计与实现——基于bootstrap响应式游戏资讯网站制作HTML+CSS+JavaScript

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年01月17日
    浏览(54)
  • 【网页设计】基于HTML+CSS+JavaScript制作美食网站舌尖上的美食

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月09日
    浏览(61)
  • html网页设计大学生作业成品——公益校园网站设计与实现(HTML+CSS+JavaScript)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月04日
    浏览(50)
  • 【大学生期末大作业】HTML+CSS+JavaScript — 模仿博客网站设计(Web)

    目录 你为什么不亲自下船, 就一次也好啊, 亲眼去看看这个世界。 关于HTML5: 关于CSS: 关于JavaScript: 一、🌎前言: 二、🔖网页描述 三、📚网站介绍 四、💠网站演示 📜登陆页面设计 📜注册页面设计 📜首页页面设计 📜CSDN跳转设计 📜评论页面设计 📜 动态页面设

    2024年01月24日
    浏览(62)
  • 大一Web课程设计:企业网站——HTML+CSS+JavaScript电子购物商城(37页面)

    常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目

    2024年02月03日
    浏览(63)
  • 【Web前端大作业】基于HTML+CSS+JavaScript制作西北大学新闻网站(7页)

    🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (

    2024年02月03日
    浏览(76)
  • 【七夕节】html+css+JavaScript+服务器 给女朋友的七夕过节网站

    目录 前言 记录一起走过的那些日子 创意代码表白 进入第一部分:记录趣事的爱情话匣子 进入第二部分:恋爱纪念册 进入第三部分:爱情相册 登录界面  纪念册 相册 七夕来袭!这是中国人的情人节,不是2月14日的西方的情人节,也不是网络上520、521的情人节,而是真真正

    2024年02月01日
    浏览(36)
  • WordPress使用阿里云OSS作为媒体库提升网站速度及配置教程

    首先需要注册阿里云(www.aliyun.com)账户,可以直接用淘宝账户登录,这年头都有淘宝账户吧!:) 进入阿里云中的对象存储OSS首页,开通阿里云OSS对象存储 开通阿里云OSS对象存储 开通后进入管理控制台,新建一个Bucket(空间),填写空间名,按照你的网站受众用户所在区

    2024年02月20日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包