2020/01/01先日サイトリニューアルをしました。いっても大きく変更したわけではなく背景色を変えただけ。そのためとくに何か変わったわけでもありません。以前からサイトの読み込みが遅いと思っています。原因はサーバーの問題。これに関してはサーバー変更するしか方法がありません。調べたところやはりエックスサーバーがワードプレスに適している感じです。機会があればサーバー移管をしたいと思います。それ以外にもサイトの読み込みを遅くしている原因が多数あるようです。昨年の11月頃にGoogleのPageSpeedInsightsがリニューアルされました。これまで以上に細かく情報を教えてくれるようなので調べてみました。パソコンで見る分には問題ないようですが、スマホだとかなり遅い部類に分類されてしまいます。35点という非常に悪い点をたたき出しております。サイトスピードが落ちれば離脱者も増えてしまいます。近年はスマホで見る人が多いです。格安SIMの利用者も増えており、回線速度が遅いなんて人が多いです。その人向けにサイト構築をしていかなければなりません。一つずつ項目を見ていきましょう。改善できるポイントは以下のものとなります。1.サーバーの応答時間の短縮2.次世代フォーマットでの画像の配信3.オフスクリーン画像の遅延読み込み4.レンダリングを妨げるリソースの除外5.使用していないCSSの遅延読み込み以前までは「サーバーの応答時間の短縮」と「レンダリングを妨げるリソースの除外」「使用していないCSSの遅延読み込み」というのが存在していました。画像の改善ポイントも前からありましたが、今回はさらに細かく指定されています。XR、WebPなどの画像フォーマットはPNGやJPEGより圧縮性能が高いとのこと。Google先生は今のJPEG画像を別の形式に変えろって言っているわけです。変えるべき画像の大半はGoogleアドセンスが配信しているものですが...。これを何とかしなければなりません。2000という言葉を久しぶりに聞いた気がします。いえば昔そんなのがあったような。2000が登場したのですが、周りが追従せずにそのまま忘れ去られた遺産となってしまっていました。形式が変わるとそれに合わせてハードもソフトも変えなければなりません。互換性が無いと浸透しないわけです。今回、もし画像を別形式に変えるのであればWebPなのでしょう。こちらはGoogle先生が開発した画像フォーマットのようです。今後もGoogle主体でネットは続くわけですのでそれに合わせていくしかありません。このWebPは現在見れるブラウザが限られているようです。一応Microsoftのedgeでも次のバージョンで見れるようになるそうですが、基本はchromeになります。流行らせようとするもなかなか定着は難しそうです。一昔前のSONYを見ているような感じです。形式を変えることで画像の容量は半減するそうです。これはやらない手はない。手法としてはWebPで表示させ、ブラウザが未対応であれば代替のJPEGを表示させるという形であればよいんじゃないでしょうか。androidのスマホであれば見れるわけです。見れなかったとしてもJPEGを表示させてくれるのでこれであればサイト速度も上がるのではないでしょうか。「サーバーでWebPが使えない」はい。なんとなくそんなことになるんだと思いました。WebPを使うためにはサーバー側の設定が必要。現在のサーバーでは利用できないみたいです。ちなみにエックスサーバーであれば問題なく利用できるみたいです。こりゃ早々にサーバー移管が必要ってことですね。ここの関してはサーバーを変えなければならないので後回しです。オフスクリーン画像の遅延読み込みオフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにしてください。画像を遅延させて読み込ませなければなりませんよってことです。これまでプラグインを入れては画像を遅延させて読み込ませようと努力をしてきました。大体のプラグインが不具合となります。機能するときもあるのですが、機能しないと画像は全く表示されないまま。スクリプトの読み込みに失敗し、それ以降が実行されないんだと思います。その結果画像も表示されないということになります。新しいプラグインを入れても同じような状態に。これでは遅延どころか画像がないことになります。当サイトはそこまで画像は多くないのですが、その少ない画像でもあるのと無いのとでは大きく違います。画像について説明しているところで画像が表示されないのであれば何が書いてあるか意味も分かりません。画像の遅延を使っているサイトをいくつか見かけますが、やはり読み込まなかったりすることもあるので、プラグインでどうにかするのは望ましくないようですね。プラグインを使わずに読み込み遅延が出来るかどうかを現在模索中です。レンダリングを妨げるリソースの除外と使用していないCSSの遅延読み込みに関してはいつも通りの警告です。CSSの遅延読み込みは個人的に好きではないので行いません。エクスペリエンスでのアプリの実際のパフォーマンスを測定できるようにしてください。調べたところ、これは速度が速くなるとか関係なく「パフォーマンスが測定できるようにしておけ」ってやつのようです。Javascriptファイルに以下を記載。window.performance.mark('mark_fully_loaded');これを各JSファイルに突っ込んでおけばそれで大丈夫みたいです。ウェブフォント読み込み中のテキスト表示これ、誰?たぶんGoogleフォントかなにかなんだと思いますが、どこで使っているのでしょう?もしかしてアドセンスなんじゃないでしょうか?どこで使っているかわからないですが、以下をCSSにいれれば対処可能のようです。CSSファイルに以下を記載。font-display:swap;}とりあえずシステムフォントを読み込ませ、あとでフォントを切り替えるってことです。フォントの読み込みを後にすることで表示も遅くできますってわけですね。無駄を省いて読み込みを早くしろってやつですかね?世の中無駄なものはないと思いますが。いらないものを削るしかないでsね。要は読み込み早くするためキャッシュは残しておけってことです。当サイトはキャッシュを30日間残すようにしてありましたが、Google先生はそれでも生ぬるいとのこと。そのためキャッシュは一年間保存することにしました。キャッシュを残していないのはGoogle先生、あなたですよね?修正箇所はほとんどGoogle配信のものです。文句言うならまず己の改善が必要なのじゃないでしょうか?Javascriptの実行にかかる時間の低減こちらに関してもほとんどがGoogle先生のものですね。過大なDOMサイズの回避DOMサイズというのがいまいち理解していませんが、内容からするとタグの量ってことなのでしょう。細かくタグに囲まれているとその分読み込む速度が遅くなる。タグの量を減らしましょうというのがここの修正ポイントです。確かに無駄にタグで囲っているところがあるのはわかります。スタイルで対処すればよい部分を無理くりタグで囲み、なんとなくそれっぽい形にしています。ここはすぐに修正できそうな場所ですね。最初にできそうなのはサイト内リンクに関してです。タイトルと画像、そして概要が書かれている部分は多くのタグを使っています。それを最小化することでページ全体の量を減らせるのではないでしょうか。ここを何とかしていかなければなりません。クリティカルなリクエストの深さの最小化こちらも遅延に関してですが、CSSは一纏めにしたいし、最初に読み込んでほしいと思ってます。AmazonJSに関しては先に読み込まないとエラーが出るのでこちらもそのままにしなければなりません。修正できるポイントはいくつか出てきましたね。1.画像のフォーマットの変更はサーバー移管で乗り切る。2.オフスクリーン画像の遅延読み込みについてはプラグインを使わない代替案があるか模索する。3.メインスレッド処理の最小化については当方ががんばる。4.過大なDOMサイズの回避については当方ががんばる。こんな感じでしょうか。良いスマホ画像アプリは?【リサイズ】ブログの肝は写真なのか文章なのか?どう考えても文章でしょう。本気出すといってから一年が経ちました。このままの推移であればアフィリエイトで生活が出来るといった考えも生...【六カ月目】先月よりもPVが大幅アップ。不労所得生活も間近か?先月、「来月の予定は42000PVですねー」と言っていました。その理由は先月のPV数が先々月より18%アップしていたからです...Amazonアソシエイトからの入金が全くなかったことに気付く二月の作業は毎年決まって金勘定です。当方は会社員だった時期もありますが自営業だったり会社役員だったり、なんだかフラフラし...【十六カ月目】アフィリエイト?なにそれ?おいしいの?Googleコアアルゴリズムが更新されてから半年ほど。二度目のアップデートから二カ月が経過しました。千葉に山林を購入しました。【バンコク滞在】帰国の日。バンコク最後の夜にロティのバナナ卵入りを食べる【バンコク】手を差し伸べよう。明日を生きるため、明日に輝くため。Posts【天竺への旅】真理は近づくものではない。【フォトジェニックスポット】ラチャダーナイトマーケットに行く海外で旅行しながら生活はできるのだろうか【バンコク滞在】エンポリアムのフードコートに行ってみたやっぱり、タイでもケンタッキー。