あなたのWordPress/Simplicity2高速化 ナニかが抜けてないですか?

モバイルファーストが主流といっても過言ではない現在、
自分のサイトに訪れた方へ表示速度を少しでも早め、迅速に情報を届けることを怠るのは
閲覧者に対して不親切なことですよね。

さらに、サイトの表示速度はGoogleの検索順位にも影響があるようです。

表示速度が早いサイトは、クローラーが効率よく巡回できる=好印象
表示速度が遅いサイトは、クローラーの容量がたくさん消費される=悪影響

なので、検索順位にも関係しているということです。

Googleは、検索ランキングにサイトの表示速度を使うことを発表していますし、
内部調査によってサイト表示速度が遅い(重い)とユーザーが離脱してしまうことも公表しています。

サイトの表示速度についてGoogleが公式調査の上で発表されている結果は、


表示に3秒かかると…直帰率は32%Up
表示に5秒かかると…直帰率は90%Up
表示に7秒かかると…直帰率は113%Up
表示に10秒かかると…直帰率は123%Up

なのです!

あなたがいくら役に立つ情報を提供したとしても、
表示速度が遅ければSEOで不利になってしまうし、
訪問者はしびれを切らして他のサイトに行きます。

Googleや訪れた方に好かれるためにもサイト高速化を今すぐに始めましょう。

ここは
WordPress
サーバー Xserver
テーマ  Simplicity 2 を使用しています。

まずは診断を

はじめに行うべきは、自分のサイト内記事はどの程度なのかを確認すること。

どこがいけないのか知らなければ対策の仕様がありません。

ウェブサイトの読み込み速度を診断するためのサイトには、

Google PageSpeed Insights
Googleが提供する速度テストができるツール
表示時間に対するパフォーマンスをスコア化
(WordPressの場合は、テーマやCMS本体の機能によって修正が制限されてしまうところもあるらしい)

GTmetrix
Yahooのエンジニアがオープンソースで公開している〈YSlow〉と
〈Google〉両方で判定される
項目別にA~Fの6段階で表示

Pingdom Website Speed Test
パフォーマンスグレード・ロード時間・ページサイズ・リクエストの計測結果を表示

etc…

このてのモノはURⅬを貼り付ければ測定が始まり、
ページの読み込み速度を短くするための改善方法を提示してくれます。

また、外国産のモノが多いので利用する際には、Google Chorome の
翻訳ツールバーで日本語表記にして(言い回しが?な場合もありますが)
改善の指摘があった箇所を確認する使い方いいでしょう。

ある記事をGTmetrixで診断した結果は、

左から説明すると、

PageSpeed Score Googleの評価
YSlow Score YSlowの評価
Fully Loaded Time サイトの読み込み速度の目安時間
Total Page Size 画像・html・css等を含むサイト内の全データ量
Requests サーバーからブラウザへのリクエスト回数

あなたも診断してみてGTmetrixのスピードランクがF・E・Dランクだった場合には要改善。

何が原因?

こちらをご覧ください。

これは診断結果の詳細を足した画像ですが、
赤線で囲ったところがダントツの『F』評価!!

上の囲み〔Optimize images〕は
画像のサイズを適切なサイズにしてアップロードし、
サイトの表示速度を速くすべきである
 というモノ。

下の囲み〔Minimize redirects〕は
リダイレクトすることはHTTPリクエストの増加なので、
HTTPリクエストを減らしてサイト表示速度をアップして
 というモノ。

さっそく対策を講じるべくググっては読み、ググっては読みを繰り返していると、

画像を遅延読込みすれば表示が速くなる との説明が。

その方法は

a3 Lazy Load

BJ Lazy Load

などのプラグイン。

ですが、よくよく調べたらシンプリシティ2にはLazy Loadが実装されていました。

ならばと、ワードプレスのダッシュボードから外観⇒カスタマイズ⇒画像でLazy Loadを有効。

次によく目にしたのは、.htaccessファイルの修正で、

既存の.htaccessファイルを必ずバックアップ保存してから
Simplicity公式サイトで推奨されているコードを最終行の後に追記するだけ
』の手順。

