网页优化 网站优化基本技巧

大标 2022年9月3日15:01:19网络推广评论0阅读模式

每个人都是产品经理[起点学院]。Bat派出一名产品总监,带您通过实践系统学习产品和操作。

上周末,我与您讨论了面向对象编程的主要特性,“封装"和“继承"。如果你期待今天继续谈论“多态性",你可能会失望。今天,没有“多态性",但我教你如何优化网页的加载速度。我只是按规则玩。哈哈。

网页优化 网站优化基本技巧

我在家度过了周末,浏览了许多网页。我发现许多网站没有优化加载速度。有时,打开网页大约需要10秒,然后才能加载。虽然网页的内容很好,但我的第一印象是它很慢。我受不了!

事实上,有许多简单有效的优化方法。我认为有必要与所有的产品经理共享它们,以便您可以监督开发人员优化和改进网页的加载体验

首先,让我们看看网页的加载过程。当您打开一个网页时,您将首先拉取一个HTML页面。浏览器解析HTML页面后,会根据页面内容拉取JavaScript、CSS和图像文件,最后根据这些文件呈现页面。

网页优化 网站优化基本技巧

我们可以看到,影响网页显示速度的主要因素不是网页本身,而是它所依赖的一些其他文档,如果这些资源的加载速度得到优化,网页显示速度也会提高。

简单和粗糙的方法是什么?让我逐一列出:

 

1.优化图片资源的格式和大小

在网页中,图片资源的大小占最多,单个文件的大小也相当可观。因此,在图像质量不变的情况下,应尽可能使用具有高压缩率的图像格式。图片格式可以选择为webp>jpeg>png>bmp同时,还应根据图片显示大小,拉取匹配大小最大的图片资源。不要仅仅因为没有问题就把原始图片拉下来使用。我以前遇到过这种情况。196*196区域显示图像的文件大小意外达到数兆字节。最后,我发现原来的1960*1960分辨率图像被拉下。

 

2.启用网络压缩

大多数浏览器在发出请求时都会携带这个标签“接受编码:gzip,deflate",这意味着这个浏览器可以接受gzip压缩的数据传输。如果您的web服务器也支持gzip压缩数据,那么当数据以gzip传输时,流量将减少70-80%。

网页优化 网站优化基本技巧

 

3.使用浏览器缓存

同一站点下的不同页面通常重用部分资源文件。如果将这些资源文件设置为可缓存,则在刷新或跳转到另一页面时无需从网络中提取相关资源,这大大加快了网页的加载速度。

 

4.减少重定向请求

一些网站为不同的终端制作不同的页面。例如,当您在手机上访问微博时,您将被重定向到微博。com到微博Cn,每次重定向都会导致浏览器重新发出请求并延长加载时间。在这种情况下,我们应该尽可能使用响应式设计,并使用一个微博。com站点覆盖所有终端。

 

5.使用CDN存储静态资源

CDN是静态内容分发网络。它在每个省甚至每个城市都部署了自己的服务器来分发这些静态内容。当某个城市的用户想要拉取资源时,他会先从本地CDN服务器拉取,以确保他能最快地获得资源。据砖房统计,70%的网络资源是静态资源。这意味着70%的内容在生成后不会改变,因此将它们全部放在CDN上可以提高这70%资源的下载速度。

 

6.减少DNS查询的数量

许多人喜欢将不同的图片挂在不同的域名下,例如a.pm-teacher上的图片a。com和B.pm-teacher.com上的图片B当网页同时使用图片a和图片B时,浏览器需要查询两个域名。您应该知道,每次解析域名都会浪费时间,所以请尝试将所有图片放在一个

weinxin
我的微信
微信扫一扫
大标
  • 本文由 发表于 2022年9月3日15:01:19
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/2588.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: