WordPressテーマ乗り換え奮闘記 サイトスピード編

サムネ サイトスピート編画像

モバイルだけが、やたら遅い!

CocoonからSWELLへWordPressテーマ変更するも、サイトスピードの遅さに愕然!

前回のプラグインとの戦いからわずか数日。

新たな敵はサイトスピードだった!

一体原因はなんなのか?果たして無事に解決はできたのか?

WordPress初心者のテーマ乗り換え奮闘記第4弾!最終話「サイトスピード編」をお届けします。

改善策を調べ、それに向けてどんな作業をしたのか?

その経緯と方法を詳しくお話します。

WordPressテーマの乗り換えを考えている方、サイトスピードに悩んでいる方、ぜひ参考にご覧ください。

この記事は、以下の方に向いています。

●SWELLに興味がある方
●CocoonからSWELLへテーマの乗り換えを考えている方
●サーバーはConoHa WINGをご利用の方
●WordPress初心者の方

この記事は、自身の体験を元に作成しております。

動作保証をするものではございません。

実施の際は、自己責任となりますのであらかじめご了承くださいませ。

もくじ

モバイルだけ異常に遅い!

sora

遅い!!!!

kumo-G

ん?

宅配ピザの配達でも遅れとんのか?

sora

そうね。

なるはやで届けてもらえると、できたて熱々でうれしいね。

ってちっがーう!!

kumo-G

ん?どいうことじゃ?

sora

いやね、サイトスピードが・・・

特にモバイルだけが異常に遅いんだわ!

PageSpeed Insightsを使って調べたら・・・

PC:86 モバイル:32って・・・。

kumo-G

ほぉー・・・。で、なんで?

sora

それを今から調べるんじゃ!!

このままでは・・・。

ユーザビリティがヤバイ!

kumo-G

良い結果になるとええのぉ。

まっ頑張れ労働者。

sora

やってやる!

数時間後・・・

sora

うっひょー!!

kumo-G

ん?どした?

宝くじでも当たったか?

sora

うむ。

それは望んでいることだけれども!

ちがう!ちがう!そうじゃない!

上がった!!!

サイトスピード爆上がり!!!

kumo-G

おぉぉぉ!!

それはスゴイッ!!

で、どうやって改善したんじゃ?

sora

Google先生の力を借り、ネットて調べまくったことをまとめ、いろいろやってみたぞと。

kumo-G

ほぉ。

じゃ、その改善策とやらを暇つぶしにGにも聞かせろ。

sora

OK!

今回試した改善策はこんな感じ

・画像の圧縮とWordPressメディアの整理

・プラグインの削除

・SWELLデザインの見直し

・SWELLテーマの高速化設定

・サーバーの高速化設定

画像の圧縮とメディアの整理

①既にサイトに上げている画像の中で、まだ大きいと思われる画像をTinyPNGを使って再圧縮。

②一部PNGになっていた画像をJPEGに変換後、再圧縮。

③WordPressメディアの中にある、不要な画像を削除。

すでにサイトにあげている画像を一括で圧縮するプラグインもありますが、不具合が起きる可能性があります。

筆者も、利用者が多い「EWWW Image Optimize」を使ってみましたが、一括で圧縮はできたものの、その後WordPress管理画面に入れなくなったという経験をしています。

ちなみに、SWELL公式サイトでも、EWWW Image Optimizerは推奨されていません。

ご利用の環境にもよりますが、使用の際は注意してください。

参考記事:WordPressテーマ乗り換え奮闘記 プラグイン編

プラグインの削除

不必要なプラグインや不具合起こしたプラグインを削除。

SWELLのデザインを見直し

sora

①フォントを「ヒラギノゴシック>メイリオ」に変更

※游ゴシックでもOKだわさ!

STEP
WordPress管理画面⇒外観
STEP
カスタマイズ
STEP
サイト全体の設定
STEP
基本デザイン
STEP
フォント設定
STEP
ベースとなるフォント設定
sora

②記事スライダーを「設置しない」に変更

STEP
WordPress管理画面⇒外観
STEP
カスタマイズ
STEP
トップページ
STEP
記事スライダー
STEP
記事スライダーを設置するかどうか
sora

③メインビジュアルに使う画像を再圧縮。

【PC】1280×980へサイズを縮小して圧縮。

【モバイル】900×500へサイズを縮小して圧縮。

STEP
WordPress管理画面⇒外観
STEP
カスタマイズ
STEP
トップページ
STEP
メインビジュアル
STEP
各スライドの設定

SWELLの高速化設定

sora

つづいて、SWELLの高速化設定をやっていくよぉ!

※今回の例は、あくまで基本的なパターンです。

基本で設定後、ご利用のサイトの動きに合わせて、各項目の設定変更が必要になる可能性もあります。

STEP
WordPress管理画面⇒SWELL設定⇒高速化⇒キャッシュ機能すべてにチェック。

ブログカードのキャッシュ期間は30日。

STEP
遅延読み込みの機能(ここ重要!)

 赤丸で囲んである部分に必ずチェックを入れる