これは
コピペ一発でSimplicityを結構高速化する方法
を参考にしてください。

で、〔Minimize redirects〕の処置。

HTML、Java script、CSSのの改善をプログラムも知らずに手を出すとミスる可能性が高いです。

そこで、HTML、Java script、CSSの最適化(縮小)を自動的にやってくれる
Autoptimize

というプラグインをとりあえず使ってみました。

設定等は ワープレ屋
【WordPress Plugin】AutoptimizeでHTMLやCSS、JSを圧縮する!設定方法と使い方
を参考にしてください。

並行して上から3番目の〔Minimize request size〕の対処も調べていました。

指摘の項目をクリックしてリンクをたどり調査してみると、
サイドバーに表示される某アフィリエイトサイトの広告が原因でした。
即刻、削除いたしましたよ。

ココまでの間に、いろんなところを渡り歩いていると

遅いのはプラグイン

との記事も。

そこで、仕切り直して調べていくうちに当たったのは、

Plugin Load Filter

でした。

これは、プラグインを管理するプラグインで、
インストールしてもサイトが重くなることもなく、とても扱いやすい。

特徴は、
このプラグインはこの記事で、この固定ページにはコレを、と
選択できるようになります。

通常のままだと、プラグインを必要としないページでも有効にしていれば
全てのページに導入したプラグインの効果が出てしまい、
その数が多ければ多いほど読み込みファイルが増えて重たくなります。

WordPressのプラグインは便利ですが、
各種CSS、JSファイルなどを大量に読み込むものがあり、
その数が多いほど、ページ速度が遅くなります。

ですから不要なプラグインは停止ではなく削除しましょう。

私はこの機会でちっとも使っていないプラグインを削除しました。

インストール後の設定画面がこちら。

軽く説明すると、Page Typeフィルタにある左の赤枠は、

Admin Page
画像圧縮やバックアップ機能、クイックタグなどのプラグイン

右の赤枠は、

Page Type
サイトマップページのみ、お問い合わせページだけ、等のプラグイン

をそれぞれに選択してください となっています。

ちなみに、Page Typeを選択したプラグインは、
下の画像の様に各ページで必要なプラグインを使用するかの設定ができます。

有効にしているプラグインや、どの場面で何を使うかも人それぞれなので、
設定に関しては、あなたなりの設定を行ってください。

詳しい設定方法は
HN : フク郎さんのFukuro Press
WordPressの「遅い」を解決!特定ページでだけプラグインを読み込む方法

で説明されています。

次のハードルは画像

そして、ここまでの対策結果がこちら。

数字は上がりましたが、赤枠のF判定が〔Optimize images〕に。

これは、
画像のサイズを最適化してサイトの表示速度を速くして という項目。

あなたがもし、大きな画像をアップロードしていたら
できるだけ適切なサイズにリサイズしてアップロードするようにしましょう。

表示速度を低下させているのはアップロードした画像が犯人とも考えられます。

スマホやデジカメで撮った写真は基本的に大きいサイズとなっていますし、
スクショをアップするにしても、画像を表示サイズと同じ大きさにリサイズせずに
そのままでは読み込み速度が落ちます。

私はこれまで、ブログ記事等の画像には、

トリミングや加工は画像編集ソフト
https://photoscape.softonic.jp/Photoscape

指定した横幅に画像を一括縮小できる
フリーソフト100
EasyPictureResizer2.5

さらに圧縮はMedia4x
PNG 圧縮

(いずれも無料♡)
を駆使して負荷の軽減を試みてはいました。

表示速度はとても大事です…が、

結果を受けてスピードランクを『』にするために画像を無くしたりしたら
記事が訪問者の興味をひく事に欠ける仕上りになってしまいかねません。

けれども、画像を添付しつつ限りなく最高ランクに近づけたい

ならば、最善の努力はしなければなりませんよね。

さっそく詳細を見るべく項目をクリックして初めてあることに気づいたのです。

囲みの中身は、壁紙でした。

ヘッダーは看板、壁紙は雰囲気をかもし出すアクセント。

