谷姐:我们都是谷歌迷
We are all Google fans

禁用Inline Google Spreadsheet Viewer部分JS和CSS有效果提升网站在Google PageSpeed的得分

最近在尝试优化博客在Google的PageSpeed的得分。如果什么都不做,在一些插件的影响下,网站得分(尤其是移动端的)惨不忍睹!

PageSpeed

一、问题描述

通过读Google给的结果和优化建议,发现
1. 主要影响速度的插件是用于加载Google Sheets表格的插件:Inline Google Spreadsheet Viewer。这款插件臃肿地全局地引入了十几个JS和CSS:只要开启这个插件,就在网站的所有页面都引入他所需要的的几个JS和CSS,没有做一点优化,更神奇的是当有人问这个问题的时候,作者的神建议是既然这样,那就不要用这个插件(帖子见参考1)。这个插件目前没有可替代的,只能自己想办法改一改了。
2. 电脑端的得分几乎是手机端的2倍,这说明了得分低并不是服务器和线路的问题,否则要烂一起烂不至于悬殊这么大。
3. 手机端的给的建议是,移除几个不必要的JS/CSS。但是奇怪的是,看了下电脑端也给了同样的建议,难道手机端和电脑端,在同样的代码下就应该低这么多?

二、优化IGSV插件步骤记录

禁用不需要的JS/CSS

找了很久,发现原来插件本身可以通过剔除掉不需要的JS/CSS,做到只加载部分所需要的JS/CSS:
Wordpress的后台通过外观->主题编辑器,进入到对当前主题的编辑页,找到functions.php,在?>前面添加:

// Customize your functions
function igsv_dequeue_google_scripts ($scripts) {
	// unset($scripts['jquery-datatables']);
	// unset($scripts['datatables-responsive']);
	// unset($scripts['igsv-datatables']);
	// unset($scripts['google-ajax-api']);
	unset($scripts['datatables-buttons']);
	unset($scripts['datatables-buttons-colvis']);
	unset($scripts['datatables-buttons-print']);
	unset($scripts['pdfmake']);
	unset($scripts['pdfmake-fonts']);
	unset($scripts['jszip']);
	unset($scripts['datatables-buttons-html5']);
	unset($scripts['datatables-select']);
	unset($scripts['google-ajax-api']);
	unset($scripts['igsv-gvizcharts']);
	unset($scripts['datatables-fixedheader']);
	unset($scripts['datatables-fixedcolumns']);
	return $scripts;
}
function igsv_dequeue_google_styles ($styles) {
	// unset($styles['jquery-datatables']);
	// unset($styles['datatables-responsive']);
	unset($styles['datatables-buttons']);
	unset($styles['datatables-select']);
	unset($styles['datatables-fixedheader']);
	unset($styles['datatables-fixedcolumns']);	
	return $styles;
}
add_filter('gdoc_enqueued_front_end_styles', 'igsv_dequeue_google_styles');
add_filter('gdoc_enqueued_front_end_scripts', 'igsv_dequeue_google_scripts');

只在需要的页面启用插件

博主不太会PHP,暂时用笨方法做到让插件只在用到的地方才加载JS/CSS,修改插件核心文件inline-google-spreadsheet-viewer/inline-gdocs-viewer.php

foreach ( $styles as $handle => $style ) {
		// use the js only on the those two posts: id=1 and 1360
		if ( is_single( array( 1, 1360 ) ) ) {
			wp_enqueue_style(
				$handle,
				$style['src']
			);
		}
}

foreach ( $scripts as $handle => $script ) {
	// use the js only on the those two posts: id=1 and 1360
	if ( is_single( array( 1, 1360 ) ) ) {
		wp_enqueue_script(
			$handle,
			$script['src'],
			( isset( $script['deps'] ) ) ? $script['deps'] : array()
		);
	}
}

即用is_single判断是否为文章id=1或者1360,如果是的话,才加载JS和CSS。

三、更多优化

经过对几个无法替代的垃圾插件进行优化后,速度提升了很多,电脑端的得分直接上了90分。
博客电脑端的PageSpeed得分
但是现在的问题成了手机端的得分只有电脑端的一半,徘徊在40-60分。
博客手机端的PageSpeed得分
另外给的主要建议是
1. 移除不必要的CSS

移除掉不必要的CSS

https://www.goojie.eu/wp-includes/css/dist/block-library/style.min.css
https://www.goojie.eu/wp-content/themes/qux/css/main.css?ver=9.2
https://www.goojie.eu/wp-content/themes/qux/css/ucenter.css?ver=9.2
https://www.goojie.eu/wp-content/themes/qux/css/bootstrap.min.css?ver=9.2

2. 移除不必要的JS

https://pagead2.googlesyndication.com/pagead/js/r20210112/r20190131/show_ads_impl_fy2019.js
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
https://www.goojie.eu/wp-content/themes/qux/js/ucenter.js?ver=9.2

CSS部分是QUX主题自带的重要的样式,JS部分前两个是Google Adsense广告引入用的。想着可以在首页禁用加载Adsense的广告引入代码,但是那几个关键的CSS如果移除了,首页就没法正常显示了,实在不知如何是好…

为了移除block-library相关的CSS(属于新的WP编辑器用到的东西,这里的确不必要),和上面的方法一样,找到functions.php,在?>前面添加:

//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
} 
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 100 );

其他移除不动的,等找到解决办法后补充!

以上仅做记录,若做法太菜,还请大佬们帮忙指正,以免造成误导!

参考
1. https://wordpress.org/support/topic/speedpage/
2. https://wordpress.org/support/topic/load-cssjs-files-only-on-pages-with-shortcode/
3. https://wordpress.org/support/topic/only-enqueue-js-if-using-shortcode/
4. https://wordpress.org/support/topic/only-active-on-particular-page/

未经谷姐允许不得转载:谷姐靓号网 » 禁用Inline Google Spreadsheet Viewer部分JS和CSS有效果提升网站在Google PageSpeed的得分
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录   注册

买Google Voice认准【谷姐靓号网】

Google Voice靓号列表Google Voice自助购买
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活