ワードプレステーマ「ストーク」の表示速度を改善する方法【体験談】

こんな方におすすめ

  • ワードプレステーマ「ストーク」を使っている。
  • ブログの表示速度が遅い。
  • 少しでもいいので、ブログの表示速度を改善したい。

あなたのワードプレスブログ、モバイルの読み込み速度が致命的に遅くなってないですか?

最近、グーグルの「スピードアップデート」の影響を受けて、ブログのアクセス数ががくんと下がってしまいました。

そこで、ブログの読み込み速度を見てみたところ、モバイルでの読み込み速度が24%になってました。

かなり、やばい数字です。

ということで、とり急ぎ実践した、ブログのモバイルでの読み込み速度の改善方法をまとめてみました。

ページの読み込み速度は、PageSpeed Insightsで確認できます。

補足

当ブログのパソコンでの読み込み速度は、97%と高い数字になっています。

ですので、モバイルのみに焦点を当てています。

ワードプレステーマ「ストーク」の表示速度を改善するために行ったこと

僕が、ツイッターでつぶやいた一連の改善方法をまとめています。

「.htaccess」への追記

2019/03/22追記ここから

「.htaccess」にコピペするコードを、サルワカさんが提供されてるものに、変更しました。

WordPressの高速化〜表示速度を上げる12の技〜

ちなみに「ブラウザのキャッシュの設定をする=自分のブラウザにキャッシュが残っている状態」になります。

ですので、ブログをカスタマイズする場合、いったん外した状態で行うことをおすすめします。

理由はシンプルで、キャッシュが残っていると、カスタマイズ変更前の設定がキャッシュとして残ってしまう場合があるからです。

2019/03/22追記ここまで

Gzip圧縮

さらに追加して、Gzip圧縮も行いました。

Gzip圧縮は「圧縮率が高い+処理速度が速い」という素晴らしい圧縮機能を持っています。

Gzip圧縮については、フク郎さんが書かれているgzip圧縮を有効にしてサイト表示速度を速める手順の記事を参考にさせていただきました。

やることは、シンプルでして

➀「.htaccess」に、コードをコピペする。

➁「php.ini」に、コードをコピペする。

この2つを行うだけです。

エックスサーバーの場合、サーバーパネルにログインすれば、簡単に作業を行えます。

設定の変更は簡単に出来ますが、以前の状態に戻す法法を知っておくためにも、何をコピペしたのか自分でわかるように、自分でバックアップをとっておくようにしましょう。

スクリプトの読み込みをフッターへ移動する

ファーストビューで読み込む必要のないスクリプトが先に読み込まれることで、サイトの表示スピードが遅くなっている可能性があります。

ですので、スクリプトの読み込みを遅らせていきましょう。

ということで、フク郎さんの書かれている記事、WordPressでレンダリングを妨げるjavascriptを削除・移動させるにはを参考にさせていただきました。

やることは単純で、

ワードプレスのテーマの編集をクリック

テーマの「functions.php」をクリック

コードをコピペしてファイルを更新ボタンをクリック

するだけです。

これを実施することで「レンダリングを妨げるリソースの除外」の数値が半分以下まで減り、サイト表示速度がかなり改善されました。

XアクセラレーターをVer2に変更する

エックスサーバーを使っている場合、

➀Xアクセラレータ Ver.1

「静的ファイルの高速化+同時アクセス数の拡張」が実行されます。

➁Xアクセラレータ Ver.2

「静的ファイルの高速化+同時アクセス数の拡張」に加えて、PHPプログラムの高速化も実行されます。

僕のエックスサーバーの初期設定では、➀Xアクセラレータ Ver.1になっていました。

ですので、

エックスサーバーのサーバーパネルにログインする

高速化の項目の中にある

Xアクセラレータをクリックする

Xアクセラレータ設定をVer2にして、確認画面へ進む

変更を完了する

この流れで、PHPプログラムの高速化を実行しました。

mod_pagespeedをONにする

mod_pagespeedは、同種ファイルを圧縮して通信→通信数が削減され高速化するための機能です。

digiさんの書かれている記事、XSERVERでWordPressを始めたら、高速化設定は忘れずにしておこう!とっても簡単を参考にさせていただきました。

やることはシンプルで

エックスサーバーのサーバーパネルにログインする

高速化の項目の中にある

mod_pagespeed設定をクリックする

mod_pagespeed設定ONにする

変更を完了する

これで「Webサイトのコンテンツ最適化+表示速度の向上+転送量の軽減」が実行されました。

いろいろ試していたら、圧倒的な変化が起こりました!!

エックスサーバーの設定をいじっていたら、モバイルのサイト表示速度が「24%→84%」と大幅に改善されました。

自分でもびっくりしているんですが、今後様子を見ていきますね。

特に大幅に改善されたのは

インタラクティブになるまでの時間→3分の1まで改善(15秒から→5.6秒へ)

CPU の初回アイドル→2分の1まで改善(11秒から→5.1秒へ)

メインスレッド処理の最小化にかかる時間→4分の1まで改善(12秒から→3.2秒へ)

JavaScript の実行にかかる時間の低減→7分の1まで改善(11秒から→1.7秒へ)

2019/03/22/18:33追記ここから

と思っていたら、モバイルのサイト表示速度が36%までダウンしていました。

引き続き、様子を見ていきますね。

2019/03/22/18:33追記ここまで

EWWW Image Optimizerで画像を最適化する

