サイトの速度が遅い原因の一つとして、
使っているワードプレスのテーマも関係しています。
HTMLやCSS、Javascriptなどの記述であったり原因は様々ですが、
SEOにとても強く上位表示に人気のあるテーマへ変更して、さらにツールで速度アップを試みてみました。
変更前と変更後の比較は分かりやすいように数値で表示されたものを使用していきます。
SEOに強いと人気のテーマへ変更
まずは手っ取り早くサイトの速度を上げるために、ワードプレスのテーマを変更してみます。
今回は株式会社ninoyaで販売されているテーマ「New Standard」へ変更してみました。
SEOでも実績と信用のある会社が満を持して発売したテーマというだけあって、かなり評判のいいテーマとなっています。
このテーマを購入したいという方は、ページ最後に10％OFFのクーポンコードを載せておきますので、購入時にお使いください。
「ワードプレスのテーマをインストールする方法が分からない」という方はこちらを参考にしてください。
テンプレートを変えて、さらにソースの整理や画像の最適化なども行い、もっと快適にサイトを見てもらえるようにしてみましょう。
記述されているソースをスッキリさせる
Head Cleaner
⇒ https://wordpress.org/plugins/head-cleaner/
Head Cleanerはワードプレスのヘッダーの一部ソースコードをスッキリと整理し、サイトの速度を上げるためのプラグインになります。
「プラグイン」⇒「新規追加」より「head cleaner」と検索するか、上記URLよりファイルをダウンロードしてください。
プラグインの新規追加方法が分からない方は下記を参考にしてください。
プラグインの種類は違いますが、「有効化」するまではどのプラグインも同じです。
有効化にした後にまたこのページをご覧ください。
Head Cleanerを設定する
左メニューより「設定」⇒「Head Cleaner」をクリックします。
下記を参考にチェックをしてください。
今のところ、この設定でたいていの場合は安定した動作をしてくれると思います。
各種設定についての説明は以下の通りです。※チェックしていない項目の説明は省いています。
CSSとJavascriptを、サーバー上にキャッシュする
生成したファイルをサーバー上へキャッシュしておくための項目です。キャッシュすることにより、ページを開くたびに全てを読み込む必要がなくなるので、2回目以降は読み込み速度が速くなります。
複数のCSSを統合する
複数あるCSSファイルをまとめて生成してくれます。@importで複数のCSSファイルを読み込むことはページの読み込みに時間がかかる原因にもなりますので、一つのファイルにまとめるようにしましょう。
CSS を最適化する
コメントアウトや余分な空白、改行などを消去して圧縮してくれます。これだけでもかなりの行数を縮めることができます。
JavaScript を小さくする
上記のCSSと同じで、こちらは「.js」のファイルを整理してくれます。ワードプレスはたくさんのJavascriptを使うので、しっかりと小さくしてもらいましょう。
Google Ajax Libraries を利用する
jQueryをWordPressに同梱されているモノではなく、より高速に読み込めるCDN上に配置されている「Google Ajax Libraries」から取り込みます。
画像を最適化する
画像の最適化って？
簡単に説明すると、今ブログ内で使われている画像を画質を保ったままサイズを小さくして転送サイズを減らしてブログの表示速度を上げるというものです。
前回の記事で「PageSpeed Insights」の「修正が必要」とあった画像のことですね。
全部で835.8KBも削減できるということなので、早速削減していきましょう。
実際に使われている画像って、
・ワードプレステーマで使われている画像
・メディアにアップロードした画像
この2つがあると思います。
それぞれ最適化の方法が違いますので、2種類の最適化方法を使っていきたいと思います。
テーマで使用されている画像を最適化する
まずはワードプレスのテーマで使われている画像を最適化していきます。
.jpg と .png の画像を最適化することができます。
■ tinypng ⇒ https://tinypng.com/
テーマで使われている画像の場所が分からない場合は以下を参考に。
「トップディレクトリ」⇒「wp-content」⇒「themes」⇒「new-standard（テーマの名前）」⇒「images」ディレクトリの中にあります。
パスに直すとこんな感じになります。
/●●●●●/wp-content/themes/new-standard/images/
※画面はFFFTPです。
テーマフォルダ内の画像を一旦デスクトップなど、パソコン上へ保存します。
そのあと、最適化したい画像を「tinypng」へドラッグ＆ドロップします。
圧縮が終わると「Download」のリンクとボタンが表示されるので、「Download all」をクリックして圧縮ファイルをダウンロードします。
このような圧縮ファイルがダウンロードされるので、デスクトップなどに保存してください。
↓ ↓ ↓
ZIPファイルを解凍後、FTPソフトを使って最適化した画像を全てサーバーへアップロードします。
上書き確認が出てくるので、「上書き」へチェックを入れて「以降全て」をクリックします。
全ての画像が最適化されたものへ置き換えられましたね。これだけでもかなりのサイズダウンに成功です。
今回の場合は「sprite」というディレクトリにも画像が入っています。
同じ要領で「images」ディレクトリ以下の画像は全て最適化してしまいましょう。
メディアにアップロードした画像を最適化する
次に、あなたがメディアにアップロードした画像の最適化を行います。
行うといってもこちらはプラグインを使用するので、手順はいたって簡単です。
まず、「EWWW Image Optimizer」というプラグインをインストールして有効化してください。
■EWWW Image Optimizer
⇒ https://wordpress.org/plugins/ewww-image-optimizer/
有効化したら、「プラグイン」からEWWW Image Optimizerの「Settings」をクリックして設定画面を開いてください。
「Basic Settings」タブの「Remove metadata」にチェックが入っているか確認します。
最初から入っていると思いますが、入っていない場合はチェックを入れて「Save Changes」をクリックして保存してください。
次に、「メディア」⇒「Bilk Optimize」をクリックします。
「Start optimizing」をクリックすると、圧縮作業が始まります。
全部で79個の画像がありますが、進捗状況が表示されます。
このブログは画像が少なかったので数分で終わりましたが、1,000個や2,000個など、多くの画像が使われている場合は時間がかかります。1時間以上かかる場合がありますので、食事前やお風呂に入る前にセットしていくのもいいですね。
全て終わると「Finished」と出ます。
これでメディア画像の圧縮作業が終了しました。
次回からはメディアに画像をアップロードした時点で圧縮された状態となるので、メンテナンスなども必要なく楽ちんですね。
Before After
今回、サイトの速度を上げるために行った作業は
・ワードプレスのテーマ変更
・Header Cleaner でソースをスッキリ
・使用画像を圧縮して容量を小さく
この3つになります。
作業前と作業後ではどのようになったでしょうか？？？
Page Speed Insightsと GTmetrix で計測してみました。
■ Page Speed Insights
48⇒65とかなり改善されました。
■ GTmetrix
パフォーマンススコアも上がっていますが、ページの読み込み速度が30％ほど上がっていますね。
あとはHead Cleanerの他の設定部分を調整しながら更なる最適化に臨んでみてください。
例えば「＜head＞内のJavascriptを、フッタ領域に移動」の場合、jQuery主体のテーマの場合だと不具合が起きる可能性もありますし、使っているプラグインによっても異なりますので、どの設定が「正解」というのがありません。
私と同じ環境の場合だと、私が設定している内容と同じにしても同じような結果が出ると思いますが、その辺はあなたのお使いの環境と相談しながら進めていくようにしてくださいね。
Head Cleaner使用時の注意点
最後になりますが、キャッシュ系やHTML,CSS,JavaScriptなどのソースの無駄を省いて最適化するタイプの他プラグインを併用する場合、表示崩れや不具合が起きる場合があります。
プラグインを初期状態からあまり追加していない場合は大丈夫だと思いますが、最適化系のプラグインを入れており、相性がどうかわからない場合などは「ワードプレスのテーマ変更」と「画像の最適化」だけにしておいてもいいと思います。
分からない場合は無理に強行せず、結果を得られる上記２項目だけにしておき、少しずつ勉強しながら使っていくようにしましょう＾＾
テーマ[New Standard]の10％OFFクーポンはこちら
今回のサイト速度アップに使用（入れ替え）したテーマ【New Standard】の10％OFFクーポンコードです。
ご購入の際にお使いください＾＾
【10％OFFクーポンコード】
7934NXGY
※購入時にクーポンコードの入力がないと割引されませんのでご注意ください。
テーマの販売先 ⇒ 株式会社ninoya
リンク先のページ左上にある「New Standard（単品）」の購入でテーマだけを購入することができます。
制作実績もあるので、あなたの運営しているブログに使用した場合のイメージも少しはつかんでいただけると思います＾＾ ⇒ 制作事例
コメントを残す