サイトに関する個人的なノートです。実施したこと、これから実施する予定のもの、今起きている問題などを記しています。
広告がページの読み込み完了を妨げている
以前からわかっていたことではありますが、最近は特に酷いです。
久しぶりにGoogleの「PageSpeed insights」を使ってみたところ、パソコンの方のスコアが90点とか出てても、モバイルでは40点とかになっていました。以前はここまでひどくはありませんでしたが、いろいろ調べてみると、どうやら広告が原因のようです。「改善できる項目」「診断」をみてみましたが、個人ができる大幅な改善は広告を外すことだけでしょうか。
Google Chromeのデベロッパーツールで確認すると、私が見た限りではGoogle AdSenseの関連コンテンツか自動広告のどちらか、あるいは両方でエラーが出ているようです（関連コンテンツと自動広告を貼っていないサイトではエラーが出ていない）。
Googleアナリティクスで調べると、いくつかのサイトでは今年に入ってから平均読み込み時間が急激に長くなっていました。多くのサイトでは平均読み込み時間は2〜4秒くらいで安定して推移していたのですが、今年（2019年）の1月には、最もひどいサイトでは22秒になっているサイトがありました。
読み込み速度が低下している原因は他にもあり、そのひとつがAmazonの広告です。フレームを使わないテキストのみのリンクや画像だけのリンクを使っているのですが、「・・・TIMED_OUT」というエラーが出ます。たぶんこれが読み込み速度を低下させている最も大きな原因だと思います。ただ、コードが間違っているわけではないしエラーが出たり出なかったりするので、Amazonのサーバー側の問題だと思うのでどうにもできません。おそらく、インプレッション測定用に読み込まれている不可視の画像が問題になっているのだと思います（テキスト広告の場合それしか考えられない）。
もう一つの原因として考えられるのはレンタルサーバーです。ロリポップの最安プラン¥100/月の「エコノミープラン」で契約しています。ただ、サーバーや通信にはあまり詳しくないのでおそらくですが、広告に関してはクライアントのブラウザから広告のサーバーにリクエストを送るので、サイトがおいてあるサーバーのスペックはあまり関係ないような気がします。
因みにこのブログ（広告を貼っていない）をPageSpeed insightsでみると、パソコンのスコアは100点、モバイルは99点でした。この他にも、Amazonの広告を貼っていないサイトは読み込み時間が変わっていないことと、Amazon広告をほぼ全ページに貼っているサイトでは2018年12月30日から急激に読み込み時間が長くなっていることを考えれば、激安レンタルサーバーが原因ではないと思います。
ネットで調べると、同じようなエラーが出ている人を何人か見つけました。個人ではどうにもならない問題のようです。
自分のサイトのページを見てみると表示自体が遅いわけではないので、とりあえずそのままにします。
HTMLタグとスタイルシートの見直し
そもそも、久しぶりにPageSpeed insightsを見たきっかけは、HTMLタグとスタイルシートの見直しでした。私の場合はちょこちょこスタイルシートをいじって不要なタグやセレクタが出てくるので、年に一回ぐらいは見直しをするようにしています。
Googleアナリティクスのトラッキングコードの変更
前々からやろうと思っていてやっていなかったのが、Global Site Tag（gtag.js）への変更でした。以前のトラッキングコードでも問題ないようですが gtag.js が推奨されているので、すべてのサイトで統一させるという意味でも、さっさとやってしまおうと思いました。
タグの変更だけならすぐに終わりますが、アナリティクスのイベントトラッキングを使っているサイトがいくつかあったので手間取りました。検索したらすぐに出てくるしタグも簡単なのですが、コピペして必要なところだけ変更して使ったら動きませんでした。よく見たらシングルクォーテーション（'）が全角になっていました。ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ
たぶん、掲載した人が打ち間違えたのではなく、テキストエディタなどのソフトによって自動置換されたのだと思います。ネットで調べていたときに動作しなくて苦しんでいる人を何人か発見したのですが、おそらくこれが原因だと思います。こういったコードはコピペではなく自分で手打ちしたほうが無難です。
idセレクタをclassセレクタに変更
これも前々から直そうと思っていたのですが、1つのページ内で同じid名を重複して使ってはいけない決まりになっていますが、初期の頃に作ったサイトでは重複がありました。ブラウザの表示では特に問題ないのでそのままになっていましたが、トラッキングコード変更のついでに片付けました。
idの使い道ってジャンプ先（リンク先）とJavaScriptでの要素の特定だと思いますが、これらを使用しない場合はidを使う意味ってあるんでしょうか？調べても情報が出てこないということは、これ以外はclassと同じ扱い？（今更ですが・・・）。
idセレクタはブラウザの解析に時間がかかるという記事も見かけましたが、どういう原理？
Googleカスタム検索はtableを使っている
前にも同じ失敗をした覚えがあるのですが、Googleカスタム検索はtableを使ってレイアウトされているので、table要素にスタイルを適用するとGoogleカスタム検索のレイアウトが崩れてしまいます。以前はこれに気づくのにかなり苦労した記憶があります。
要素に直接スタイルを適用するのはやめたほうが良いですね（pタグ以外は）。
hタグも直接スタイルを適用してもいいよね？