Loadは次のLazysizeがあれば不要かもですが、一応入れています。3-2.Lazysises「オフスクリーン画像の遅延読み込み」がまだ改善できそうだったので、さらなる施策を行いました。それがLazysisesの導入。これはプラグインではなく、若干コードをいじらないといけないのでちょっとハードル上がります。今後もwordpressを運用していくならどこかしらでぶち当たる壁。この機にいじれるようになっておくのがいいかもしれません。僕はwordpressはコードベースでいじるので助言できませんが、ちょっとコードいじる人に向けた記事も見たことあるので、ぜひそちらを参考にトライして見てください!Lazysisesについてはここら辺が参考になりました。背景画像も遅延読み込み可能。究極で軽量なlazyloader。lazysizes結構最近出て来た技術みたいですね!新しい技術はどんどん取り入れていかなければ。ことでお試し気分で入れてみたのですが、特にバグなく動いてくれて、いい感じです!やり方としては、「lazysizes.min.js」をサーバーにアップロードして、それを以下のコードで読み込みしました。このコード自体は`functions.php`に記述しています。`jQuery`等を読み込んでいる関数があると思うので、そこで読み込みをしています。読み込み」とかでググって見てください。'/js/lazysizes.min.js');>あとは参考HPに書いてあるように、imgタグをちょちょっといじって作業完了。1時間もかからないくらいで終わりました。モバイルでの改善項目からは無くなりましたが、全体の点数は変わらなかったです。ちなみにPCは点数大幅アップ。いっても、体感速度はあまり変化なかったですが...点数あんまり変わらなかった改善項目からは無くなったんですがね...PCは大幅UPコードいじるとこもあまり多くないので楽といえば楽。コードいじったことない人はちょっと苦労するかもしれないです。3-3.async/defer次に取り組んだのが、「レンダリングを妨げるリソースの除外」。具体的には「async/defer」をつけることで対応しました。チョチョっとコピペするだけだったんで楽でした。defer)で読み込みレンダリングを高速化する具体的には、一つめのサイトの関数をコピペしただけです。こんな感じになりました。...それとasyncかdefer、どっちをつけるかという問題。このHPは、jQuery入れてるのもあってdeferをつけています。それで実際高速に動いているので、deferでいいのかなって個人的には思います。ここまでではjsだけでcssは対処していないので、次はcssの改善に乗り出します。3-4.loadCSSの導入こちらも結構最近出て来た技術(git遡ってみたら、2014年からみたいでした)。古いブラウザ(IEとか)では動かないみたいです。BtoB向けサービスとかIEで動かないとだいぶ問題になるのですが、団体のHPとかはみんなSafariとかEdgeとかで見るので、よっぽどじゃなければ気にしなくて大丈夫ですよ!こちらがわかりやすかった。レンダリングブロックを解決するCSS配信の最適化と手順ヘッダー大幅変更が結構たいへんでしたね。やるなら早めにやるのをオススメします。最初の方はデザインの変更が多々あるので、クリティカルcssの設定しなくてもいいかもです。moireではまだしていません。最初の0.5秒くらいcssの適応ができていないことがあるくらいです。後々デザインが固まってからやろうと思いっています。頑張った結果がこちら。CSSの遅延読み込みが消えているのがわかります。3-5.テキスト圧縮の有効化これはxserverのサービスです。レンタルサーバーがxserverの方のみですね。mod_pagespeedを設定することでできます。設定自体は、かなり簡単にできます。mod_pagespeed設定についてその結果がこちら。体感的には速くなった気がしたんですが、点数的にはあまり変わりませんでした。いうかむしろ悪くなってる笑しかも実際に適応した後に、スタイル崩れるというバグが出ちゃいました。設定もう少しいじれば直ったかもしれませんが、そこまで速くなりそうになかったので、この施策は断念しました。imagesここでは画像の圧縮を行いました。HPの配信でのデータは、そのほとんどが画像と言われています。その画像のデータ量を少なくし、送るデータの量を減らせば速くなるだろうという理論です。今回はこちらを参考に行いました。表示速度をアップする方法!転送量の削減にも貢献!圧縮でたら量はこちら。いい感じに圧縮できました。画像をアップロードしたらよしなに圧縮してくれるので、こういう圧縮系プラグイン、一つは入れておきたいですね。Cacheこちらもwordpressのプラグイン。gzip化したかったので導入。gzipとは、配信するファイルをzipにして送り、受け取った側でzipフォルダを展開して表示させるという技術。zipしてデータ量を圧縮することで、データの通信量を減らし、ひいては通信時間を減らすことが目的です。これもブラウザによって使えないとかあるみたいですが、基本的には大丈夫かなと。このプラグイン、本来の使い方はキャッシュに使うもの。ついでにgzipもついています。ここでキャッシュについても。キャッシュとは、ざっっっくり説明すると、いろんなデータを取り出しやすいように保存しておくこと。一つ例に挙げると、ブラウザキャッシュというのがあります。これは、みなさんのブラウザにキャッシュすることを指します。ブラウザキャッシュがないと、みなさんがmoireのHPに何回も訪れるとして、その度に全てのデータを取ってこないといけません。ブラウザキャッシュがあると、キャッシュ(ブラウザに貯めてあるデータ)分はデータを取ってこなくていいので、その分通信量が少なく、より高速にHPを表示することができます。実際はかなり複雑な技術ですし、ブラウザ以外にも色々なところにキャッシュはかかっています。イメージとして先ほどの説明を理解しておいてもらえば、おそらく大丈夫かと思います。HPを高速化する際、キャッシュは実は一番に導入が打診されます。それほど有効な技術です。キャッシュが変にかかるとHPを更新したはずがユーザー側では更新されなかったら、キャッシュ系のプラグイン入れたらバグが出たって話もよく聞くため、結構慎重に取り扱わないといけません。Cache』はインストール数が多く、設定も細かくできるということで、このプラグインの導入を決めました。実際どれくらいの効果があったのかは未検証なのであれですが、特にバグが出ているわけでもなく、一番の目的であったgzip化も手軽にできたので、個人的には満足しています。前述したように、このプラグインは導入数が多いため、このプラグインに関する記事はたくさんあります。僕はこちらを参考に導入しました。Cacheの設定と使い方ただ思ったより効果が出ませんでした。Insightで効果でなかったのは、おそらくキャッシュがこのサービスではかかってないからだと考えています。実際は、キャッシュは高速化において有効な手段なので、うまく導入したいところです。ここまで施策を重ねてきましたが、モバイルの点数がなかなか上がらないですね。これはfacebookの埋め込みが足を引っ張っているのが原因でした。この時は、HPにTwitterとFacebookのタイムラインを挿入していたため、これが原因で点数が上がらなかったのです。この二つは、画像等々、たくさん送信してくれるため、遅くなる原因でした。画像を送ってくれるため、「次世代フォーマットの画像の配信」で足枷になっていました。XR、WebP」のどれかで送ってくれってことみたいです。Insightsの「次世代フォーマットでの画像の配信」対策方法あまり詳しくないのであれですが、あんまり聞かないファイルの形式ですね。実際、ここは特別な対応をしなくても足枷にならなかったので、とてつもない量の画像を載せない限りは大丈夫かなと思っています。3-8.脱タイムラインTwitterとFacebookのタイムラインが足枷になっていることはわかったので、脱タイムラインを決行しました。修正後はタイムラインではなく、アイコンを使っています。このアイコンは、公式のもの。実際タイムラインがあったところで、結構小さいしあんま見られない気がします。無くしてしまった方がいいと思います。人好き好きですが笑そして辿り着いたのがこんな感じ。^_^このまま下にスクロールしていったら実物が現れます。これにより、ついに圧倒的なスピードを手に入れることができました。改善できる項目もほとんどなく、かなりいい感じに修正できました。モバイルもPCもいい感じ♩4.おわり以上がmoireのHPを高速化するためにやったNの施策の全てです。一回高速化してしまえば、あとは超快適HP生活が始まりますよ!ある程度HPが完成して、さらなる改良を考えている人はぜひお試しください!では0人気記事ランキングに反映されます。俊介moireを通して「社会貢献活動が身近にある社会づくり」と「自然保護活動の普及」を実現します。幻想的な棚田のライトアップ。大阪唯一の村で週末ボランティアをしてきたボランティア世間のボランティアに対する考え方はちょっとおかしい。