江苏龙网

  1. 主页 > 生活百科 > >

如何优化网页，个人网页优化技巧

周末连续两天给大家讲面向对象编程的主要特点“封装”和“继承” 。如果你今天期待着继续谈论“多态性”的特性，你可能会失望 。今天没有“多态性”，但是我教你如何优化网页加载速度 。所以我才不按规矩出牌，哈哈 。
周末在家，刷了很多网页，发现很多网站都没有优化加载速度 。有时，打开一个网页需要10秒钟才能加载 。虽然网页内容很好，但给我的第一印象是慢 。我忍无可忍！
其实有很多简单粗暴有效的优化方法 。我觉得有必要分享给各位产品经理，让你们监督兄弟优化的发展，提升网页的加载体验~
首先，我们来看看网页的加载过程 。当你打开一个网页的时候，你首先会拉一个html页面 。然后浏览器解析html页面后，会根据页面内容拉取javascript、css和图片文件，最后根据这些文件渲染页面 。
我们可以看到，影响网页显示速度的主要因素并不是网页本身，而是它所依赖的一些其他文件 。如果这些资源的加载速度得到优化，网页显示的速度也会上去 。
有哪些简单粗暴的方法？我来一一列举:
1.优化图片资源的格式和大小 在一个网页中，图片资源的大小占的比重最大，单个文件的大小也是相当可观的 。所以在保证相同图像质量的情况下，尽量使用高压缩率的图像格式，按照这个优先级，图像格式可以是webp > jpeg > png > bmp 。同时根据图片的显示尺寸，拉最匹配尺寸的图片资源，不要把原图拉下来使用 。我以前也遇到过这种情况 。一张图片在196*196区域显示的文件大小居然达到了几兆 。最后发现原来分辨率为1960*1960的图被拉了下来 。
2.开启网络压缩 大部分浏览器在发出请求时会带这个标记“Accept-Encoding: gzip，deflate”，表示这个浏览器可以接受gzip压缩的数据传输 。如果你的web服务器也支持数据的gzip压缩，那么用gzip传输数据时，流量会减少70 ~ 80% 。
3.使用浏览器缓存 同一站点下的不同页面往往会重用一些资源文件 。如果将这些资源文件设置为可缓存，那么在刷新或跳转到另一个页面时，就不需要从网络上拉取相关资源，从而大大加快了网页的加载速度 。
4.减少重定向请求 有些网站针对不同的终端制作不同的页面 。例如，当你在手机上访问微博时，你会被从weibo.com重定向到weibo.cn 。每次重定向都会导致浏览器重新发起请求，延长加载时间 。在这种情况下，应尽可能使用响应式设计，用一个weibo.com站点覆盖所有终端 。
5.使用CDN存储静态资源 CDN是一种静态的内容分发网络 。它在每个省甚至每个城市都有自己的服务器来分发这些静态内容 。所以当某个城市的用户想要拉一个资源的时候，他会先从当地的CDN服务器上拉，这样可以保证他最快的获得资源 。据专家统计，70%的网络资源是静态资源 。这就意味着70%的内容在制作出来之后是不会改变的，所以把它们都放到CDN上可以提高这70%资源的下载速度 。
6.减少DNS查询次数 很多人喜欢在不同的域名下挂不同的图，比如a.pm-teacher.com的图A，b.pm-teacher.com的图B 。当一个网页同时使用图片A和图片B时，浏览器需要查询两个域名 。要知道，每次解析域名都会浪费时间，所以尽量把所有图片放在一个域名下 。
7.压缩css和js内容 这里提到的压缩，点2就不重复了 。上面说的压缩是不改变文件内容的压缩 。Css和js有大量的空case和变量名(比如hello = " hello word)，如果去掉这些空格，用简单字母代替变量名(如a = " hello word ")；)，那么这些css和js原始文件的大小也会减小，这也有助于加快拉取速度 。
【如何优化网页，个人网页优化技巧】不知道大家有没有看到，上面提到的优化方案的核心就是三点:减少请求数量，减少资源大小，找到最快的服务器 。如果你是某网站的产品经理，去找你的开发者确认是否做过类似的优化 。


    推荐阅读


    上一篇：天猫标题优化技巧有哪些，天猫标题的组成介绍

    下一篇：如何做好一个网站，新手制作网站的技巧