前言:最近被网络流量攻击颇为烦恼,最后斥巨资购买山东高防解决问题,目前服务器配置为4H4G,解决了硬件设施的问题,现在需要做的就是站点优化了,加载速度是致命的伤害,目前站点图片普遍大,距离优化完美还有段距离,慢慢来呗!
本文仅针对网络新手优化引导之用,推荐个工具和思路罢了,大佬请无视!
网站优化和SEO是可以齐名的,玄学,但是优化是有技巧的,有章可循;按照前人给出的优化经验并结合现行的前沿压缩技巧,是可以基本达到个人优化需要的,由于面太广不好下手,另外你也不知道自己的站点到底哪里需要优化,就会很迷茫,所以今天的教程是基于谷歌的一款神器展开的!
简介
谷歌自2010年以来就表示,页面速度是搜索引擎优化的重要排名因素。为了帮助你提高网站的速度,Google也推出了自家的网站速度测试工具,Google Pagespeed Insights,它可以测量页面移动设备和桌面设备的性能。
网站地址:https://developers.google.com/speed/pagespeed/insights/
(看到google的网址,默认需要特殊的访问方式!很值得)
填写格式:http(https)://deyaya.cn/
点击分析即可开始你的优化之旅!
图说share
优化前分数:
优化后分数:
我按照提示完成了一部分操作,所以分数达到了75分左右,如果全部完成,大概在90分左右,已经很牛了!
下面看看详细的优化指导:
如果能将谷歌给你的建议部分完成,真的优化部分可以完成了!加载速度自然有质的提升!
优化技巧总结
1.开启Gzip压缩
- 方法1:利用插件
例如,WP Rocket插件使用mod_deflate模块在.htaccess文件中添加Gzip压缩规则。 W3 Total Cache插件也可以通过性能部分设置为您启用它。
- 方法2:手动配置
对于Apache服务器,在.htaccess文件中添加如下代码:
- <IfModule mod_deflate.c>
- # Compress HTML, CSS, JavaScript, Text, XML and fonts
- 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
- # Remove browser bugs (only needed for really old browsers)
- 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服务器,在nginx.conf文件中添加如下代码:
- gzip on;
- gzip_disable "MSIE [1-6]\.(?!.*SV1)";
- gzip_vary on;
- gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;
检测Gzip功能是否正常开启的方法:
测试链接:https://varvy.com/tools/gzip/
2.优化图片体积
据HTTP Archive称,截至2018年12月,图片平均占网页总体积的50%。 优化图像可能是改进WordPress网站性能的最简单方法之一。
有几种方法可以解决这个问题。 其中一个是使用WordPress图像优化插件。 插件实际上可以通过批量优化整个WordPress媒体库,并在上传时自动优化它们。 以下是一些流行的图像优化插件:
这些插件将解决图片过大的问题,或者您也可以在上传它们之前使用Adobe Photoshop,Gimp或Affinity Photo等工具压缩它们。 我们可以通过缩小和降低质量来预先压缩它。 最好保持图像尽可能小。最好上传图像前调整为最佳尺寸及体积,而不是依赖CSS来调整图像大小。 否则这会拖慢您的网站速度。
3.启用浏览器缓存
在缓存方面,使用了两种主要方法:Cache-Control标头和Expires标头。 当Cache-Control标头启用客户端缓存并设置资源的max-age时,Expires标头用于指定资源在特定时间点不再有效。
您不一定需要添加两个标头,因为这有点冗余。Cache-Control是较新的并且通常是推荐的方法,但是,某些Web性能工具(如GTmetrix)仍会检查Expires标头。 这些都是示例,您可以根据需要更改文件类型,过期时间等。
其他具体优化建议请移步原文,那里有更美好的完整的建议,感谢WB/LT的指引!