2018-08-29T03:53:51Z

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

 投稿日 2018/08/08   

忘却録です。

結果

PageSpeed Insights

結果

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

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

GTmetrix

GTmetrix

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

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

通常の高速化

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

画像をインライン化

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

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

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

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

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

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

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

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

スクリプトの圧縮

通信量を減らします。

CSSの圧縮

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

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を削除するとページの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関連（その他）

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

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>
 コメントを投稿