WordPress网站可视化优化教程

前言:最近被网络流量攻击颇为烦恼,最后斥巨资购买山东高防解决问题,目前服务器配置为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文件中添加如下代码:

  1. <IfModule mod_deflate.c>
  2. # Compress HTMLCSS, JavaScript, Text, XML and fonts
  3. AddOutputFilterByType DEFLATE application/javascript
  4. AddOutputFilterByType DEFLATE application/rss+xml
  5. AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  6. AddOutputFilterByType DEFLATE application/x-font
  7. AddOutputFilterByType DEFLATE application/x-font-opentype
  8. AddOutputFilterByType DEFLATE application/x-font-otf
  9. AddOutputFilterByType DEFLATE application/x-font-truetype
  10. AddOutputFilterByType DEFLATE application/x-font-ttf
  11. AddOutputFilterByType DEFLATE application/x-javascript
  12. AddOutputFilterByType DEFLATE application/xhtml+xml
  13. AddOutputFilterByType DEFLATE application/xml
  14. AddOutputFilterByType DEFLATE font/opentype
  15. AddOutputFilterByType DEFLATE font/otf
  16. AddOutputFilterByType DEFLATE font/ttf
  17. AddOutputFilterByType DEFLATE image/svg+xml
  18. AddOutputFilterByType DEFLATE image/x-icon
  19. AddOutputFilterByType DEFLATE text/css
  20. AddOutputFilterByType DEFLATE text/html
  21. AddOutputFilterByType DEFLATE text/javascript
  22. AddOutputFilterByType DEFLATE text/plain
  23. AddOutputFilterByType DEFLATE text/xml
  24. # Remove browser bugs (only needed for really old browsers)
  25. BrowserMatch ^Mozilla/4 gzip-only-text/html
  26. BrowserMatch ^Mozilla/4\.0[678] no-gzip
  27. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  28. Header append Vary User-Agent
  29. </IfModule>

对于Nginx服务器,在nginx.conf文件中添加如下代码:

  1. gzip on;
  2. gzip_disable "MSIE [1-6]\.(?!.*SV1)";
  3. gzip_vary on;
  4. 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的指引!

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发