うわっ...私のサイト、遅すぎ...?wordpressサイトの表示速度の改善を試してみた。【速度スコアの変化を検証】|最果てデザイナーの今更はじめるライフスタイルデザインWebデザイン・ブログ作成うわっ...私のサイト、遅すぎ...?wordpressサイトの表示速度の改善を試してみた。2019年1月23日スポンサーリンクこがねさん今日は、ブログの表示速度を調べてみるゾ。このブログの表示速度のスコアを教えて!AIソルトくんこのブログの表示速度のスコアは、、パソコンが70モバイルが8です。こがねさんうわっ...私のサイト、遅すぎ...?ウェブサイトの表示速度。これまでそこまで気にした事はなかったのですが、ふとした時に、自分のブログのスピードを調べてみました。その結果、スマホの表示速度が圧倒的に重いという事が判明。「スマホで見た時に何か遅いなぁ。お昼時には全然繋がらない。実際の遅すぎる数値を目の当たりにして、あれ、これめっちゃ損してるかも?という事に気づきました。巷にあふれているwordpressサイトの表示速度の改善方法。備忘録として記事にしています。Insightsdでこのブログの表示速度を調べてみたところ、パソコンでの表示速度スコアは70と平均のスコアが出ていました。速度スコア「8」でした。...想像以上に遅い。このブログの設定環境は、ワードプレステーマ:JINサーバー:Xserverを使用してWorPressブログを作成しています。ちなみに、JINで作成されているであろうサイトの速度も色々見てみましたが、モバイルでも平均程の速度は出ていました。本家JINのマニュアルサイトは超高速です。自分のモバイルサイトだけなぜか異常に遅い。激遅だったモバイルでの表示速度を速度スコア「20」までアップさせる事ができました。遅く改善の余地はありますが、なんとか倍以上にスピードを上げる事ができています。Webサイトの表示速度が遅いと何がダメなの?こがねさんWebサイトの表示スピード、特にモバイルでのスコアが凄く悪いのは分かったけど。・離脱率が上がる・滞在時間が下がる・SEOの評価も悪影響が出ると何一ついい事がないよ。それが原因で、閲覧数も下がるし、もちろん広告のクリックも減るから収入も増えないし、むしろ減っちゃってるかも。こがねさんそうなんだ。何とかする方法を教えテ!離脱率、滞在時間に悪影響が出る離脱とはサイト閲覧者が、サイトを離れてしまう事。ボクも心当たりがありますが、ウェブサイトを見にいってなかなか表示されないと、サイトを見る事をやめてしまいますよね?この様に、サイトの表示スピードが遅いと離脱を促してしまいます。必然的に閲覧者の滞在時間も下がってしまいます。不要な離脱を減らし、閲覧者の滞在時間を伸ばせる事が期待できます。SEO、検索順位の評価も下がる可能性があるウェブサイトの表示速度は、SEO(検索エンジン最適化)にも影響があるとされています。必要以上に読み込みの重いサイトは、検索順位も下がってしまいかねません。表示速度を速くできると検索順位が上がり、よりアクセスがとれるサイトに出来る可能性があります。広告をクリックされる可能性も下がってしまいます。SEOにも悪い影響を及ぼしている可能性もあるので、ページビュー数も下げている原因になっているかもしれません。表示速度を改善する事で、今まで無駄に取りこぼしていた収益やページビュー数を劇的に改善できる可能性を秘めています。簡単に調べる事ができるよ。Insightsにアクセスします。検索窓に調べたいWebサイトのURLを入力します。簡単にウェブサイトの表示速度の詳細を確認する事ができます。・WordPressのプラグインのインストール、設定のチェック・サーバーの設定のチェック・WordPressテーマの設定のチェックかな。ワードプレスを高速化する為のプラグインを見直してみよう!こがねさんプラグイン、最初に色々入れてみたけど、ほったらかしだなぁ。Loadのインストール状況と、設定をチェックしてみました。画像を圧縮する事でウェブサイトを表示の負荷を下げ、表示速度を上げる事が出来るワードプレスのプラグインです。このブログの導入状況を調べてみると、プラグインはインストールし、有効化していました。念の為もう一度一括での画像圧縮を実行してみました。Autoptimize次に、Autoptimizeをチェック。Autoptimizeは、HTML、CSS、JavaScriptなどのウェブサイトを構築しているコードを圧縮して表示速度を上げる事が出来るというプラグイン。こちらもきちんとインストール済でした。念の為、設定を再度チェック。画面のスクロールに合わせて画像を読み込んでくれるというプラグインです。画像の表示スピードを上げてくれます。こちらもインストール済でした。結果は、、速度スコアに変化なし調べると色々出てくる、ワードプレスサイト高速化の為のプラグイン。一応一通りきちんとインストールされていて、有効化されていました。残念ながら、この作業での速度スコアの変化はありませんでした。AIソルトくん次は、サーバーの設定を見直してみようか。Xserverにはサイトを高速化するXアクセラレーターっていう設定があるよ。こがねさんXアクセラレーターか。以前記事で書いた事もある、エックスサーバーのサイト高速化機能、XserverのXアクセラレータの設定を見直してみました。速度チェック時にはきちんと稼働していました。Xアクセラレータには「静的ファイル」のみに実行する「全ファイル」に実行するの2種類の設定があります。速度スコアに変化なしという結果になりました。5分でできる!エックスサーバーのXアクセラレータの設定をチェックしてみよう。3ステップでウェブサイトを高速化!新しくリリースされた、XsarverのXアクセラレータの設定方法を簡単、分かりやすい様に解説しています。ウェブサイトを高速化することでアクセスアップ、コンバーション・転換率・成約率の向上を期待できます。やってみて絶対損は無いので、まだ設定できていない方は是非やってみて下さい。AIソルトくん最後にWordPressのテーマの詳細設定を見直してみよう。こがねさんこれが最後。なんとか速度上がっておくれ!ウェブサイトの読み込みの速度に影響している可能性のあるテーマの設定アニメーション機能フォントの設定2つの設定を変更してみました。ワードプレステーマ「JIN」での設定の場所まず、外観→カスタマイズをクリック。サイト基本設定をクリック。アニメーション機能のON/OFFの設定、フォント選択の設定の場所にたどり着きました。アニメーション機能をOFFにしてみるウェブサイトを表示させる時に、スタイリッシュにフワっと動いたりするアニメーション機能。オシャレで今風のサイトに見せる事ができますが、これが結構表示速度に負荷をかけている場合があります。表示速度を改善する為、思い切ってOFFに。なんで?逆にサイトの表示スピードがなぜか落ちてしまいました。ワードプレステーマJINに関しては、アニメーション表示による負荷はかなり軽減されている様で、アニメーション機能はONのままでいいかもしれません。フォント設定を角丸ゴシックからデフォルトに変更してみるフォントの設定は、サイトをデザイン的な観点から見ると、どの端末で見てもある程度狙ったフォントで表示させる事で、フォントに個性をもたせてオシャレに、見やすく統一感を出し、さらに読み易くするというメリットがあります。実は案外サイトの表示に負荷を掛けている原因だったりします。表示速度が上がるという効果を得る事が期待できます。設定を「角丸ゴシック」→「デフォルト」に変更してみました。結果は、、、なんと、ここに来てようやくスピード改善の片鱗を得る事ができました!速度スコア「11」フォント設定って想像以上に表示スピードに影響を与えているんですね。ウインドウズ系の端末だと、どうしてもカクカクしていてモッサリして読みにくく個人的にはあまり好きではありません。読みやすさ、デザインの統一感を出す為に独自設定のフォントを使いたいところです。このブログの現在の遅すぎるモバイルでの表示速度を考えると、とりあえずデフォルトフォントでサイトを表示させた方がいい様です。Cache」を導入してみるこがねさんフォントの設定を見直す事でなんとか少しモバイルの表示速度を改善できた!ただ、まだまだ遅すぎるし、せめてもう少し早くできる方法は何かないかな?AIソルトくんんー。Cache」っていうプラグインを導入してみようか。静的HTMLファイルを生成するプラグインです。表示に時間のかかるPHPスクリプトを処理する代わりにHTMLファイル生成する事で表示速度を上げてくれるというプラグインです。動的??PHP??静的??HTML??と、少し玄人感のあるプラグインです。「HTML」と「PHP」は、ウェブサイトをウェブサイトとして表示させる為に使われている言語です。表示に時間がかかります。PHPで構成されたウェブサイトは、クリック→PHP読み込み→データベースから情報を取得→PHP書き出し→表示という動作を毎回しているからです。Cache」は、上記の一連の動作から最終的に表示されたページを覚えておく(そのページを自動生成しておく)事で、クリック→HTML読み込み→表示と、毎回している動作を省略させる事で表示を高速化させる仕組みです。前回の表示されたページを覚えてしまっているので、ブログを修正や更新した際は、その覚えてしまっているページを削除してあげる必要が出てきます。使用を避けてきたプラグインでした。修正できる自信はありません。今回を期に、思い切って導入してみる事にしました。結果は、、、なんと大きくスピードアップ!速度スコア「20」まで、モバイルでの表示速度を改善する事ができました。まとめこがねさん今回の検証で、速度スコア「8」と激遅だったモバイルでの表示速度を速度スコア「20」まで上げる事ができた!よかったよかった。AIソルトくんまだまだ遅いのは遅いから、改善の方法は今後も模索していかないといけないね。「結構遅い」くらいまでは改善する事ができました。WordPressサイトのモバイルでの表示速度が重すぎる、、という悩みに効果的だった方法は、ブログの設定フォントを「端末デフォルト」の表示に変更する。Cache」を導入するの2つががボクのサイトでは効果を発揮しました。表示崩れや不具合等のトラブルが起きやすいので、バックアップはくれぐれも忘れずにとっておいてから試して下さい。今回色々試してみましたが、それでもまだまだモバイルでの表示スピードは遅いです。サイトの表示スピードを改善する方法が見い出せたら記事を更新していきたいと思います。参考にしてみて下さい。Macの重い動きを改善してみせます。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどMacのターミナルの使い方。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなど【体験談】2週間で国家試験合格。ITパスポートのオススメ勉強方法。最果てデザイナーの今更はじめるライフスタイルデザインライフハックやらなきゃ絶対損。最果てデザイナーの今更はじめるライフスタイルデザインデザイン・プログラミングなどGit入門。何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】2019年12月7日たった5分でHTMLコーディング速度を爆上げ。emmet記法の使い方。2019年11月10日MacでSassがエラーでインストールでできない問題を解決した話【一瞬で解決するかも】2019年11月9日CSS記述を高速化して時間に激務にゆとりを。【簡単】アフィリエイトで稼ぐ!広告提供おすすめASPサイト5選。おすすめ記事いらすとやさんの闇深い系おもしろ画像のまとめtwitterでよく見る強調の囲みのやつ。ギザギサ吹き出しAAを簡単につくる方法。【2019年版】これでOK。カエレバヨメレバの使い方。jinデザインWordPressサイトで設定する方法を解説。一発解決!Macのメールが異常に重い時の対処法アイデアが浮かばない...。そんな時に見直すアイデアの出し方のヒント。【資格】Webクリエイター能力認定試験を受けてみた話【難易度や概要など】Google検索のコツ。便利な全20のテクニックとオプション機能まとめ。規制の前に急げ!めんどくさがり屋でも10分でできた「ふるさと納税」をする方法アーカイブ2019年12月2019年11月2019年10月2019年9月2019年8月2019年7月2019年6月2019年5月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年10月2018年9月2018年8月スポンサーリンク繋がりやすてく高速、安定のオススメレンタルサーバー。どこを使うか迷っているならXSERVERが絶対オススメです。ドメイン取得価格がたった1円〜。ドメインを取るならお名前.com。HOMEブログ・雑記ブログ初心者へのオススメ記事うわっ...私のサイト、遅すぎ...?wordpressサイトの表示速度の改善を試してみた。me何だかんだそれなりに色々できちゃう多機能なデザイナーです。・ネットショップ運営・マーケティング・イラスト・コピーライティングなど音楽やアート、ITや先端技術が好き。クリエイティブで自由に楽しく。デザイン、プログラミング、お小遣い稼ぎ、副業や日々の体験談などの雑記ブログです。最果てデザイナーの今更はじめるライフスタイルデザイン。