Designed item on Suzuri 👔

WordPressサイトの速度アップに! function.phpへ記入するだけでコードを圧縮できる

WordPressサイトの速度アップに! function.phpへ記入するだけでコードを圧縮できるウェブ
Photo by JESHOOTS.COM on Unsplash
この記事は約11分で読めます。

*引用シェア歓迎です。リンクを記載し自由にご使用ください

クリブログ

 

ウェブサイトの表示速度は、速ければ速いほど良い。できれば一瞬で表示させたい。

なんでも、最初のページが表示される(読み込まれる)までに3秒以上かかると53%が離脱するらしい。

Source: Google/SOASTA Research, 2017.

参照:「Find out how you stack up to new industry benchmarks for mobile page speed

WordPressは動的サイトを構築するCMSであり、より多くの人が様々な使い方をできるように多数のファイルで構築されている。よって、読み込むファイルが多くなるため表示速度が遅くなりやすい。手っ取り早く表示速度を上げる方法に、コードを圧縮するというものがある。

例えば、以下のようになる。このサイトのCSSだ。

普通


html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #121416;
text-align: left;
background-color: #fff;
}

圧縮済み

html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#121416;text-align:left;background-color:#fff}

文字通り、CSSコードが圧縮されていることをお分かりになるだろう。圧縮されたことでファイルサイズが小さくなり、結果として読み込み速度が早くなるというロジックだ。

もちろん、サーバーの環境や使用しているテーマ、プラグインなどの方が影響は大きいのだが、コードを圧縮しておくことに損はない。

コードを圧縮するプラグインはあるが、脆弱性や更新作業などを踏まえると、なるべくプラグインは使用せず実装できることは実装した方が良い。ということで、プラグインを使用しない場合と使用する場合に分け、html、CSS、Javascriptを圧縮する方法を簡単に紹介する。

プラグインなし

プラグインを使用しない場合は、コードをfunction.phpの下部に追加するだけだ。

子テーマ(Child Theme)を使用していないサイトは、テーマがアップデートされるたびにリセットされてしまう。このことから、子テーマを利用しよう。

有料テーマを使用している場合は子テーマが付属しているはず。無料テーマも「テーマ名 + Child Theme」というワードで検索をすれば出てくるため問題ない。

コードは以下の通り。


<?php
class WP_HTML_Compression
{
	// Settings
	protected $compress_css = true;
	protected $compress_js = true;
	protected $info_comment = true;
	protected $remove_comments = true;

	// Variables
	protected $html;
	public function __construct($html)
	{
		if (!empty($html))
		{
			$this->parseHTML($html);
		}
	}
	public function __toString()
	{
		return $this->html;
	}
	protected function bottomComment($raw, $compressed)
	{
		$raw = strlen($raw);
		$compressed = strlen($compressed);
		
		$savings = ($raw-$compressed) / $raw * 100;
		
		$savings = round($savings, 2);
		
		return '<!--HTML udah dikompress, lumayan tuh berkurang '.$savings.'%. Tadinya '.$raw.' bytes, sekarang cuma '.$compressed.' bytes-->';
	}
	protected function minifyHTML($html)
	{
		$pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
		preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
		$overriding = false;
		$raw_tag = false;
		// Variable reused for output
		$html = '';
		foreach ($matches as $token)
		{
			$tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
			
			$content = $token[0];
			
			if (is_null($tag))
			{
				if ( !empty($token['script']) )
				{
					$strip = $this->compress_js;
				}
				else if ( !empty($token['style']) )
				{
					$strip = $this->compress_css;
				}
				else if ($content == '<!--wp-html-compression no compression-->')
				{
					$overriding = !$overriding;
					
					// Don't print the comment
					continue;
				}
				else if ($this->remove_comments)
				{
					if (!$overriding && $raw_tag != 'textarea')
					{
						// Remove any HTML comments, except MSIE conditional comments
						$content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
					}
				}
			}
			else
			{
				if ($tag == 'pre' || $tag == 'textarea')
				{
					$raw_tag = $tag;
				}
				else if ($tag == '/pre' || $tag == '/textarea')
				{
					$raw_tag = false;
				}
				else
				{
					if ($raw_tag || $overriding)
					{
						$strip = false;
					}
					else
					{
						$strip = true;
						
						// Remove any empty attributes, except:
						// action, alt, content, src
						$content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
						
						// Remove any space before the end of self-closing XHTML tags
						// JavaScript excluded
						$content = str_replace(' />', '/>', $content);
					}
				}
			}
			
			if ($strip)
			{
				$content = $this->removeWhiteSpace($content);
			}
			
			$html .= $content;
		}
		
		return $html;
	}
		
	public function parseHTML($html)
	{
		$this->html = $this->minifyHTML($html);
		
		if ($this->info_comment)
		{
			$this->html .= "\n" . $this->bottomComment($html, $this->html);
		}
	}
	
	protected function removeWhiteSpace($str)
	{
		$str = str_replace("\t", ' ', $str);
		$str = str_replace("\n",  '', $str);
		$str = str_replace("\r",  '', $str);
		
		while (stristr($str, '  '))
		{
			$str = str_replace('  ', ' ', $str);
		}
		
		return $str;
	}
}

function wp_html_compression_finish($html)
{
	return new WP_HTML_Compression($html);
}

function wp_html_compression_start()
{
	ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');
?>

一番上にある「<?php」は、基本的に消してもらって良い。

上記のコードを追記し保存する。Cloudflareやプラグインでキャッシュを効かせている場合は、キャッシュをクリアし「右クリック + ページのソースを表示」あるいは「Ctrl + U or Command + U」でページのソースを見てあげよう。

ギュッと、圧縮されているのが分かるはずだ。

プラグインあり

プラグインを使用する場合は簡単。

Autoptimize」というプラグインをインストールし、HTML、CSS、Javascriptを圧縮するようにチェックしてあげるだけ。

WordPress.orgのPluginページから検索しダウンロード・解凍 & FTPでアップロードするか、サイト内のプラグインを新規追加からインストールする。

上記のように、それぞれチェックが慣れてていればOK。万が一サイトのレイアウトが崩れた場合は、すべてチェックを解除し、1つずつ原因をチェックしてあげれば良い。問題となる部分のみチェックを外そう。

まとめ

後者、つまりプラグインを使用する方が簡単だが、プラグインをなるべく使いたくない人にとって、function.phpにコードを追記するだけで圧縮できるのは魅力的だろう。

ほか、何か良い方法やサイト速度に関する提案などあれば、ぜひお話しましょう!

参照:basiclue

コメント