• 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

  • 给网站增加一个离线缓存功能

根据某网站来做一个WordPress网站性能优化实例

网络技术 云落 1年前 (2018-02-02) 505次浏览 11个评论
文章目录[隐藏]

现在流行的说法都是百度谷歌开始抛弃打开速度慢的网站了,但是对于网站速度的问题,影响因素有很多的,但是一个网站的性能问题却是绝对的,一般来说网站打开速度快的网站性能不一定好,但是网站性能比较好的网站速度也不会差到哪里去,今天借助我的友链的一个网站,来分类剖析网站性能优化的那些问题。

根据某网站来做一个WordPress网站性能优化实例

前言

根据某网站来做一个WordPress网站性能优化实例

规则

根据某网站来做一个WordPress网站性能优化实例
看上图,网站性能根据排序,分为A/B/C/D/E/F,A最好,后面的反之,因为是来自加拿大的测试服务器,所以加载时间这些我们不看,没有参考价值,我们主要看pagespeed和yslow这两个标签,下面的推荐项目,分数,类别,优先级,下面我们具体的分析下这个网站的问题。

PageSpeed分析

我们先来看一下PageSpeed的具体分析报告,看下图
根据某网站来做一个WordPress网站性能优化实例
下面开始具体的每条进行分析和解决。

Enable gzip compression

这个意思是需要启用Gzip压缩,减少从服务器发送的文件的大小,以增加传输到浏览器的速度。

根据某网站来做一个WordPress网站性能优化实例
如何检查自己的网站有木有进行gzip压缩,可以使用下面这个网站试试:
站长直接Gzip检测
关于如何开启Gzip,115遇见有一篇很全面的文章

http://www.511yj.com/wordpress-seo-gzip.html

另外云落再添加一种,在wp-config.php文件添加下面代码也可以

define( 'ENFORCE_GZIP', true );

Leverage browser caching

这个就是开启浏览器缓存,我们都知道缓存一般分为服务器端缓存和客户端缓存【也就是浏览器缓存】,用户打开一次我们的网站就会从我们的服务器下载若干静态资源,我们应该让下载到客户浏览器缓存里面的文件继续使用,不需要压力重复从服务器里面下载文件。

根据某网站来做一个WordPress网站性能优化实例
解决办法也很简单,只需要在服务器htaccess文件里面添加下面代码【云落自用的】

## 文件缓存 ##
<FilesMatch ".(html|gif|jpg|jpeg|png|ico|js|css)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>

其实这一个项目和雅虎的一个项目很相似的,下面说道再说。

Optimize images

这个项目很简单,就是优化图片而已,一般是jpg和png图片,如果你不会优化的直接点击右侧的optimized version,可以直接下载压缩版本的。

根据某网站来做一个WordPress网站性能优化实例
关于图片压缩,其实有很的解决办法:

Antelope:优秀的图片压缩工具推荐下载

文章目录[隐藏] 前言 软件介绍 软件使用 后语 相关链接 Antelope是一款非常不错,简单的图片压缩软件 […]

百度网盘

Specify image dimensions

给图片指定尺寸,简单说就是省去浏览器的麻烦,就是说如果你给一个图片指定了尺寸,浏览器就会直接按照你指定的去显示图片,如果没有指定的话,浏览器回去自己检查图片尺寸,然后根据实际情况再显示图片,这个无形之中就是增加了浏览器的负担,毕竟浏览器的主要任务是渲染整个页面。

我们来举个栗子:

<img src="xxoo/xxoo.jpg">

这段代码是高速浏览器,这里有一个突破,地址xxooxxoo,至于尺寸没有标明,那么需要浏览器自己检测这个图片了

<img width="250px" height="250px"  src="xxoo/xxoo.jpg">

后面这句告诉浏览器,这里有个图片,地址xxooxxoo,尺寸是250*250,那么浏览器会直接按照你写明的尺寸进行展示,这个无形之中就帮助浏览器减轻了负担,版浏览器减轻了负担,不就是加快了网页的展示了嘛!

Minify JavaScript

压缩js文件,这个很好理解,很多js教程教你怎么使用的时候,给你的经常是未压缩版本,主要是为了方便给你二次开发的,但是你开发完毕投入使用的时候,请注意要进行压缩一下,方形,正常的压缩是不影响使用的,比如jQuery就是的。

