Stinger8を高速化してサイトの表示速度を劇的に向上させる5つの方法 – AffiPress!!

AffiPress!!

Wordpressを使ったアフィリエイトのあれこれ

サイトチューニング

Stinger8を高速化してサイトの表示速度を劇的に向上させる5つの方法

投稿日:

高速化しよう

多くのブロガーやアフィリエイターが愛用しているWordPressテーマ「Stinger」ですが、このテーマを高速化してみます。

Stingerはデザインもシンプルで気持ちよく、SEOに強いので一見最強に見えますが、速度の面でまだ改善の余地があります。速度が遅いと「ユーザーの離脱率があがる」「Googleのクローラーの巡回が遅くなる」「検索順位に影響を与える」など、ユーザーと検索エンジンの両方から置いて行かれます。アフィリエイターにとっては致命的な問題です。なのでロスを減らすために高速化していきます。

さてサイト速度の改善点を見つけるためにはGoogleの「PageSpeedInsight」を使っていきます。入力欄にアドレスを打ち込むだけで簡単に使えて無料ですので、知らなかった人はブックマークしておきましょう。

評価の仕組みはページの読み込み速度を測るのではなく、ページの読み込みを遅くする要素がどれだけあるかを減点方式で評価します。なので画像がたくさんあっても画像を適切に配信されているサイトであれば減点されません(頑張れば100点も取れます、難しいですが)。

測定するサイトは、エックスサーバーにWordpressを入れて新規に作成した状態です(まだ記事を入れていません)。

測ったところ、以下のようになりました。

初期

100中66点。

遅いです。100点満点には届かなくても90点台は目指したいです。ちなみに、私の作るサイトはモバイルからのアクセスが多いのでモバイルでの評価を起点に見ています。パソコン(で見た場合)の評価もう緑なので、そういったサイトを作る時はStingerは調整無しで使えることになりますね。

それでは高速化に着手していきます。Googleが提案している、

  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  • 圧縮を有効にする
  • ブラウザキャッシュを活用する
  • CSSを縮小する
  • JavaScriptを縮小する
  • HTMLを縮小する

をやっていきます。

※ 作業を始める前に必ずバックアップをとっておきましょう
※ テスト環境を用意するなど、エラーが出ても本番環境に影響がないようにしましょう
※ あくまくで自己責任で

圧縮を有効にする

66点 → 69点

サーバーから閲覧者に送るデータを圧縮しているか、という意味で専門用語でgzipといいます。サーバーから圧縮したデータを送り閲覧者のブラウザ側で回答することで通信にかかる容量を小さくし、高速化します。

以下のコードを.htaccessに追記して圧縮を有効にします。


#gzip
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/font-woff2 .woff2
</IfModule>

 

これでスコアが3点向上しました。微々たるものですね。

ブラウザのキャッシュを有効にする

69点 → 71点

ブラウザキャッシュとはブラウザに保存しておくデータです。サイトに2回目にアクセスしたときに、サーバーにデータを取りに行かずにブラウザに保存しておいたデータを取りに行ったほうが速くwebサイトを表示できます。

これも.htaccessに設定を書きてきます。


# cache
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/font-woff2 .woff2 "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>

 

こちらは2点向上しました。

css/HTML/javascriptを縮小する

71点 → 71点

テーマフォルダの中にあるhtml,css,javascriptを圧縮をします。

ファイルの内容から改行や空白、コメントなどを除去し、可読性を犠牲にファイルの容量を縮小します。

こういったツールを使用して縮小していきましょう。

まだこれは点数に影響がありませんでした。

jQueryを非同期に読み込む

71点 → 79点

これは大きな変化がありました。

JavaScriptを読み込んでいる間は他の読み込みができず、読み込みが終わるまで後続のhtmlや他のファイルの読み込みができません。stingerはjQueryをヘッダーで読み込んでいるのでサイトの表示を妨げる原因になっています。なのでjqueryを読み込むタイミングをずらします。

テーマのfunctions.phpを開きます。

jquery

jQueryを読みこんでいる25~31行目までを削除します。

header.phpを開き<?php wp_head();?>の前に


<script async type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3'></script>

 

と追記します。

asyncとscriptタグに書けば非同期で(読み込むタイミングをずらして)読み込んでくれます。

CSSを読み込むタイミングをずらす

79点 → 90点

はい、これで90点、緑色です。

cssもhtmlを読み込み終わってから読むように設定します。

functions.phpを開き、

css

45~67行目を削除します。

header.phpでmetaタグのあとに


<link rel="preload" as="style" id='toc-screen-css' href='https://affi.press/wp-content/plugins/table-of-contents-plus/screen.min.css?ver=1509' type='text/css' media='all' onload="this.rel='stylesheet'" />
<link rel="preload" as="style" id='normalize-css' href='https://affi.press/wp-content/themes/stinger8/css/normalize.css?ver=1.5.9' type='text/css' media='all' onload="this.rel='stylesheet'" />
<link rel="preload" as="style" id='font-awesome-css' href='https://affi.press/wp-content/themes/stinger8/css/fontawesome/css/font-awesome.min.css?ver=4.5.0' type='text/css' media='all' onload="this.rel='stylesheet'" />
<link rel="preload" as="style" id='style-css' href='https://affi.press/wp-content/themes/stinger8/style.css?ver=4.7.2' type='text/css' media='all' onload="this.rel='stylesheet'" />

 

と追記します。

<link rel=”preloadas=”style href=’adress.here’ type=’text/cssmedia=’allonload=”this.rel=’stylesheet’ />

relでpreload、asでstyle、onloadを指定することでcssも非同期にすることができました

まとめ 1秒かからずに高速表示できるようになった

以上の施策をやったところ、

90点!

こうなりました。90点です。ここから細かな調整をしていきますが、概ね高速と言えるようになりました。

ブラウザキャッシュなしでWeb担当者Forum版 ページ速度分析ツールで測定したところ、ページが表示されるまでの時間は0.556秒でした。

速度

一般的に見てかなり高速ですね。

アフィリエイターなら高速化の知識は必須である理由

冒頭にも書きましたが、ページの速度は検索順位にも影響してきます。具体的には「同じ質のコンテンツ」「同じ質の被リンク」だっとするとページ速度が早い方に有利な判定を与えます。ライバルに勝つためにはあらゆる要素で有利になっておくべきであり、高速化はSSLと並んで必須です。見かたを変えればライバルサイトの表示がとても遅いなら、まだ勝てるかもしれませんよ!

ご不明な点があればコメント欄でお気軽に質問してください。

ではでは。

 

-サイトチューニング
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

関連記事はありませんでした