モバイルだけが、やたら遅い！
CocoonからSWELLへWordPressテーマ変更するも、サイトスピードの遅さに愕然！
前回のプラグインとの戦いからわずか数日。
新たな敵はサイトスピードだった！
一体原因はなんなのか？果たして無事に解決はできたのか？
WordPress初心者のテーマ乗り換え奮闘記第4弾！最終話「サイトスピード編」をお届けします。
改善策を調べ、それに向けてどんな作業をしたのか？
その経緯と方法を詳しくお話します。
WordPressテーマの乗り換えを考えている方、サイトスピードに悩んでいる方、ぜひ参考にご覧ください。
この記事は、以下の方に向いています。
●SWELLに興味がある方
●CocoonからSWELLへテーマの乗り換えを考えている方
●サーバーはConoHa WINGをご利用の方
●WordPress初心者の方
この記事は、自身の体験を元に作成しております。
動作保証をするものではございません。
実施の際は、自己責任となりますのであらかじめご了承くださいませ。
モバイルだけ異常に遅い！
aki遅い！！！！
kumo-Gん？
宅配ピザの配達でも遅れとんのか？
akiそうね。
なるはやで届けてもらえると、できたて熱々でうれしいね。
ってちっがーう！！
kumo-Gん？どいうことじゃ？
akiいやね、サイトスピードが･･･
特にモバイルだけが異常に遅いんだわ！
PageSpeed Insightsを使って調べたら･･･
PC：86 モバイル：32って･･･。
kumo-Gほぉー･･･。で、なんで？
akiそれを今から調べるんじゃ！！
このままでは･･･。
ユーザビリティがヤバイ！
kumo-G良い結果になるとええのぉ。
まっ頑張れ労働者。
akiやってやる！
数時間後･･･
akiうっひょー！！
kumo-Gん？どした？
宝くじでも当たったか？
akiうむ。
それは望んでいることだけれども！
ちがう！ちがう！そうじゃない！
上がった！！！
サイトスピード爆上がり！！！
kumo-Gおぉぉぉ！！
それはスゴイッ！！
で、どうやって改善したんじゃ？
akiGoogle先生の力を借り、ネットて調べまくったことをまとめ、いろいろやってみたぞと。
kumo-Gほぉ。
じゃ、その改善策とやらを暇つぶしにGにも聞かせろ。
akiOK！
・画像の圧縮とWordPressメディアの整理
・プラグインの削除
・SWELLデザインの見直し
・SWELLテーマの高速化設定
・サーバーの高速化設定
画像の圧縮とメディアの整理
①既にサイトに上げている画像の中で、まだ大きいと思われる画像をTinyPNGを使って再圧縮。
②一部PNGになっていた画像をJPEGに変換後、再圧縮。
③WordPressメディアの中にある、不要な画像を削除。
すでにサイトにあげている画像を一括で圧縮するプラグインもありますが、不具合が起きる可能性があります。
筆者も、利用者が多い「EWWW Image Optimize」を使ってみましたが、一括で圧縮はできたものの、その後WordPress管理画面に入れなくなったという経験をしています。
ちなみに、SWELL公式サイトでも、EWWW Image Optimizerは推奨されていません。
ご利用の環境にもよりますが、使用の際は注意してください。
プラグインの削除
不必要なプラグインや不具合起こしたプラグインを削除。
SWELLのデザインを見直し
aki①フォントを「ヒラギノゴシック＞メイリオ」に変更
※游ゴシックでもOKだわさ！
aki②記事スライダーを「設置しない」に変更
aki③メインビジュアルに使う画像を再圧縮。
【PC】1280×980へサイズを縮小して圧縮。
【モバイル】900×500へサイズを縮小して圧縮。
SWELLの高速化設定
akiつづいて、SWELLの高速化設定をやっていくよぉ！
※今回の例は、あくまで基本的なパターンです。
基本で設定後、ご利用のサイトの動きに合わせて、各項目の設定変更が必要になる可能性もあります。
ブログカードのキャッシュ期間は30日。
赤丸で囲んである部分に必ずチェックを入れる
追加したいスクリプトのキーワードを入力する。
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,
※この秒数は、自身のサイトに合わせてお好みで設定してください。
「SWELLのCSSをインラインで読み込む」にチェック
「Prefetch」にチェック
この時点で、サイトスピードは劇的に改善しました！
特にスクリプトの遅延読み込みで、いくつかのスクリプトを追加したことが大きな改善につながったようです。
kumo-Gスゴイ！
aki恐るべし！
SWELL高速化設定！
サーバー側の高速化設定
aki今回はConoHa WINGの高速設定方法を例に説明するね。
コンテンツキャッシュの設定 👇
ブラウザキャッシュの設定 👇
akiこれでサーバー側の設定完了！
ConoHa WING には、さらに高速化できる、「 WEXAL」というサービスがあります。
「WEXAL® Page Speed Technology®」とは プライム・ストラテジー社が提供する、webシステムのための高速化エンジンのこと。
当サイトの場合、今の状態でページスピードが上がったんで、サーバー側の設定は コンテンツとブラウザキャッシュの設定のままです。
WEXALはAIが自動で最適化するから、ページ表示が崩れる可能性があるみたいなので、もう少し様子を見て、機会があったら使ってみようと思ってます。
改善した結果、サイトスピードはどこまで上がった？
kumo-G改善した結果は？
aki結果はこんな感じ 👇
86⇒97
32⇒95
kumo-Gおおおぉぉ！これはスゴイのぉ！
akiいやぁ、頑張ってよかった！
これで少し安心だぁ♪
ただ、こだわりすぎると「沼」にハマる可能性大！！
平均70~80以上キープできればOKじゃないかと思うぞと。
kumo-G大事なことじゃが、ほどほどにな。
まとめ
今回はCocoonからSWLLにWordPressテーマを乗り換えた後、下がったサイトスピードを改善した方法と体験談をお話しました。
●画像投稿する前に、サイズの見直しや圧縮は重要。
（大きいサイズのまま、画像のアップロードは好ましくない）
●どんなにおしゃれにしたくても、サイトが重くなる機能の使用は避ける
●不要な画像、プラグインはさっさと断捨離
●テーマにそった高速化設定をしてみる
●サーバーの高速化をやってみる
akiテーマを乗り換えてから3週間、地道な修正やら、プラグインとの格闘やら数々の困難がありました。
だが、しかし！
無事に乗り換え完了し、まずは一安心といったところでさぁ。
kumo-G大変のようじゃったが、良い勉強になったろう？
akiうむ。それは間違いない！
きっと、これから長い付き合いになるであろうWordPress。
いろんな壁が出てくるだろうけれども、それを楽しめるくらいになりたいなと思うぞい！
kumo-Gうむ。
良い心がけじゃて。
ホホホ･･･。
akiということで、WordPressテーマお引越し奮闘記は今回で完結！
また、WordPress関連でおもしろい体験談があれば、ご紹介したいと思います。
そのときは、ぜひ遊びに来てくださいね。
kumo-G待っとるぞぉ~
それでは今回はこのへんで！
最後までご覧いただきありがとうございました。
kumo-Gakiよ
akiん？
kumo-Gおぬし、納品の締め切り明日じゃが･･･。
大丈夫なんかえ？
akiぐはっ！
WordPressランキング
コメント