Bloggerの表示速度を高速化する

投稿日     更新日 

忘却録です。

結果

PageSpeed Insights

PageSpeed Insights

最後の1点は、ブラウザのキャシュ活用です。adsbygoogle.js, analytics.jsが問題となっていますが、外部ファイルのため、諦めです。

また、サーバの応答時間によっては、86点ぐらいになる不安定な数値だったります。サーバの応答時間も対応しようがないため、諦めです。

スクリプトの遅延読込みを実装したことで更に高速化しました。安定して100点満点を獲得できるようになりました。

GTmetrix

GTmetrix

問題はだいたいPageSpeed Insightsと同じものを指摘されています。

ページの読み込みが1秒切ったので個人的には満足しています。

こちらも更に高速化しました。500msを切りました。ただし、こちらは指摘が残ったままです。ブラウザキャシュと数バイトの圧縮漏れが指摘されています。

Lighthouse（Audits）

Lighthouse

これも、満点が取れました。通常は白背景ですが、満点だと黒背景になって花火が打ち上がるようです。ナイスサプライズですね。

補足

裏話として、トップページは広告なしのため、広告ありの記事ページより格段に早かったです。上記で計測しているのはトップページです。ですが、スクリプトの遅延読み込みの実装により、高速化した結果GoogleAdsense配置ページでも高速化しました。現在は、記事ページでも上記の計測結果と遜色ない数値を叩き出します。

スクリプトの遅延読込みは、下記記事参照です。

ウェブページ共通の高速化を実施する

長くなったため、記事を分割しました。

標準のJS/CSSを削除する

インライン化する

外部ファイル読み込み数が減少するため、高速化が見込めます。
不要な部分は削除するとなお良いです。当サイトは下記のCSSを除き、全削除です。

.PageList li.selected a {
  font-weight: bold;
  text-decoration: none
}

標準のJSを削除する

widget.jsが不要な場合、htmlタグにb:if='false'を指定する。ただし、widget.jsを削除すると一部のwidget部品が動作しなくなります。

<html b:js='false'>

plusone.jsも不要な場合、</body>タグを以下の記述に置き換える。

&lt;!--</body>--&gt;&lt;/body&gt;

両方共不要な場合、上記の両方の修正を行うとwidget.jsの読み込み部分のコメントが削除されるため、不要なHTML部分が減少します。widget.js読み込み処理は大きいため、効果があります。

※問い合わせフォームは、GoogleAppsScriptで代替えできます
　GoogleAppsScriptでお問い合わせフォームを作成する
※標準JSを削除すると下記ページの幅高さが正しく表示できないようです（Stylus等で対応可能です）
　Blogger管理画面 > レイアウト

標準のCSSを削除する

widget_css_bundle.cssが不要な場合、htmlタグにb:css='false'を指定する。ただし、widget_css_bundle.cssを削除すると、ページの表示が崩れることがあります。必要部分はインライン化しましょう。

<html b:css='false'>

authorization.cssも不要な場合、</head>タグを以下の記述に置き換える。

&lt;/head&gt;&lt;!--</head>--&gt;

両方共不要な場合、上記の両方の修正を行うとauthorization.cssの読み込み部分のコメントが削除されるため、不要なHTML部分が減少します。

コメント入力欄の読み込みを遅らせる

ユーザのクリックアクションまでコメント入力欄の読み込みを遅らせる。iframeの外部要素の読込みを遅らせることでページ表示速度が高速化します。

テンプレートタグを使いこなす

記事ページとそれ以外の分離

<b:if cond='data:view.isSingleItem'>や<b:if cond='data:view.isMultipleItems'>で記事ページとそれ以外を分離できます。記事とそれ以外のページでは必要なJavaScriptやCSSやSVGが異なります。最適なコードのみを送信することで通信量を最適化できます。

記事一覧の本文を省略表示

検索ページの記事を<data:post.body/>から<data:post.snippet/>に変更する。通信量が大幅に減少します。（省略以前にタイトルと画像だけでもいいかも…）

HTMLのコメントを減らす

Bloggerのテンプレートで<!-- ... -->コメントアウトを使用している場合、HTMLの圧縮を指摘されます。

対応としては、不要なコメント箇所を削除する。テンプレートの可読性から小規模（例：<!-- .widget-footer -->）なものは可読性の観点から残したほうが無難です。大規模（数行程度）のものは、<b:comment>で消去する方法があります。（renderはデフォルトでfalseのため、省略が可能です）

<b:comment render='false'>
...
</b:comment>

不要なJavaScriptを減らす

更新日をJavaScriptなしで表示する

Bloggerで更新日を表示している場合、旧テーマ（ウィジェットバージョン１）ではテンプレートタグの関係で更新日の書式を指定するにはJavaScriptを使用する必要があります。新テーマ（ウィジェットバージョン２）とすることで更新日のテンプレートタグを使用できるようになるため、更新日用のJavaScriptを排除できます。

SyntaxHighlighterを必要最小限読み込む

個人的な話ですが、ソースコード表示用にSyntaxHighlighterを使用しています。

ソースコードがあるページは問題ありませんが、ソースコードがないページでもSyntaxHighlighterを読み込みます。無駄です。ソースコードがない場合、SyntaxHighlighterを読み込まないように変更することで高速化します。

自作のシェアボタンを設置する

JavaScriptを使用しない単純なリンクのみのシェアボタンを自作することで高速化できます。

スクリプトの読込みを遅延する

初回読み込み時にスクリプトの読込みを遅延することでページ表示速度を高速化します。

その他

自己満足レベルの高速化案です。やる意味があるか疑問が残るものです。

favicon.icoを先に読み込む

BloggerかGTmetrixかブラウザかだれの仕様かわかりませんが、ページを読み込むと読み込みの最後にfavicon.icoを読み込んでいます。地味に読み込みが遅いです。ページ内でfavicon.icoを使用すると、最後のfavicon.icoの読み込みはなくなるため、高速化します。

匿名コメントの画像を読み込まない

<data:comment.authorAvatarImage/>でコメントの画像を読み込ますが、匿名の場合blank.gifを読み込みます。blank.gifは、43Bの画像ですが、表示に影響を与えません。配置に関してもposition: absolute;が指定してあるため、なくなっても他要素に影響を与えません。端的に不要な要素です。

匿名の場合、挿入するHTMLが180文字（言語依存？）なのを利用して下記のようにblank.gifの場合のみ削除が可能です。（画像がある場合、400文字程度になります）

<b:if cond='data:comment.authorAvatarImage.size != 180'>
 <data:comment.authorAvatarImage/>
</b:if>

※最終的にコメント画像は、不要と判断したため、削除しました

ウィジェットを使わない

ヘッダーや著作権表示などのBlogger固有機能がほぼ不要なウィジェットをHTML直書きに置き換る。Blogger内のサーバ処理次第では高速化できるかも。最低限sectionやwidgetなどの不要タグを削除できる。

不要なテンプレートの行を削除する

テンプレートを編集していくと、ときたま一切通過しない行がでてきます。テンプレートの行数を減らすことで、Blogger内のサーバ処理次第では高速化できるかも…。

コメントを書く