サイトの読み込みスピード改善

当サイトはレスポンシブ対応で作成を行っていますが、サイトの読み込み速度テスト「PageSpeed Insights」でスコアーがいまいち良くなかったので出来る範囲で修正を行いました。
この読み込みスピード改善は注意しないとソースを壊してしまったりするので非常に危険です。なので「出来る範囲」という限定的なものとなります。
修正の仕方によりメンテナンスも大変になるので、良く検討し妥協し修正するのがベストと思いました。スピード重視で、メンテナンスが大変になったり壊れてしまっては元も子もないので。
ここでは自分が行った改善を記載いたします。サイト作成初心者でも出来る範囲だと思います。（自分も初心者なので）

●現在のサイトをバックアップする

かなりの変更が発生する場合があります。まずはフォルダー毎、バックアップをしましょう。（当たり前か・・）
表示がうまくいかない場合にすぐに戻れるように。最悪、普及できなくなるので・・・

●現在のサイト読み込み速度チェック

現在のサイトの読み込み速度チェックを「PageSpeed Insights」行います。
改善内容が表示されます。画像やjavascript等の改善が主でしょうか・・・

●画像サイズの最適化

読み込み速度チェックを行うと、色々な速度アップする為の情報が表示されます。
まず、すぐに目につくのは画像の最適化です。
とりあえず、画像のサイズ(高さ＆幅)や圧縮を行い最適化します。

●なるべくコメントを削除

html内のコメント「＜!--****---＞」や改行等をなるべく少なくします。
コメントは多分(私だけかな・・)、何をしているか書いていると思います。あまり削除すると何を記述してるかわからなくなり、サイトのメンテナンスがやりにくくなるので程々に・・

●cssやjsの読み込みを少なくする

cssやjsの読み込みには時間がかかります。サイトのメンテナンスにもかかわってくるので、ある程度の塊でファイル分割し必要な物を読み込むようにします。
私の場合はjsを各カテゴリー毎に分割しました。

●＜head＞～＜/head＞内の記述順序を確認

＜head＞～＜/head＞内に、使用するcssとjavascriptを記述しますが、cssを先に記述してからjavascriptを記述します。（結構重要事項でした）
javascriptの読み込みにasyncを使用したりすると改善しますが、表示がおかしくなる場合があります。影響を及ぼさないjavascriptに使用しましょう。

●preconnectとdns-prefetchを使用

これが難しい・・・中々理解に苦しんでます・・・。preconnectとdns-prefetchを調整しながら速度を確認しました。
「preconnect」又は「dns-prefetch」と検索すると使い方が出てきます。自分がわかりやすいサイトを参照してみてください。
「preconnect」と「dns-prefetch」は、使いすぎても少なくても遅くなるので、注意が必要です。

最終的には妥協が必要と感じました・・・（最初の検討がいけなかった・・）
また、ホームページのレンタルサーバーの設定やスペックも重要で、レンタルサーバーは人それぞれかと思いますが、キャッシュを有効としたほうが良いようです。
キャッシュをすると変更しても表示が新しくならないのでイマイチ・・と思うかもしれませんが・・・
勉強と修正に３ヶ月位かかってしまいました・・・とりあえず今回はここまでとします。疲れた・・・