根据某网站来做一个WordPress网站性能优化实例
下面推荐个js压缩工具,当然,你压缩完一个文件之后要检测下相关功能是否受到影响。
js在线压缩

Specify a cache validator

设定一个缓存验证,有的插件或者主题会使用.css.php或者js.php动态的加载静态文件,这个就导致浏览器没发正确的获得缓存验证
根据某网站来做一个WordPress网站性能优化实例

<IfModule mod_headers.c>
    <FilesMatch ".(php)$">
        Header set Last-Modified "Tue, 31 Aug 2018 00:00:00 GMT"
    </FilesMatch>
</IfModule>

Minify CSS

压缩css,这个道理和上面的压缩js一样的,压缩无用代码,减少文件大小,加快加载嘛

根据某网站来做一个WordPress网站性能优化实例

在线压缩CSS工具

Remove query strings from static resources

移除静态文件的查询符,简单说静态文件的链接里面不能带有?问号的,关于这个针对这个站点我们分两步看。
根据某网站来做一个WordPress网站性能优化实例
第一步:接触缩略图里面的问号,由于这个站点缩略图使用的timthumb方案,可以采用七牛,又拍,OSS等云存储的解决方案,采用图片处理+自定义图片样式名就可以解决。
第二步,针对缩略图以外的查询符,我们可以使用下面这个方法来解决:

WordPress优化:禁用网站静态资源版本查询

文章目录[隐藏] 前言 函数代码 推荐阅读 通过禁用WordPress静态资源的版本查询来实现WordPres […]

Specify a Vary: Accept-Encoding header

这个还是头部的问题,主要说我是不是可以压缩的,问题不大没设置也无妨
根据某网站来做一个WordPress网站性能优化实例

<IfModule mod_headers.c>
  <FilesMatch ".(js|css|xml|gz|html)$">
     Header append Vary: Accept-Encoding
   </FilesMatch>
</IfModule>

Enable Keep-Alive

启用HTTP Keep-Alive或HTTP持久连接允许相同的TCP连接发送和接收多个HTTP请求,从而减少后续请求的延迟。打个比方吧,你从卧室版一堆东西到客厅,是没开一次门都关上,还是搬完东西再关门?其实很好理解的
解决办法也简单,还是htaccess文件

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

Defer parsing of JavaScript

延迟加载js文件,简单说就是将js文件放在最后执行,放到WordPress里面就是加载js文件的时候需要这样执行

wp_register_script('default', get_template_directory_uri() . '/assets/js/global.js', false, '1.0', true );//底部加载
wp_enqueue_script('default');

Yslow分析

雅虎的Yslow分析成绩也是挺惨的,但是问题比较集中
根据某网站来做一个WordPress网站性能优化实例

Add Expires headers

给静态文件添加过期头,其实这个问题和之前说过的浏览器缓存是一个道理的,也可以直接使用上面的代码
根据某网站来做一个WordPress网站性能优化实例
云落这里也可以提供一份完整一点的,其实都差不多

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

Make fewer HTTP requests

减少http请求,简单说将一些不必要单独存在,经常是一起运行的静态文件合并到一起
根据某网站来做一个WordPress网站性能优化实例
js请求有20个,css请求有9个,不要忘了,还有若干图片请求。。。。。。

Use a Content Delivery Network (CDN)

这是让你使用cdn的,关于CDN其实说的很多,但是经常有人问我:用了XXX怎么感觉没快,反而慢了?使用XXX加速是真的吗?怎么没有感觉到?总之各种问题。
根据某网站来做一个WordPress网站性能优化实例
关于CDN我这里简单的做个比喻,平时我去打酱油都去小区大门口的大超市,没事都要跑大半个小区,突然有一天我们楼下开了个小店,我现在直接去楼下小店打酱油,你说,去门口超市打酱油速度快还是去楼下打酱油速度快?道理是明显的。

Use cookie-free domains

简单说就是使用一些不带cookie的域名来专门做静态文件的传输,其实上还是CDN的问题,解决了CDN也就解决了这个。

Reduce the number of DOM elements

减少DOM元素的数量,这里没有好的办法,只能从WordPress主题下手了,这个需要你有一定的技术了。

按需加载

