wordpress主题Avada主题速度优化问题全面解析

释放双眼,带上耳机,听听看~!

原网站分析

1. PageSpeed 分析

Optimize images: 图片未经优化,体积较大(属于基础的优化)

Leverage browser caching: 没有加入浏览器缓存导致资源重复加载

03f62d385e2220ac260be32d75b7877e.png

2. YSlow 分析

Add Expires headers: 需要添加Expires 头,跟上面的Leverage browser caching 描述的是一个问题

CDN: 网站没有添加CDN缓存(虽然不是必须,但用CDN效果还是不错的)

bfebb562ff004c1917a9520227f7b21f.png

3. 加载视频分析

网页加载视频能更直观的看出来网站的加载问题。视频地址如下:

https://video.hnxmx.cn/www_hnxmx_com/video.mp4?_=1

·  3.9s —— 开始进行页面输出(First Paint),意味着网站在3.9s之前全都是白屏状态

·  9.4s —— Onload事件发生,此时最重要的banner图还没有加载过来,这也是非常严重的问题。

我们可以通过Waterfall对上述问题进行简单的分析:

4ee940f46c4f654303af00c315efdac5.png

如上图所示,First Paint 在 JS 和 CSS 加载后,才开始加载。说明 JS 和 CSS 的加载,阻塞了页面的加载,换句话说就是 JS 和 CSS 阻塞了首屏的渲染。Banner 的问题类似,也是由于 JS 和 CSS 造成的。

GTmetrix 检测优化后效果

我们可以先从整体评分来看优化的效果,优化后 PageSpeed Scores 和 YSlow Scores 的评分都从70%多提升到了95%左右。

e148bedc4702b27c73e9379d30781d98.jpg

1. 文件合并加载

查看源码总结网站上JS和CSS文件,把能合并的文件进行合并。文件合并减少了网站的请求数,合并前请求数50,合并后是39。网站请求数对比如下图所示:

d2db037946ff7a37e3f5c95d51b73560.png

将合并后的文件非阻塞加载,不影响页面 First Paint 渲染。我们可以通过Waterfall对比清晰地看出来(上图是优化前,下图是优化后),First Paint(绿色竖线是First Paint)不用再等待 JS 和 CSS 加载完成之后再开始渲染,加快了 First Paint 的渲染速度。

9208eb78023df5f194dc9d96935a2ecd.png

2. Critical CSS

网站 css 和 js 虽然做了非阻塞加载,但是要想快速的看到网站显示格式正确的内容还得添加 critical css ,让网站在没有外部资源加载的情况下更快的显示出来。

3. Banner优化

Banner的加载是这个网站优化非常重要的一点,9.4s —— Onload的时候 banner 还没有加载过来。在做了文件非阻塞加载的情况下并没有太大的改善。因此深入分析了一下 Banner 的加载逻辑,发现 Banner 的部分样式是通过js动态加入的。为了让 Banner 快速的显示,把动态添加的样式放在 html 中让 Banner 尽快渲染。

4. 服务器优化

·  css、js文件压缩,减少文件体积,缩短加载时间

·  图片优化,优化后 PageSpeed 中的 Optimize images 如下图所示,图片优化从原来的的评分0到95。

f408141fdf878e77078b400ea84968e9.pngdd911216cdfeaec1e5ce160d0ef70552.png

·  浏览器缓存优化,充分利用浏览器缓存避免资源重复加载。浏览器缓存对比图如下图所示。

722001be705a65e22ece7b4b6340a133.png5dc046c385f6e4ec92702bc0d190b975.png

5. CDN优化

添加CDN缓存,加快网站响应速度。添加后 YSlow 中的 CDN 评分从0到了100。对比图如下所示:

00e52cd8c859f5001520bc9b6192ca39.pnga252cb6a928d27a3dd498d43b62c487d.png

相关专题

Avada主题

Avada中文汉化版-多功能企业主题 Avada中文版是一个多功能wordpress主题,适用于企业站和相册站、博客站。设计简洁大方,非常适合喜欢简洁风格的企业使用,主题自带幻灯片,支持商店插件,带页面生成器插件,即可只购买主题使用,也可以配合其它的幻灯片插件使用。 立刻购买 交流圈子 注意 * 此…

为TA充电
共{{data.count}}人
人已赞赏

【龙萱坤诺】声明:

龙萱坤诺所有资源来源于网络及用户分享或为本站原创,仅限用于学习和研究,如有侵权请邮件联系站长!不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站概不负责!

 

龙萱坤诺欢迎您投稿发表文章,更有龙萱坤诺奖励和额外收入!根据投稿内容质量,可获邀入驻本平台,开启您的站长之路!

 

如有链接无法下载、失效或广告,请到论坛反馈!

联系我们

© 转载请声明:转载自“龙萱坤诺"

网站开发

Avada主题设置网站顶部风格教程

2019-12-22 16:13:01

网站开发

Avada主题优化加速禁用Avada Sliders幻灯模块

2019-12-22 16:22:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

热门专栏

文章发布排行

更多
  • 官方编辑

    仁师lv9

    文章

    6169

    评论

    4

    粉丝

    4

    关注

    0

    龙萱坤诺官方编辑员
  • 玩机技巧

    初学子lv0

    文章

    722

    评论

    2

    粉丝

    0

    关注

    0

    分享最新、最热的玩机教程。有需要的教程也可以圈子发帖提需求呦。
  • 微客创赢

    坛圣lv13

    文章

    288

    评论

    26

    粉丝

    5

    关注

    4

    程序员小白
  • 龙萱坤诺

    坛圣lv13

    文章

    133

    评论

    59

    粉丝

    6

    关注

    5

    龙萱坤诺管理员
  • wordpress建站

    有学者lv2

    文章

    70

    评论

    12

    粉丝

    2

    关注

    0

    Wordpress建站服务商