事の発端
Google AdSenseの管理画面には、「サイトの状況」というものがある。これはサイトの健康状態を★マーク０～５個で表示してくれるもの。
（追記：正確にはAdSenseの機能ではなく、Web Master Tool の PageSpeed Insights というサービスで、AdSenseの管理画面にもリンクがある）
サイトが重かったりすると、その原因を分析、改善案を提示してくれる。
（直すのは自分です。勝手に直してくれたりはしません）
この★がいつの間にか5個から4個に減っていたので調査してみたのが発端。
ブロッキング リソース
AdSense先生： 「このページには、ブロッキング スクリプト リソース が n あり、ブロッキング CSS リソースが n あります。これが原因で、ページのレンダリングに遅延が発生しています。」
うん、わからん（暑いし。
と、思ったがすぐ下に原因のURLが書かれていたので、確認してみると syntaxhighlighter のCSS、Javascriptを配置しているURLだった。
syntaxhighlighter は有名なソースコードをブログ等できれいに表示させる為の css/javascript群。
このブログでも利用中。
（参考記事：Bloggerにソースコードを表示する、Bloggerにソースコードを表示する その２～Google Driveを使う）。
実は syntaxhighlighter のJavascript は GoogleDrive に今のところ配置してある。
Google Driveが重いのか？
仮に重いとしても代替え先に悩む。一応Google Drive内コンテンツへのURLアクセスは重い傾向ではあるらしい。
代替え先候補も一応は検討をしようとは思った。
- AWS
1年無料運用中なので、来年どうするか未定。
このような案件でアマゾン様の手をわずらわすわけにはいかない（ぇ。
（単に面倒そうだな～と思っただけです・・・来年また引越しとかありえるし）
- DropBox
ここも重いらしい。Google Driveと似たりよったりか？
- Googleサイト
これを利用する手があるらしいが、ここもなにやらありそうなのでパス。
と、割り切ることにする。（暑くて投げやり気味
非同期バージョンを使用してください
AdSense先生の分析によるご指南である。言いたいことはわかる。でもJavascriptは苦手なのでパスしたい（暑いし
（AdSenseの広告タグがまさに非同期なスクリプトだったような気はする。が、これも忘れることにする。暑いので）
読み込み位置を変更して対処
syntaxhighlighter のCSS（shCore.css）は、テンプレート > カスタマイズ > 上級者向け > CSSを追加から
で、追加でなんとかなる。
問題は shCore.js、shBrushCSharp.js 等のJavascript。
Syntaxhighlighter のオートロード機能も実は素よりも重くなるらしいので使えそうにない。
Javascriptの外部読込みの位置は、以前に何も考えず追加したままだったので </head>の前くらいで読み込んでいた。
その為、外部読み出しで時間がかかる間はページのレンダリングが待たされてしまい（ブロック）、表示レスポンスに遅延がでている。
と、AdSense先生は言ってるような気がしたので、</body>の前で読み込むように記述位置を変更。
syntaxhighlighter の対象となる部分の表示整形は遅れて行われるので、根本解決ではないが、これでブロッキングによるページレンダリング遅延の改善はAdSense先生も納得してくれた模様。
（</body>の前ならば、他のレンダリングすべきソースコードは一応処理されてるはずなので）
なんとも非常に基本的なことが原因だった気がします・・・。Orz
もう少し涼しくなったらまじめに対策するかも・・・しれない；つД｀）
0 件のコメント:
コメントを投稿