SWELL高速設定遅延読み込み機能
STEP
スクリプトの遅延読み込み

追加したいスクリプトのキーワードを入力する。

SWELL高速化設定遅延読み込み対象にするスクリプトキーワード
当サイトに設定しているスクリプトキーワード

twitter.com/widgets.js,

instagram.com/embed.js,

connect.facebook.net,

assets.pinterest.com,

googletagmanager.com/gtag/js,

gtag(,

adsbygoogle.js,

clipboard.min.js,

set_urlcopy.min.js,

luminous.min.js,

set_luminous.min.js,

rellax.min.js,

set_rellax.min.js,

prism.js,

hcb_script.js,

pochipp/dist/js/update.js,

recaptcha__ja.js,

jquery.min.js?ver=3.6.0,

STEP
遅延させる秒数は「5秒」に設定

※この秒数は、自身のサイトに合わせてお好みで設定してください。

STEP
ファイルの読み込み

「SWELLのCSSをインラインで読み込む」にチェック

SWELL高速化設定遅延読み込み機能
STEP
ページ遷移高速化

「Prefetch」にチェック

SWELL高速化設定ページ遷移高速化
STEP
「変更を保存」を押してSWELL側の高速設定完了!

 

この時点で、サイトスピードは劇的に改善しました!

モバイル:32⇒88 PC:86⇒95 

特にスクリプトの遅延読み込みで、いくつかのスクリプトを追加したことが大きな改善につながったようです。

kumo-G

スゴイ!

sora

恐るべし!

SWELL高速化設定!

サーバー側の高速化設定

sora

今回はConoHa WINGの高速設定方法を例に説明するね。

コンテンツキャッシュの設定 👇

ConoHa WING高速化コンテンツキャッシュ手順参考画像
STEP
サイト管理
STEP
高速化
STEP
キャッシュ
STEP
コンテンツキャッシュ
STEP
ON(すべてのコンテンツ)を選択
STEP
保存をクリック

ブラウザキャッシュの設定 👇

ConoHa WING高速化ブラウザキャッシュ手順参考画像
STEP
ブラウザキャッシュ
STEP
「ON」をクリック
sora

これでサーバー側の設定完了!

ConoHa WING には、さらに高速化できる、「 WEXAL」というサービスがあります。

「WEXAL® Page Speed Technology®」とは プライム・ストラテジー社が提供する、webシステムのための高速化エンジンのこと。

当サイトの場合、今の状態でページスピードが上がったんで、サーバー側の設定は コンテンツとブラウザキャッシュの設定のままです。

WEXALはAIが自動で最適化するから、ページ表示が崩れる可能性があるみたいなので、もう少し様子を見て、機会があったら使ってみようと思ってます。

最安級・超安定で初期費用無料!ドメイン2つ永久無料!ConoHa WING

改善した結果、サイトスピードはどこまで上がった?

kumo-G

改善した結果は?

sora

結果はこんな感じ 👇

PC

86⇒97

PageSpeed Insights PC側サイトスピード計測画像
モバイル

32⇒95

PageSpeed Insights モバイル側サイトスピード計測画像
kumo-G

おおおぉぉ!これはスゴイのぉ!

sora

いやぁ、頑張ってよかった!

これで少し安心だぁ♪

ただ、こだわりすぎると「沼」にハマる可能性大!!

平均70~80以上キープできればOKじゃないかと思うぞと。

kumo-G

大事なことじゃが、ほどほどにな。

まとめ

今回はCocoonからSWLLにWordPressテーマを乗り換えた後、下がったサイトスピードを改善した方法と体験談をお話しました。

結論!

●画像投稿する前に、サイズの見直しや圧縮は重要。

(大きいサイズのまま、画像のアップロードは好ましくない)

●どんなにおしゃれにしたくても、サイトが重くなる機能の使用は避ける

●不要な画像、プラグインはさっさと断捨離

●テーマにそった高速化設定をしてみる

●サーバーの高速化をやってみる

sora

テーマを乗り換えてから3週間、地道な修正やら、プラグインとの格闘やら数々の困難がありました。

だが、しかし!

無事に乗り換え完了し、まずは一安心といったところでさぁ。

kumo-G

大変のようじゃったが、良い勉強になったろう?

sora

うむ。それは間違いない!

きっと、これから長い付き合いになるであろうWordPress。

いろんな壁が出てくるだろうけれども、それを楽しめるくらいになりたいなと思うぞい!

kumo-G

うむ。

良い心がけじゃて。

ホホホ・・・。

sora

ということで、WordPressテーマお引越し奮闘記は今回で完結!

また、WordPress関連でおもしろい体験談があれば、ご紹介したいと思います。

そのときは、ぜひ遊びに来てくださいね。

kumo-G

待っとるぞぉ~

それでは今回はこのへんで!

最後までご覧いただきありがとうございました。

kumo-G

soraよ

sora

ん?

kumo-G

おぬし、納品の締め切り明日じゃが・・・。

大丈夫なんかえ?

sora

ぐはっ!


WordPressランキング
サムネ サイトスピート編画像

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

もくじ