HPの外観や内容はそのままで表示高速化を
ロズまり様のホームページの表示高速化を実施し、スコアが35から73に上昇しました!写真や文字の使用量が多かったため、通常のサイトでも90台まで上がる可能性もあるそうです。是非ご相談ください。
目次
先日、ホームページの表示高速化をご依頼いただいた、ロズまり・向井様がFacebookでご感想をお書きくださいました。
許可を得て掲載いたします。
サロンのホームページの表示速度が
どうにも遅くて気になっていたので
こちらのサービスをお願いしました♪
対策前のパフォーマンススコア(スピード)
は35。最低レベルでしたが、
対策後は73に!!!
体感でも分かるほどかなりサクサクに
なりました(*^^*)
うちのサイトは戦略的に写真や文字を
大量に使っているため70台止まり
でしたが、通常のサイトだと90台まで
上がることもあるようです(@_@)
これからどんな影響があるか楽しみです♪
ロズまり様のホームページは、下記の箇所がページの表示速度を下げていました。
- ページ下のGoogleマップ
- 使用されていないプラグイン
- PC向けの巨大な写真
- スライドショー
- ウェブフォントの読み込み
- ホームページ自体の構造
どの部分がどのように表示速度を下げているのかを、PageSpeedInsightsの分析結果を見ながら調べていきます。
a. ページ下のGoogleマップ
最新のWordPressは、標準機能で投稿や固定ページに掲載しているGoogleマップやYoutube動画、イラストや写真の読み込みを遅らせてくれます。
ページを開いた時点で画面に表示されていない箇所の画像や動画・地図の読み込みを後回しにすることで、ページの表示速度をアップできるのです。
ところが上記ページでは、ページを読み込むと同時に、ページ下にあるGoogleマップも読み込まれます。
原因を調べたところ、ホームページを表示する際に、別のプログラムがGoogleマップのHTMLタグを生成して地図を表示させていることがわかりました。
これを止めて、GoogleマップのHTMLタグを直接テーマに書き込むことで、地図の読み込みを遅らせることができました。
b. 使用されていないプラグイン
WordPressのプラグインの中には、有効化しているだけで、ページの読込速度を遅らせるものもあります。
使っていないプラグインは無効にして、削除するのが、表示速度の点でもセキュリティの点でも望ましいです。
c. PC向けの巨大な写真
スマホの画面で写真を表示させる場合、パソコン用の巨大な写真を利用すると、写真の読み込みに時間がかかります。
スマホでは、スマホ用の写真を表示させるようにいたしました。
d. スライドショー
スライドショーにも、PC向けの大きな写真が使われておりました。
さらに、スライドショーで最初に表示される写真以外は読み込みを遅らせたいのに、それができていません。
そこで、スマホでは小さい写真を使うようにし、読み込みを遅らせる設定もいたしました。
e. ウェブフォントの読み込み
ウェブフォントは、インターネット上のサーバーから自動的にダウンロードされて、ホームページで使用されます。
ウェブフォントには色々な文字種がありますし、パソコンやスマホの機種を問わず使えるのが大きなメリットです。
逆に弱点として、ダウンロードが終わるまでフォントが表示されないため、ページの表示に余計な時間がかかる点があります。
ウェブフォントを読み込んでいる間は、PCやスマホに入っているフォントを使うようにさせる措置を行ないました。
上記の手立て以外にも、先日のメルマガで紹介したような対策も行なうと、さらに表示速度が上がり、ページを見る人にかかるストレスが軽減されます。
f. ホームページ自体の構造
表示高速化を行なっていくと、次のような問題に突き当たることがあります。
- ホームページの掲載内容を修正すべきか?
- テーマを大幅に改変する(または別のテーマに替える)べきか?
たとえば、Youtube動画がトップページの冒頭近くに載っていると、読み込みを遅らせることができません。
そこでその場合、お客様の許可をいただいて、Youtube動画を載せる位置を、もう少し下にするなどの対策を行なうことがあります。
今回のロズまり様のHPの場合、デザイン性が高いテーマを使用し、
うちのサイトは戦略的に写真や文字を
大量に使っている
ため、これらを犠牲にしての表示高速化を行なうわけにはいきません。
そこでご要望に沿いながら、行える範囲で表示速度を上げるようにいたしました。
今年に入ってから、ホームページの表示高速化のお申込やお問い合わせが増えております。
現在のホームページの外観や内容を替えずに表示が早くなるようにしたいという方は、ぜひご相談ください。
ホームページを見せていただいた上で、表示高速化が行えるかどうか返信いたします。(まれに、表示高速化を行えないホームページがございます)
なお、
「この際なので、HPを新しく作り直したい」
という場合は、表示高速化ではなく、ホームページのリニューアルという形で承ります。
リニューアルは、内容によって料金が変わりますので、まずは下記のお問い合わせフォーム、LINEからご希望をお聞かせください。