スマホでのはてなブログの表示が重い・遅いのでできること

スマホでのはてなブログの表示が遅すぎるんですよ。
自分のサイトはPageSpeed Insightsで高得点だから関係ないなと思った方はかなり要注意です。

本当にスマホで、かつ4Gや3G回線で、表示してみましたか？
PageSpeed Insightsでは処理が最適化されているかは判定してくれますが、ページの速度までは判定してくれません。

www.viaggiolog.com

はてなブログは何もカスタマイズしていない状態でもスマホサイトは遅いです。
遅い理由として以下の2つがあります。

はてなブログで提供されているJavaScriptが遅い
Google AdSenseのコードが遅い

どちらも標準機能として提供されている機能です。
つまり、ほとんどできることがありません。
それでも、なんとか足掻いて表示を早くしようという記事になります。

はてなブログヘッダを消す
- 設定方法
AdSenseで使用するドメインに対してPreConnectしておく
- 設定方法
AMP向けのパーツを使う
おわりに

はてなブログヘッダを消す

スマホ版のはてなブログヘッダの表示は非常に重い処理になっています。
現にスマホで表示してみてもらうと分かりやすいんですが、本文は表示し終わっているのにはてなブログヘッダだけは10数秒描画し続けるみたいな状態になっています。
はてなProかつレスポンシブデザインのテーマを使用している場合のみですが、表示しないようにすることができます。

僕の場合、ヘッダを非表示にしてしまうと、PCでの編集作業が非常にやりにくくなってしまうという問題がありました。とはいえ、ほとんどのアクセスがスマホからであることと、編集作業のやりやすさとユーザビリティならユーザビリティを優先すべきということで非表示にしました。

設定方法

はてなブログの「設定」→「詳細設定」→「ヘッダとフッタ」→「ブログにヘッダとフッタを表示しない（PC版のみ）」にチェックを入れます。
f:id:viaggiolog:20170610120043p:plain

AdSenseで使用するドメインに対してPreConnectしておく

以下のサイトにあるとおり、AdSenseの表示をなるべく早くするためにAdSenseで使用しているドメインに対してPreConnectしておきます。
https://www.philosophyguides.org/howto/how-to-load-critical-rendering-path-under-2-seconds/www.philosophyguides.org

設定方法

はてなブログの「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」に以下のコードを貼り付けます。

<link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://googleads.g.doubleclick.net" crossorigin>
<link rel="preconnect" href="https://stats.g.doubleclick.net" crossorigin>
<link rel="preconnect" href="https://static.doubleclick.net" crossorigin>

AMP向けのパーツを使う

AMP(Accelerated Mobile Pages)とはスマホの表示速度の向上を目的とした技術です。
スマホの表示速度の向上を目的とした技術ですから、各パーツもスマホの表示に最適化されているはず。
もちろんAMPページそのものにはなりませんが、Twitter埋め込みやソーシャルリンクなどはAMPパーツを使うことで高速化が可能です。

設定方法（下準備）

はてなブログの「設定」→「詳細設定」→「検索エンジン最適化」→「headに要素を追加」に以下のコードを貼り付けます。

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async=""></script>
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

設定方法（Twitter埋め込み）

Tweetを埋め込みたい場合、まずはTweetIdを調べる必要があります。
以下のURLの場合、「858848226459267072」がTweetIdとなります。

https://twitter.com/viaggiolog/status/858848226459267072

TweetIdがわかれば、以下のコードのdata-tweetidにTweetIdを記入し、Tweetを埋め込みたい場所に貼り付けるだけです。

<amp-twitter
	data-tweetid="858848226459267072"
	width="400"
	height="300"
	layout="responsive">
</amp-twitter>

設定方法（Instagram埋め込み）

Instagramも同様にshortcodeを調べる必要があります。
以下のURLの場合、「BUyx8HwhhHV」がshortcodeとなります。

https://www.instagram.com/p/BUyx8HwhhHV/

Tweetのときと同様にshortcodeをdata-shortcodeに記入し、埋め込みたい場所に貼り付けるだけです。

<amp-instagram
	data-shortcode="BUyx8HwhhHV"
	width="300"
	height="300">
</amp-instagram>

設定方法（Youtube埋め込み）

Youtubeも同様にvideoidを調べる必要があります。
以下のURLの場合、「SjyvB864d48」がvideoidとなります。

https://www.youtube.com/watch?v=SjyvB864d48

同様にvideoidをdata-videoidに記入し、埋め込みたい場https://www.youtube.com/watch?v=SjyvB864d48所に貼り付けるだけです。

<amp-youtube
    data-videoid="SjyvB864d48"
    layout="responsive"
    width="480" height="270"></amp-youtube>

設定方法(AdSense埋め込み）

support.google.com
レスポンシブ広告ユニットを作成し、data-ad-clientとdata-ad-slotを取得してください。

以下のコードに取得したdata-ad-clientとdata-ad-slotを設定し埋め込みたい場所に貼り付けます。

<amp-ad
layout="responsive"
width=336
height=280
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890"><!--Adsense-->
</amp-ad>