禁用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分。

但是现在的问题成了手机端的得分只有电脑端的一半，徘徊在40-60分。

另外给的主要建议是
1. 移除不必要的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/