网站图片加载慢怎么优化
2022-11-23
951 字约 4 分钟
...一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?
1、使用 Sprites 图片技术
它将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用 CSS 技术展现出来。这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用 CSS Sprites 能很好地减少网页的 http 请求,从而大大的提高页面的性能。
2、压缩文本和图片
压缩技术如 gzip 可以有效减少页面加载的时间。压缩率都可以在大小 70%左右。虽然文本压缩用得比较多,但图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。
3、延迟显示可见区域外的内容
为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如 WP 的 jQueryImage LazyLoad 插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。
4、确保功能图片优先加载
先加载图片再加载其它,会使用户体验感好。但速度不会提升
5、图片格式优化
不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式。可以节省大量带宽,减少处理时间时间,大大加快页面加载速。
6、使用 Progressive JPEGs
Progressive JPEGs 图片是 JPEG 格式的一个特殊变种,名为“高级 JPEG”。在创建高级 JPEG 文件时,数据是这样安排的:在装入图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的 GIF。
如果您觉得这篇文章有帮助,请点个赞吧~
相关文章
更多文章 →html2024-07-24
前端面试题汇总之HTML篇(含答案)
1、什么是 DOCTYPE(⽂档类型),有何作用 (1) 解释(是什么) DOCTYPE是是HTML5的文档声明,一种标准 的 。 (2)DOCTYPE的作用包括: 1. 告知浏览器使用哪个HTML版本 :定义和声明HTML文档的类型和版本, 告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档 ,例如, 声明表示文档是基于HTML5的。不同的HTML版本可能具有不同的语法和功能支持,因此DOCTYPE有助于...
学习面试
html2023-06-18
Cookie与Session傻傻分不清楚
一、Cookie与 的区别 Cookie和Session都是用于在Web应用程序中跟踪用户的状态的机制。 Cookie和Session都是用于跟踪用户状态的机制 虽然Cookie和Session都可以用于存储用户的数据,可用于跟踪用户身份和行为 , 但它们的工作方式/实现方式有所不同,具有不同的优缺点。 1.1 Cookie 1.1.1 Cookie是什么? Cookie是一种存储在用户计算机上的小文件,用于跟踪用户的身份和行为。 Co...
面试
html2022-12-02
H5新特性有哪些?
H5拥有6种新特性 1. 语义化标签,例如header,footer,section,article等 语义化标签的作用:提升页面的阅读性(结构性增强),更有利于SEO,对于使用屏幕阅读器的人来说会更友好(有明显的语气差别,例如strong标签内的内容会重读); 2. 新增媒体元素,audio、video audio和video标签能够很容易的输出音频或视频流,提供便利的获取文件信息的API 更多详细属性参考 3.用于绘画的canvas...
面试
html2022-12-01
什么是响应式设计?响应式设计的基本原理是什么?如何做?
简介 我这么理解:响应式布局就是一个网站能够兼容多个设备,可以根据屏幕的大小自动调整页面的展示方式以及布局,我们不用为每一个设备做一个特定的版本。响应式网站的特点: 同时适配PC+平板+手机等 网站的布局会根据视口来调整模块的大小和高度 响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理来设置差异化的css样式 一、是什么? 响应式网站设计(Responsive Web Design)是一种网络页面设计布局,页面的设计与开发...
面试面试官
html2022-11-23
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型,它把用户的体验拆分成几个关键点(例如,tap,scroll,load),并且帮你定义好了每一个的性能指标。 有以下四个方面: Response Animation Idle Load <img width="676" height="245" src="../../ resources/1734894ee7aaf2b6 tplv t2oaga2asx 2e5a8010c5bb40479.webp"/...
面试
html2022-11-23
输入URL到显示页面的全过程
从浏览器地址栏输入 url 到显示页面的步骤 <a id="t1" </a <a id=" 2" </a 基础版本 : 1. 浏览器根据请求的 交给 域名解析 ,找到真实 ,向服务器 发起请求 ; 2. 服务器交给后台处理完成后 返回数据 ,浏览器 接收⽂件 ( 、 、 、图象等); 3. 浏览器对加载到的资源( 、 、 等)进⾏语法解析,建立相应的内部数据结构 (如 的 ); 4. 载⼊解析 到的资源⽂件, 渲染页面 ,完成。 <a...
面试
评论
请登录后发表评论
去登录