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

 投稿日 2018/08/08

忘却録です。

結果

PageSpeed Insights

結果

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

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

GTmetrix

GTmetrix

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

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

通常の高速化

通常Webページで共通の高速化関連

不要な要素を削除する

スクリプト、CSS、画像、HTMLで不必要なデータを削除する。

スクリプト

  • jQueryは、本当に必要ですか？
    • ネイティブJavaScriptで記述できませんか？
      • IE等のクラシック環境を諦めれば、ある程度簡易にネイティブJavaScriptで処理を記述できます
    • 小型なライブラリはありませんか？
      • ajaxだけ使用するなどの用途であれば、小型ライブラリで代用が可能です
  • そのスクリプトは本当に必要ですか？
    • なくても良いものは、削除することを検討してみては？
  • console.logは残っていませんか？
    • 本番環境では遅くなるだけ？

CSS

  • ライブラリは、本当に必要ですか？
    • 必要箇所が一部だけであれば、抽出するのもありです
  • 未使用のコードはありませんか？
  • 複雑な記述になっていませんか？
  • 重複して指定していませんか？

画像

  • その画像は、本当に必要ですか？
    • 文字、背景色などHTML構造で代用できませんか？
  • 使用サイズより大きな画像を配置していませんか？

HTML

  • style属性を多用していませんか？
    • CSSに分離することで重複を排除できることがあります
  • 複雑な階層構造になっていませんか？

画像のインライン化

小さいアイコンなどをBASE64変換して埋め込む。

アイコンであれば、SVG形式で埋め込むも要検討です。アイコンの色変更が必要な場合に重宝します。

読み込む外部画像数が減少するため、高速化が見込めます。

筆者は、FontAwesomeをCSSに埋め込みました。FontAwesomeが80KBぐらいあったので50KB程度削減できたはず。ただし、労力に見合うかどうかには疑問が残ります。

外部スクリプトを非同期で読み込む

  • scriptタグにasync属性を追加して非同期で読み込むように修正する
    • スクリプトが順序に依存する場合、defer属性を指定する

レンダリングブロックを減らすことで初回表示が高速化します。

外部CSSを非同期で読み込む

外部CSSの読み込みを待たずに描画することで初回表示を高速化します。外部CSSは、ないに越したことないですが、ある場合は有効な手段です。

画像の圧縮

通信量を減らします。

スクリプトの圧縮

通信量を減らします。

CSSの圧縮

通信量を減らします。
特に<b:skin>...</b:skin>内部を圧縮すると効果大です。

DNSプリフェッチする

外部ファイルのDNSを先読みでプリフェッチすることで、高速化します。

Blogger関連

Blogger特有のページ高速化

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

記事一覧の<data:post.body/>を<data:post.snippet/>に置き換える。

通信量が大幅に減少します。

標準のJS/CSSをインライン化

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

/*** コメント ***/
 #comments-block .avatar-image-container {
    height: 37px;
    left: -45px;
    position: absolute;
    width: 37px;
}
.comments .avatar-image-container {
    float: left;
    max-height: 36px;
    overflow: hidden;
    width: 36px;
}
 #comments-block.avatar-comment-indent dd {
    margin-left: 0;
}
 #comments-block.avatar-comment-indent {
    margin-left: 45px;
    position: relative;
}
/*** 埋め込みコメント ***/
.comments .comment-block {
    margin-left: 48px;
    position: relative;
}
.comments ol,
.comments ul {
  list-style: none;
}
.comments .comments-content .datetime {
    margin-left: 6px;
}
.comments .comments-content .user {
    font-style: normal;
    font-weight: bold;
}
.comments .comments-content .comment {
    margin-bottom: 16px;
    padding-bottom: 8px;
}
/*** プロファイル ***/
.profile-name-link {
    background: no-repeat left top;
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    min-height: 20px;
    padding-left: 20px;
}
.profile-datablock {
    margin: .5em 0;
}
.profile-textblock {
    margin: .5em 0;
}
.item-control {
    display: none;
}
.widget .widget-item-control a img {
    border: none;
    padding: none;
    background: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -ie-box-shadow: none;
    box-shadow: none;
}
/*** ページリスト ***/
.PageList li a {
    font-weight: normal
}
.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読み込み処理は大きいため、効果があります。

標準の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部分が減少します。

HTMLのコメントを減らす

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

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

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

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

ユーザのクリックアクションまでコメント入力欄の読み込みを遅らせる。

Bloggerのコメント欄を改善する
thumbnail
Blogger高速化の一環として実施したコメント欄の改善について。 不満点 埋め込み 標準では、高さが足りずスクロールバーを表示する スクリプトで表示するとiframeの領域が大きすぎることがある 標準で外部スクリプト( comment_from_post_ifram...
https://www.bugbugnow.net/2018/08/blogger-comment-Improvement.html

Blogger関連（その他）

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

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>
LINE
 コメントを書く