それに集中しすぎてヘッダー画像と壁紙の軽減を忘れていました。

慌てて前出のMedia4xで圧縮をかけて貼り直し。

更なる高みを目指し、ググってみると、

EWWW Image Optimizer

なるものが。

これは、
画像をアップするたびに自動でファイルサイズを圧縮し、
既存の画像も一括でファイルサイズの最適化をします
』というモノ。

Plugin Load Filterもあることだし…とインストール。

設定は、Basicの、

ここ にチェックが入っているを確認してください。
この設定は、画像に不要なテキストファイルが付いている場合、
自動的に削除してファイルのサイズを削減してくれます。

次にConvertを押し、

ココ にチェック。
この設定は、拡張子が自動的に変換され画質が低下する可能性を無効にしてくれます。

次に既存の画像を一括最適化。

ダッシュボードからメディア ⇒ 一括最適化をクリックして、

最適化されていない画像をスキャンする を選択。

スキャン終了後に 最適化を開始 をクリック。

これで今までの画像ファイル最適化はOK。

残すはキャッシュ

そして、2番目の項目で『D』判定の〔Leverage browser caching〕の対処。
これは
サイトの表示を速くするためにブラウザのキャッシュを活用してみて
というアドバイス。

《キャッシュ》とは、
WEBページを表示した時に、ページで使われている画像やHTMLファイルなどのデータを
一時的にあなたのパソコンが記憶する仕組みです。

これによって再訪問した際に、記憶させたデータ(キャッシュ)がパソコンに存在している場合
サーバから再度データをダウンロードするのではなく、既に保存されているデータが優先的に使用されるので、はじめに訪れた時よりもデータが減って素早く表示されます。

Xserverでは
ブラウザキャッシュ設定
が出来ます。

サーバーパネルにログイン。

続いて、右下辺りにある≪高速化≫メニュー内の[ブラウザキャッシュ設定]をクリック。

設定したいドメインの[選択する]をクリック。

ここで、現在の設定が⦅OFF⦆になっていたら、
変更後の設定を[ON(全ての静的ファイル)※推奨設定]にして、
[変更]ボタンをクリック。

ページを戻し⦅反映待ち⦆というマークが出ていれば15分程度待ちましょう。

再確認の際にサーバー側の処理が終わっていれば⦅反映待ち⦆が消えていて、
これが完了のサインです。

キャッシュ系プラグイン

WordPress高速化のキャッシュ系プラグインには、
W3 Total CacheWP Super CacheWP Fastest Cache
などがあり、大きく改善が見込めるらしい。

が、

Simplicityはこれらのキャッシュ系プラグインと相性が悪い
という実装してみた方の記事も多くありました。

その内容は、

スマホなのにPCのレイアウトに表示崩れを起こす
人気記事集計プラグインとの相性が悪い
アンインストール(削除)後に管理画面が真っ白になる

など。

日本語対応で設定もやさしいWP Fastest CasheはSimplicityと相性がいいが、
無料版ではモバイルではキャッシュが生成されないとの事。

適切な設定を行えば問題ないのかも知れませんが…

キャッシュ系プラグインは高速化に効果があるが、
上手く扱わないと自分の首を絞めるかも知れない。

そう考えた私は導入を見送りました。

で、診断結果は…

』判定には届いてませんが、いい値です。

やはり、まだキャッシュがネックみたいですね。

おわりに

いかがでしたでしょうか。

この記事で挙げたモノ以外でも

サイドバーにアクセス数で集計された人気記事を実装できるプラグイン
WordPress Popular Posts
入れている方は設定を見直したり、別のプラグインに変えてみたり、

TwitterのTLやFacebookページ、広告のASP表示を特定のページに限定する

リビジョン(記事内容の更新履歴)を必要以上に溜めず消去する 等の

対処法もありますから、診断サイトの項目を調べて一つ一つ潰していってみましょう。

以上、
【あなたのWordPress/Simplicity2高速化 ナニかが抜けてないですか?】
でした。

special thanks to
WordPressあれこれワープレ屋       Fukuro Press
https://worpreya.com/          https://fukuro-press.com/