NitroPack网页加载速度优化的表现
NitroPack网页加载速度优化的表现
(1)Lossy and lossless image compression(有损和无损图像压缩 )。图像的无损压缩是指在没有任何图像损失的前提下,降低图像数据量,获得低比特流的图像数据。NitroPack能通过压缩图像,将图片变小(数据量变小而不是尺寸变小)减少页面内容数据,从而提升页面加载速度。
(2)Advanced Lazy loading(高级延迟加载)。NitroPack采用的高级延迟加载技术不仅是针对图像或者视频资源文件的Lazy load,更侧重于对JavaScipt代码的延迟加载,以消除阻塞渲染的资源,从而提高网站页面打开的速度和谷歌测速的评分。延迟加载JavaScript,可以优先加载并执行HTML和CSS的代码,有助于浏览器更快地对请求的网页内容进行加载和绘制。
(3)Preemptive image sizing(预先设置图像尺寸)。很多时候建站人员上传的图像并不一定是前端页面展示所需要的真实大小。浏览器为了适配前端展现的内容,会引用原始图像的缩略图,这会造成内容偏移和网页加载速度变缓。NitroPack将上传的原始图像设置成了多个常用的尺寸,根据实际需要进行缩略图资源调用,从而可以加快页面的加载速度。
(4)WebP conversion(图像的WebP格式转化)。WebP格式是谷歌推崇的格式,也是谷歌联合几大主流浏览器共同定制的图像显示格式。WebP具有较好的清晰度与强大的可压缩性能,理论上能够比JPG格式的图片压缩比增加30%~35%。这也就意味着,图片在不损失清晰度的前提下能够以更小的尺寸进行展示,从而加快网站页面的加载速度。
(5)Adaptive Image Sizing(自适应图像大小)。自适应指网站页面在不同宽度的显示器上的尺寸显示自适应。这一点和预先设置图像尺寸略有区别。预先设置图像尺寸强调的是图片文件在不同显示宽度条件下,为了更快地加载需要将主图片文件按等比例压缩成较小的图片资源。而自适应的重点是,图片在任何宽度的显示设备中都可以自适应调整。因为不同型号的手机的显示宽度是不一样的。
此外,NitroPack还强调了其他几项比较重要的速度优化策略,包括但不限于内置的全局CDN,专有速度算法,HTML、CSS和JS的文件压缩与优化,关键CSS和DNS预加载等。