タイプ別、簡単にサイトの表示速度を高速化する方法

スポンサーリンク
羽:HPの表示速度を速くしたい神社サイト運営

ホームページをPagespeed Insightsで計測したんだけど、改善策が書いてあってもどうやって改善したらいいのか分からないわ・・・・・

今回はこういった、ホームページの表示速度を高速化したいけども、どうしたらいいのか悩んでいる人に添いたいと思います。

Pagespeed Insightsでホームページの表示速度をテストすることができます。URLを入力すれば、表示速度の点数と改善策を提示するので、便利なサービスです。でも、ホームページ作成上級者じゃないと、改善策が何言っているのか、ちょっとわからない。

そこで、とにかく表示速度を改善したい人向けにホームページの種類によって速くする方法を紹介します。

WordPressを使っている人はAutoptimizeプラグインを使う

Autoptimizeについて

Autoptimizeとは

プラグインのAutoptimizeとはJava ScriptやCSS、HTML、画像を最適化してくれるプラグインです。

Pagespeed Insightsに下記のように書かれた項目に効果があります。

PafeSpeed Insightsの提案のここに効果がある
  • レンダリングを妨げるリソースの除外
  • 使用していないJava Scriptの削除
  • オフスクリーン画像の遅延読み込み
  • 適切なサイズの画像
  • 使用していないCSSを削除してください

Autoptimizeを入れた結果

Pagespeed Insightsのスコア、モバイルは34点

それほどPagespeed Insightsでは変化がありません。スコアは赤いゾーンのままです。でも、体感的には変わったので、効果があったと思います。

ページスピードインサイトのスコアは42点

Pagespeed Insightsでの分析は毎度スコアが変わります。また、Autoptimizeを入れたからと言って改善策がなくなることはありません。でも、Autoptimizeは入れるべきプラグインです。

Autoptimizeの設定

チェックを入れれば設定ができます。画像を参考にしてください。

Java Scriptオプションの設定

Java Scriptの設定

CSSオプションの設定

AutoptimizeのCSSオプションの設定

HTMLオプションの設定

AutoptimizeのHTMLオプション設定

CDNオプション設定

CDNとはキャッシュサーバを利用して、インターネット上のサービスを効率的に素早く配信するネットワークのことです。利用していない場合は設定の必要はありません。

AutoptimizeのCDNオプション設定

その他オプション

Autoptimizeのその他の設定

画像最適化

私の場合、画像の遅延読み込みである「Lasy Loads」をチェックすると表示されない画像があったので、チェックは入れていません。

Autoptimizeの画像設定

Jetpackのアクセラレータにチェックを外さないと、Autoptimizeの画像最適化が有効ができません。Jetpackを入れている方はチェックを外してくださいね。

他にも、他のプラグインとの兼ね合い・相性があると思うので、チェックは様子を見ながら行ってみてくださいね。

レンタルサーバーとテーマ選びも重要

正直なところ、レンタルサーバー選びは大切です。私はさくらインターネットコアサーバーを利用しています。どちらもサーバーの仕様や機能は同じように思います。同じホームページの内容ではないので、比べられませんが、さくらインターネットの方が速く感じます。

なので、格安サーバーでの高速化はあまり期待しない方がいいと思います。まだ、使用したことがないので実感をもってオススメできませんが、余裕があったらwpX Speedエックスサーバーカゴヤ・ジャパンを試したいと思っています。口コミサイトをみると速いと定評がありますよ。

また、テーマ選びも重要です。必ず表示速度が速いテーマを選びましょう。オススメはこのブログでも利用しているCocoon【THE THOR(ザ・トール)】です。ザ・トールはPagespeed Insightsのスコアが90点以上です。

Webビルダーを利用している人は画像サイズに気をつける

ペライチジンドゥーなどのWebビルダーを利用している方は、ほぼ運営会社任せで大丈夫です。

ただ、アップロードする画像がサイズに気をつけてください。サイズは大きさ、解像度によってサイズが重くなるので適切なサイズでアップロードします。

適切なサイズはマニュアルに書かれていると思うので確認して見てくださいね。1MBまでアップロード出来る場合でも、なるべく100KB以下を目安にします。

また、保存するファイルの種類も適切な種類にしましょう。

Photoshopなど画像編集ソフトで、画像が粗いと感じないギリギリを狙うと画像のサイズを小さく(圧縮)できますよ。

 

シンプルなHTMLのホームページの人は

シンプルなHTMLだけのホームページの方は表示速度は速いと思います。もし遅い場合はレンタルサーバー、画像サイズ、ソースコードを見直します。

WordPressを使っている人のところでも書きましたが、レンタルサーバーによって表示速度は変わります。本当に表示速度を変えたい人はサーバー選びから見直すといいと思います。

画像サイズは、ホームページの横幅より超えない大きさにカットします。その上で、画像編集ソフトで解像度を下げてください。

ソースコードの確認は、ホームページ作成ソフトで行います。ホームページ・ビルダークラシックで「ページ/ソース」で確認します。「ページ編集」でおかしなところが反応する場合は、無駄なタグが隠れています。余計な行や空白、無駄なタグ、欠けたタグなどを削除します。

最後に

自分のパソコンで作業しているときは、あまりページスピード(表示速度)を感じません。なので、時々は別のパソコンやモバイルで、ホームページにアクセスして表示速度や表示のずれがないか確認するといいと思いますよ。

神社サイト運営
スポンサーリンク
いつもありがとうございます!
楽カミほむぺ★
タイトルとURLをコピーしました