加快用户加载网页的速度一些优化方案。
Gzip 压缩
Gzip 压缩是基于服务端的一种网页压缩的功能，Gzip 压缩可以对网页里的 (HTML, CSS, JS 等) 进行压缩，减少网页文件的大小，这样可以加快网页打开的速度。让我们先来看看浏览器是如何加载网页的。
如何开启 Gzip 压缩
- 通过.htaccess 文件开启压缩
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
- 在 Apache 服务器通过 htaccess 开启 Gzip 压缩
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
- 在 Nginx 服务器开启 Gzip 压缩
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable "MSIE [1-6].(?!.*SV1)";
gzip_vary on;
设置成功后可以使用 测试工具 来测试是否成功开启了 Gzip。
优化代码
-
压缩 CSS，JS，HTML
在 HTML, CSS, JS 这些文件里面都会有一些空格，注释，换行等等，可以将这些代码给压缩成一行。这样可以大大的减小文件的体积，加快加载的速度。 -
代码顺序
因为加载网页的时候，正常是从上到下加载的。把 CSS 代码放在最前，加载出网页的页面，把 JS 的代码放在 body 的下面，放到最后加载。
图片格式和大小
常用的图片有这几种 webp, jpeg, png 格式，其中 webp 格式的图片体积最小，但是兼容性不是太好，有的浏览器不支持 webp 格式的图片。jpeg 的图片是目前比较主流的图片格式之一，图片体积要比 png 小，但是不支持图片的透明背景。png 格式的图片支持背景透明，防锯齿。
在一个网页里面可能会包含多张图片，可以将图片的尺寸修改到刚好合适的尺寸即可，这样就不需要用一个大尺寸的图片再使用 CSS 进行适配。还可以将图片进行压缩，图片的在保证用户体验的同时尽可能的压缩图片，图片体积越小，加载速度越快。如果是非常小的图片，建议使用 base64 压缩，避免网络请求，加载速度更快。
CDN
CDN 是内容分发网络，可以将网页的内容更快的传输给用户。就好比一个日本的服务器，在美国的用户打开速度就比较慢，没有日本当地打开的快。那么使用 CDN 的话，只要在美国地区有节点就会大大提高访问的速度。CDN 原理是将服务器的网页存在各个国家各个地区的节点，当用户请求网页的时候，就会访问距离用户最近的节点，这样就可以提高网页的加载速度。可以考虑选用 Cloudflare。