画像ファイルのサイズが大きいと、サイトの表示速度が低下してしまいます。

ですので、画像ファイルを一括で簡単に圧縮していきましょう。

バズ部さんが書かれている記事、EWWW Image Optimizer の設定方法と使い方を参考にさせて頂きました。

WebPについては、瀬戸内ことりさんが書かれている、JPG・PNGを一気にWebP画像に置き換えてブログを高速化する簡単な方法を参考にさせて頂きました。

やることは、シンプルで

プラグイン「EWWW Image Optimizer」をインストールする

有効化する

ここで、ブログ上の画像をWebPに変換するために、作業を加えていきます

プラグイン「EWWW Image Optimizer」をクリックする

WebPの中にある、「JPG, PNG から WebP」にチェックを入れる

「変更を保存」をクリックする

メディア内にある一括最適化をクリック

画像の最適化をクリックする

画像がすべて最適化されて終了

WebP画像に変換するだけで、画質を落とさず4分の1サイズに変換できるようです。

そしてもう一つ

プラグイン「EWWW Image Optimizer」をクリックする

BASICの中にあるRemove metadataにチェックを入れる

変更を保存ボタンをクリックする

「Remove metadata」をチェックしておくだけで、画像ファイルと一緒にひっついてくる不要なメモを、自動的に取り除いてくれるので、さらに画像サイズが圧縮できます。

EWWW Image Optimizerの力

2019/03/25現在、EWWW Image Optimizerを導入した結果、約4200個の画像が最適化されました。

PageSpeed Insightsの検索結果は、34%→43%まで改善されました。

ですので、僕のブログの場合、ものすごく画像圧縮の効果が出ました。

サイト表示スピード改善策を実施するまでは、モバイルの表示が24%だったんですが、43%までスピードを改善することができました。

これからも、改善のために実施した結果を随時お伝えしていきます。

FFFTPを使って、関連記事を消す

注意

FFFTPの編集をするときは必ず、子テーマを作成してから、編集するようにしてください。

FFFTPを窓の社からダウンロードします。

ダウンロードしたら、

➀接続→ホストの設定→新規ホストをクリックする

➁ホストの設定名は、エックスサーバを使っているなら、エックスサーバーにしておく

➂サーバー名は、エックスサーバーのサーバーパネル→FTPアカウント設定→FTPソフト設定にFTPサーバー(ホスト)名があるのでコピペする

➃ユーザー名もコピペする

➄パスワードは、エックスサーバーのサーバーパネルのパスワードと同じものを打ち込む

最後に、OKをクリックする

この流れでFFFTPの設定完了です。

あとは、ワードプレスのストークであれば、ストークの子テーマを作っておいてください。

子テーマの導入方法は、こちらの方が書かれている記事が参考になります。

子テーマを作ったら、ストークのファイルから「parts_singlefoot.php」を子テーマにコピペします。

あらやんさんの書かれている、【STORK(ストーク)】関連記事を非表示にする方法を参考にさせていただきました。

FFFTPを開く

ブログのアドレス名がついたファイルをクリック

public_htmlをクリック

wp-contentをクリック

themesをクリック

jstorkをクリックし、parts_singlefoot.phpをパソコンのファイルにコピペする

jstork-customをクリックし、parts_singlefoot.phpをパソコンのファイルからjstork-customにコピペする

補足

コピペするときは、ストークのファイルからドラッグアンドドロップで、パソコン本体のフォルダ内に一度コピペして、子テーマにコピペする流れになります。

ワードプレスに戻り→外観→テーマの編集をクリック

jstork-customをクリックし、parts_singlefoot.phpをクリック

31行目辺りにある、以下の5行のコードを削除する

最後に、更新して完了。

<?php if(function_exists(‘related_posts’)): ?>
<?php related_posts(); ?>
<?php else :?>
<?php get_template_part( ‘related-entries’ ); ?>
<?php endif;?>

関連記事が表示されなくなっているのを、確認してください。

「前後の記事リンク」を消す

ブログの表示速度をさらに上げるため、あまり使われてない印象のある「前後の記事リンク」を消してしまいましょう。

やることは、シンプルでして

外観→カスタマイズ→追加CSSをクリック

以下のコードを追加するだけです。


.navigation {
display: none !important;

投稿記事上のSNSボタンを消す

【STORK】非表示カスタマイズの記事を参考にさせていただきました。

FFFTPを開く

ブログのアドレス名がついたファイルをクリック

public_htmlをクリック

wp-contentをクリック

themesをクリック

jstorkをクリックし、single.phpをパソコンのファイルにコピペする

jstork-customをクリックし、single.phpをパソコンのファイルからjstork-customにコピペする

ワードプレスに戻り→外観→テーマの編集をクリック

jstork-customをクリックし、single.phpをクリック

40行目以降にある、以下の3行のコードを削除する

最後に、更新して完了。

<?php if ( !get_option( ‘sns_options_hide’ ) ) : ?>
<?php get_template_part( ‘parts_sns_short’ ); ?>
<?php endif; ?>

まとめ

これだけ実施すれば、必ずモバイルでの読み込み速度が改善するはずです。

1つでもいいので、実際にやってみて下さい。

また、すぐには変化が合わられないかもしれません。

1か月後、2か月ごと、地道にチェックしていきましょう。

同時に、ブログ記事もしっかり継続して書き続けて下さい。

継続していけば、ブログのアクセス数はきっと増えていきます。

コメントを残す

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