按需加载这个是云落后加的,这个是一种思路,而不是具体方法,简单说,当前页面不需要的都应该被禁止加载,我这里简单的举例说明:
第一:图片弹窗
一般来说图片弹窗会应用于文章页,首页使用这个功能的很少,所以关于图片弹窗的js和css都应该安排在文章页加载,简单来说就是做个is_single()的判断而已。
第二:代码高亮
同上一般来说代码高亮同样是运用在文章页的,但是很多代码高亮插件为了考虑兼容性,在首页同样加载相关js和css文件,那么同样应该被挪移到文章页。
第三:短代码
云落很喜欢使用短代码,但是使用短代码也会加在一些代码,并且并不是每篇文章都会使用某个短代码,如果直接加载了相关资源,是不是有点浪费?我们可以通过判断短代码是否存在来加载资源。举例:

function secret_css() {
	global $post;
			if ( has_shortcode( $post->post_content, 'secret') || has_shortcode( $post->post_content, 'vip')  ){
    echo '<style type="text/css">.wxpic{float:left;width:18%}.wxtips{color:#32B9B5;float:left;width:72%;padding-left:5%;padding-top:0;font-size:20px;line-height:150%;text-align:left;font-family:Microsoft YaHei}.yzts{margin-left: 40px}@media (max-width:600px){.yzts{margin-left:5px}.wxpic{float:left}.wxbox #verifycode{width:35%}.wxbox #verifybtn{width:22%}.wxpic,.wxtips{width:100%}.wxtips{font-size:15px;padding:2px}}</style>';}}
add_action('wp_head', 'secret_css');

第四:后台资源
很多文都说WordPress后台也很卡,我可以详细的看看后台有木有多加载资源,我们一般可以根据当前所在页面来加载一些必要的资源。

后语

说了那么多,肯定有人问,那么博主你的怎么样?我来截个图看看吧
根据某网站来做一个WordPress网站性能优化实例
当然如果是壕玩家,那么可以无视文章所写,加钱提高宽带,上好的CDN 都是可以解决的。

相关链接

Gtmetrix 云落的检测报告 示例网站的报告


-- 完 --
根据某网站来做一个WordPress网站性能优化实例
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送WordPress小技巧,你可以随时退订,欢迎订阅哦~

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:根据某网站来做一个WordPress网站性能优化实例
喜欢 (21)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(11)个小伙伴在吐槽
  1. 测试看看看
    云落小号2018-12-21 19:37 回复 Windows 10 | Firefox浏览器 58.0
  2. 很好,很强大,转载了,留着以后方便查看
    枫少2018-05-04 13:58 回复 Windows 10 | Chrome 63.0.3239.132
  3. 那个添加过期头代码放在哪。。。原谅小白啊,检测了一下 两个B,一个让我添加过期头,一个让我添加CDN和浏览器缓存。浏览器缓存按照你的方法设置好了,就差过期头了,谢谢。
    乖乖博客2018-03-12 07:27 回复 Linux | Chrome 37.0.0.0
  4. 很好很强大
    a7919266152018-03-09 16:25 回复 Windows 7 | Chrome 55.0.2883.87
  5. 完全看不明白。。。
    悦色2018-02-24 09:42 回复 Windows 10 | Chrome 53.0.2785.104
  6. 应该是对国内用户无效吧!我用我的博客测试结果是C和D!o(╯□╰)o
    明月登楼学习笔记2018-02-11 16:13 回复 Windows 7 | Firefox浏览器 59.0
    • 云落
      有限,因为这个是根据响应的的内容来判断的。不是根据速度,另外如果使用cdn的话,源站的一些优化就会无效,比如文章提到的网站,实际上优化设置都做了,但是加了360网站卫士,响应给浏览器的是360的,而不是源站的
      云落2018-02-11 16:17 回复 Linux | Chrome 55.0.2883.105
  7. 博主的网站打开速度很快。
    挖站否2018-02-10 11:13 回复 Windows 7 | Firefox浏览器 58.0
  8. 我把js和css都放在七牛上,结果说我没用cdn给了零分...
    唐门2018-02-05 17:08 回复 Windows 10 | Chrome 63.0.3239.132
  9. 很强势,这分析。 :wink:
    zlsin2018-02-03 21:33 回复 Windows 10 | Chrome 61.0.3163.91
  10. 大赞啊 分析的很给力~ :roll:
    龙笑天2018-02-02 23:19 回复 Windows 7 | Firefox浏览器 28.0