网站建设

WordPress高亮插件:Crayon Syntax Highlighter加载优化

Crayon Syntax Highlighter是我这种代码控的必装插件。但是,这款插件也有一些小缺憾,比如体积大、拖慢速度、容易产生冲突等。很多博主就是因为这些个原因,才不得不忍痛割爱。 至于冲突问题,上次博客已分享过一次相关教程,感兴趣的可以看看: 解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题 本文主要是分享Crayon Syntax Highlighter插件的CSS和JS加载优化。 优化原理:禁止Crayon Syntax Highlighter插件js和css的全局自动加载机制,只有检测到文章中存在代码时,才会按需加载,这样解决了所有页面均加载js和css拖慢博客速度的问题。 修改方法: ①、禁止自动加载 后台编辑Crayon Syntax Highlighter插件,利用浏览器 Ctrl+F 依次搜索一下关键词,并注释掉: 比如搜索到self::crayon_theme_css();,则直接在这行代码前加上双斜杠//屏蔽即可,如图: 其中self::enqueue_resources();有2处,总共4处,全部注释即可。 ②、按需加载函数 第①步已经禁止插件在前台输出js和css了,下面部署按需加载函数。 将以下代码添加到WordPress主题目录下的functions.php当中即可实现按需加载: 其中, 最后一个css定义了文章高亮代码的样式,默认是classic.css,若在后台选了其他样式,请按实际更改即可! Ps:其实第②步中的css和js代码,就是未禁止插件全局加载之前,在页面源代码中复制而来的,只要注意代码中全部使用双引号即可(因为单引号给php了)。如果你看明白了,又无法确认代码中css的路径,也可以在禁用全局加载之前,先从前台网页源代码中复制一份,留作第②步使用即可。 做好以上操作之后,那么只有在文章中存在需要高亮显示的代码时,才会在文章页面输出上方的CSS和JS,从而解决了这款高亮插件全局加载CSS和JS,影响页面加载速度的问题。 教程完毕,希望对你有所帮助! 最后弱弱的打个广告:如果你是纯粹的代码盲,而又强迫症一般追求博客速度,那么可以购买张戈博客的有偿服务,让张戈来帮你优化WordPress加载速度!
阅读全文
又是Crayon Syntax Highlighter! 网站建设

又是Crayon Syntax Highlighter!

前言:昨天才发现文章以及分类页面,底部的公告不滚动了,但是在首页却是好的,本以为是我修改了相关代码导致的,等我修改过的还原之后,问题依旧,于是wopus问了下,被告知是插件冲突!在使用排除法后发现是主题与Crayon Syntax Highlighter高亮插件有冲突!而且图片暗箱放大功能也因为这个插件而无法使用,有2次因为这个插件的冲突导致服务器卡死,被空间商停用了数小时!实在忍无可忍,终于将这个插件给开除了!  熟悉我博客的朋友都知道,我的博文脚本代码比较多,所以这个插件的易用性带给我很大的便利,于是我在【底部公告+暗箱放大】 VS 【代码高亮 】中权衡利弊,我觉得前面2个都是华而不实的功能,远远没有Crayon对于玛思阁来得重要。于是我还是打算关闭公告和暗箱效果,保留高亮插件。但是接下来的测试还是让我忍痛割爱。 昨天空间商客服再次联系我,说我的博客产生的CPU负载太高,需要暂停服务器,并让我尽快调试好。于是我又到PHPmMyAdmin中将所有插件全部咔掉,然后告知空间商客服已OK。开启来之后,为了找出产生高负载的原因,我将插件依次启用,并同时测试页面加载速度。这一测还真发现了问题,在插件全部禁用的时候,我网站加载速度平均在0.5s左右,我去,从来都是3s以上,很多时候都是5s左右,全部禁用之后,速度竟然快了近10倍!!?于是我终于理解为什么万戈等博主都提倡插件能不用就不用了! 测试发现,某些插件还真是卡!启用之后平均拖慢了接近1s,有的甚至更严重!比如WP Mail SMTP,启用之后页面加载速度瞬间慢至2S以上,真乃神器啊!现在用多说了,这东西果断干掉【Win主机就是闹腾】!另外发现多说和WP User Avatar貌似也存在冲突,这个头像插件还是最开始的时候安装的,一直也没去鸟它,现在发现拖慢速度,个人猜测可能是与多说{或主题}的头像调用产生了冲突导致的。当测试到Crayon Syntax Highlighter时,发现加载速度直接慢至4s以上!于是我决定将其开除!虽然原因很可能就是和主题有冲突,但是个人技术有限,暂时先放弃解决方法的研究。 这主题本身自带了高亮代码生成工具,试用了下感觉还行,虽然没有那些实用的按钮,而且兼容性可能也就一般,但是优势在于完全不会拖慢速度,深思熟虑之后决定以后就用它了!于是动手将几十篇博文中的代码全部又重新编辑了一遍,真是累趴下!  这下世界终于清静了!
阅读全文