概要
Your website is faster than 60% of all tested websites
「Pingdom Tools」での…無対策な時期の平均的な立ち位置でした…
カスタマイズしていないシンプルなサイトも多いでしょうから…
まぁ…言う程…遅かった訳でもなかったのですが…
何かにつけ「丁度良い」を目指している身としては…我慢なりません…
なので…「Blogspot」ドメインでのページ読み込み速度の改善のため…
絶対的な速度の「直書き」を出発点に…相対的な評価を得るために…
速度とスコアのバランスをとりながら…2014年に入って…
各種…ページスピード診断ツールに…渋々…従い…
チマチマと…様々な最適化作業を続けて来ました…
なんとなく「丁度良い」になったので…広告のスクリプトを…
左サイドバーの広告から読み込んでいたのを本来の「
</body>」前に戻して…他の外部「CSS」や「js」と非同期読み込みにしました…
外部「css」によるレンダリングブロックを回避するために「js」と非同期読み込みさせるコード
なので…もう…残念ながら…最高スコアにはなりませんので…
診断ツール毎に…結果報告を兼ねて…備忘録として残しておきます…
画像は…「passer-by198-infinity.blogspot」ドメインで…
「.com」アドレスから「.ca」アドレスへのリダイレクトが発生しないように…
「.jp」アドレスで検証した結果です… （￣＾￣) ｴｯﾍﾝ
PageSpeed Insights
Developers「PageSpeed Insights」
基本的な考え方が学べます…大雑把に言えば…
スクロールせずに見える範囲の読み込み時間と…
ページ全体の読み込み時間の…
ネットワークに依存しない部分が評価対象です…
各種…ページスピード診断ツールが…あくまでも…相対的な評価だと…
改めて気付かせてくれる貴重な存在です…
- 表示可能コンテンツの優先順位を決定する
- HTML を縮小する
1番目は…「ネットワーク ラウンドトリップ」が「3回必要」になっているので…
「2回分の HTML のみでレンダリング」出来るようにしなさい…って事なんですが…
まぁ…言う程…簡単ではないですねなので…ネットワーク接続に依存しても…
光回線全盛ですから然程問題も無いでしょうし…その方が現実的です…
そもそも…モバイル環境には一切配慮しないのが…私のスタイルですしね…
2番目は…単純に「HTML」を縮小しても…たかだか「数%」ですし…
勿論…「Caution」が改善される事もありません…
「CSS」も「JavaScript」も…ちゃんと圧縮していてもです…
ザックリ言うと…ガジェットを呼び出さないで直書きしなさい…
…ってな感じの「無茶ぶり」なのです…つまり…
先生謹製の「PageSpeed Insights」が…
同じく…先生謹製の「 Blogger」の仕組みに…
ダメ出ししているって事です…とても…公平ですね… (￣ー￣) 邪笑®
直書きして…どんな結末が待っているのか検証する程の…
チャレンジャーではありませんので……これも…現状維持で良いでしょう…
Pingdom Tools
「Pingdom Tools」です…
「100 / 100」ですね… (+_+) ﾋﾞｯｸﾘ
緩い感じが…好みです… σ(^_^;)
何かとお便利な…
Google Chrome 拡張機能…
「SEO Site Tools」の「Page Term / Tools」でも採用されていて…
お馴染みですね…ホルホルしたい向きには良いでしょう…
GTmetrix
より詳細に検証を行うためには…やはり…
「GTmetrix」ってな感じの…
認知度抜群ツールですね…
俗に言う…「AA」を目指す…
…ってのは…「GTmetrix」での…
「Page Speed」と「YSlow」の…
「Summary」の事ですね…
どちらの「Grade」も…
(99%) A …です
「Recommendation」で…
「A(100)」じゃなかったのは…
「Page Speed」では…
Minify HTML : A(98)
Minify CSS : A(99)
Minify JavaScript : A(99)
…です…それぞれ…「optimized version」も用意されてはいますが…
「Minify HTML」に関しては…上記「Insights」と同様の理由で無意味です…
「YSlow」では…
Compress components with gzip : A(89)
…です…これは…「GTmetrix」がテストで使用しているブラウザ…
Firefox が原因だと思われます…
Google Chrome では「gzip」圧縮として認識されます…
Blogger も…先生謹製ですから…当然といえば当然なのですが…
私的には…他のブラウザに配慮する必要性を微塵も感じませんし…
何より…管理者側で…どうこう出来る問題じゃありません…
「Waterfall」で「Response Headers」「Request Headers」も確認出来ます…
WebPagetest
なので…ブラウザ別に確認出来る…
「WebPagetest」も置いておきます…
「Optimization」で見てみると…
Google Chrome で…ちゃんと…
「gzip」圧縮として認識されていますね…
巨人…先生の謹製ブラウザなのですから…
ウエブ標準ブラウザになって当然でしょう…
他のブラウザの結果は…嫌気がさす…
…でしょうから…見ない方が身為です…
とは言え…とても良い診断ツールですから…
「GTmetrix」の補完で使った方が良いですね…
さもなければ…「gzip」圧縮問題で…
延々と試行錯誤を繰り返す…なんて事にもなりかねませんからね…
「Compress Images」は…
画像は全て「base64」変換して生データで記述して…
更には…「CSS Sprites」で制御していますので「N / A」ですね…
Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】
「Cache static content」は…「Font Awesome」を…
外部ファイルとして読み込んでいた時よりスコアが落ちていますので…
「Font Awesome」のCDNでアイコンをWebフォント機能を使ってBloggerに表示【CSS3】
「Font Awesome」の「query strings」問題を「CSS Sprites」で解決するために画像に変換する
単純に比率で判断されている可能性もありますので気にしない方向で…
頻繁にカスタマイズしていますし…そもそも…「static content」が…
どの部分なのかも判然としませんしね
見易い「Waterfall」で「First Byte」などを容易に確認できたり…
「Favicon」も含めて判定されたり…「Filmstrip」で見れたり…と…
独自色が強いので…結構…頻繁に使っている診断ツールです…
おわりに…
あれこれ弄って…「丁度良い」感じにはなりましたが…
無配慮な広告が…全てを台無しにしますので…虚無感も付き纏い…
高速化・最適化作業は…積極的にお薦めするものではありませんが…
「blogspot」ドメインでの記事があまりにも少なかったので…
敢えてチャレンジしてみました……主な過程は…ヘッダーナビゲーションの…
「Blogger」「Optimization」にまとめてありますので…
気が向いたら…併せてお読み下さい…
以上です…最後までお読みいただきましてありがとうございます…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