ページ評価を上げる|ファンタジーonPC

🔧 ページ評価を上げる

　前回当サイトのページ評価を調べたわけですが、作ったばかりの比較的シンプルな構成にしてはやや低い感じが残りました。 そこで、PageSpeed Insightsに示されている助言にしたがい、もう少し改良してみようかと思い、 やってみたのが今回のレポートです。 以下の表は、前回の結果に、今日改良を終えた当サイトの結果を加えて示したものです。

※HTML5 のタグチェックは詳しいのでW3C Markup Validation Serviceで行いたかったのですが、Yahoo や Google などの複雑なタグを読ませると失敗するため、 全てValidator.nu (X)HTML5 Validatorで行いました。
※PC表示速度、モバイル表示速度はPageSpeed Insightsで行いました。 調べる時刻により結構変動します。

　これによって、もともとPC表示速度は高かったので対して上がりませんでしたが、より100点に近づきました。 問題はモバイルで、48点はいかにも低い感じで、これを改善したかったのですが、70点に近づき、まあ満足です。 参考までに、当サイトで一体何をやって評価を上げたかをご説明しましょう。

検索ボタンの修正

　ブログを目指す上では、アクセス解析をして読者が読んでいてくれるのか、どの記事が読まれているのかは知りたいところです。 そうすると、Google Analytics タグを入れるとどうなるかがまず問題になりそうですが、このタグは意外に大きな負荷にはなっていないので後に回します。

　それより重いのが、Google のサイト検索でした。 当初、Google カスタム検索（サイト内検索）の設置にしたがい、Google の準備した「検索ボタン」を設置していました。 しかし、これは Javascript を使用するので、読みこみや解析といった処理でブラウザのリソースを食います。 これを何とかしようとすると、

<a href="https://google.com/search?q=site:https://rakunet.org/+スクリプト">サイトで「スクリプト」を検索</a>

と書けばいいことになります。 これを少しずつ修正し、「テキストボックス」に「検索ボタン」を配置したのが現在のサイトの形です。 これでモバイルの表示速度は約10ポイント向上しました。

SNSボタンの修正

　ついで、Twitter や Facebook のシェアボタンですが、一般的にはSNS ボタンの設置とカスタマイズ方法にあるように各ベンダーが準備した公式ボタンをセットします。 しかし、検索ボタン同様 Javascript を用いているため、ページが重くなってしまいます。 上と同じように、

<a href="https://twitter.com/intent/tweet?url=https://rakunet.org/">シェア</a>
<a href="http://www.facebook.com/share.php?u=https://rakunet.org/">シェア</a>

と書けばいいのです。 これを少しずつ修正し、システムに手を入れ、http://rakunet.org/ の部分に各ページ自動的な URL が入るようにしたのが現在の形です。 これでモバイルの表示速度は約15ポイント向上しました。

Google Analytics の問題

　Google Analytics は 2020年頃から、アナリティクス 4 プロパティという形(GA-4)を標準にしようとしています。 これにともない、ホームページの head タグに入れるコードが

gtag('config', 'UA-XXXXXXX-X');

から

gtag('config', 'G-XXXXXXXXXX');

に変りました。 GA-4 はアナリティクスの Web 画面が旧版に比べてわかりにくいですが、これに慣れていくとすると、表示速度は旧アナリティクスのコードを埋めこんだ場合に比べ10ポイントほどアップします。 やる価値はあるでしょう。

広告タグの問題

　現在、当サイトはサイドバーに広告を表示するタグを埋めこんであります。 広告はなくてもいいかなとは思うのですが、ブログにはたいてい入っています(^^;。 ちなみに、仮に組みこんでいるこの広告を非表示にしてみると、PC表示速度 99点、モバイル表示速度 93点となり、一番の高速化となります。 広告表示をはずすのが最も高速化に貢献することはほぼ間違いなさそうです(どうしよう)。

前へ: 🔍 ページ評価を調べる