学生団体・サークル等々。今後HP開設しようと考えている人に向け、役に立ちそうな知識を書いていきたいと思います。今回は、moireのHPの速度改善のために実際に行なった施策を書いていきます。(この記事はwordpressを使ってる方向けです。WIXといった、手軽にHPが作れる無料サービスを使ってる方は、申し訳ありませんが参考にならないと思います。表示までがあまりにも遅いHPは、表示される前に離れてしまいますよね、普通。逆に、よっぽど遅くなければ、それが理由でHPから離れないというのもまた真。実際、人気ブログなどでも、表示が遅いところはあります。それでも、サクサク動くならそれに越したことはない。速くなくてもいいけど、それなりには速くしたい。最低でも、そんなニーズを満たせるように書きたいと思います。因みに、HPの表示速度が速いとseoに有利みたいです。速度は重要!2.まずはHPの速度を図ろう!「速度改善を行う前に、まずは現状の知ろう」ということで、実際にHPの速度を測って見ましょう。用いるツールはこちら。Insights)はGoogleが提供するWebページのコンテンツを解析して、ページの読み込み時間を短くするための方法を提案してくれるツールです。Insightsを理解しよう/ウェブ部Googleのサービスです。検索エンジンはやはりGoogleがよく使われるため、そのGoogleのツールを使うのは理にかなってますね!また色々な方がこのサービスを指標にしているため、調べればたくさんの情報が出て来ます。これもオススメの理由の一つ!早速HPのURLを貼り付けて測定して見てください。因みにこちらがmoireの最初の測定結果。モバイルが絶望的ですね。モバイルの表示遅いとは思ってたのですが、やはりですか...絶望的モバイルPCはまあまあそれでこちらが、これから書く施策を行ったあと。モバイルは満点まで後少しPCは満点!!サクサク動くのやっぱ気持ちいですね!moireはHOMEのページで波紋が一つ広がるようにしているのですが、HPが重いとこれがカクカクしてしまう。今まではカクカクした動作で、なんともダサい感じだったのですが、今はぬるっと動いていい感じです。実際行った施策はどれも難しくないので、ちょちょっとやって、少し改善する気持ちで試して欲しいです。2-1.速度を測ったら次に見るもの速度の測定が終わって、自分のHPの速度がなんとなく分かったら、次は「改善できる項目」を見ましょう。下にスクロースしていったら出てきます。基本は、この項目を一つずつ改善していくことになります。これがこうなるようにがんばりましょう!!実際に改善した項目はこちら。・使用していないCSSの遅延読み込み・次世代フォーマットの画像の配信ここに乗っている改善策以外が表示されていたら、その項目をググって見てください。たくさんの人が、その項目についての記事を書いているので、それを参考にしてみたください。これから書く改善策よりもっといいものがあるかもしれないので、臨機応変に対応してみてください。Loadまずは「オフスクリーン画像の遅延読み込み」の改善から。オフスクリーン画像の遅延読み込みとは、ざっくり説明すると、画面上に表示されていない画像は後から読み込みなさいってこと。何も設定をしていない場合、最初の通信でそのページで表示させる画像が全て読み込まれます。すると、スクロールしないと見えない画像まで読み込まれ、最初の通信および、最初の画面表示(レンダリング)が遅くなります。それを、最初に表示される画像以外の画像は後から読み込ませることで、最初の表示を速くさせましょうってことです。Load』の使い方&初期設定は?このサイトでは、このプラグインを有効化しただけです。