SEO対策を調べているとGoogleの検索順位にはページ読み込み速度が関係しているそうです。
そのSEO対策のため、はてなブログでできるだけの高速化をしてみました！
前回ははてなの設定画面からできる簡単なものを紹介しましたが、今回はHTMLコートやCSS、スプリクトを使った上級編になります！
重要性の低いコードはヘッタやフッタに移動させる
上の方にJava Scriptなどを書いてしまうと画面を表示するまえにコードを実行するために、画面表示が遅くなりユーザーのストレスになります。
そのような処理は下の方に書き、処理を表示より後にする事で表示の速度改善になります。
例えば、はてブやFacebook共有数の取得するコードや、パンくずリストの構成などはフッタに移動させることができます。
注意するのは広告などその位置で表示したいものは移動できません。
ページの位置と関係しないスクリプトは移動することができます。
ライブラリの遅延読み込み
先ほど述べたようにページ上にあるheadタグ内で外部のJavaScriptやCSSを読み込むと遅延につながります。
ページの下の方でJavaScriptを利用して外部ファイルを読み込みましょう。
例えば以下のコードを記事下やフッタに入れることでJavaScriptやCSSの外部ファイルの読み込みを遅延させることができるようになります。
<script>
(function(){
letlink = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
document.head.appendChild(link);
})();
</script>
DNSプリフェッチの導入
外部ドメインの名前の解決をページ読み込みを外部から取得せず先に書いてあげることによって外部と通信する手間が省けます。
こちらは、はてなブログのドメインのDNSのプリフェッチです。
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com"/>
<link rel="dns-prefetch" href="//blog.hatena.ne.jp/"/>
<link rel="dns-prefetch" href="//cdn7.www.st-hatena.com/"/>
<link rel="dns-prefetch" href="//counter.hatena.ne.jp/"/>
こちらはグーグルアドセンスのDNSプリフェッチ
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com"/>
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net"/>
<link rel="dns-prefetch" href="//tpc.googlesyndication.com"/>
<link rel="dns-prefetch" href="//www.gstatic.com"/>
1行目や重複しているのは不要なので、これらを合わせると少し変わります。
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com"/>
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net"/>
<link rel="dns-prefetch" href="//tpc.googlesyndication.com"/>
<link rel="dns-prefetch" href="//www.gstatic.com"/>
<link rel="dns-prefetch" href="//blog.hatena.ne.jp/"/>
<link rel="dns-prefetch" href="//cdn7.www.st-hatena.com/"/>
<link rel="dns-prefetch" href="//counter.hatena.ne.jp/"/>
これらのコードははてなブログの「設定」から「詳細設定」の「headに要素を追加」き挿入してください。
重複しているコードを削除する
例えばアドセンスを導入している方はこのようなコードを導入すると思います。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-123456789"
data-ad-slot="9500743782"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
上記の赤で記した1行はページ内にひとつだけでいいのです。
なので「headに要素を追加する」にこの1行を入れ他の広告はこの1行を消しましょう。
手順
headに要素を追加するにこの1行を追加します。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
全てのアドセンス広告コードには上記のコードを消します。
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-123456789"
data-ad-slot="9500743782"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
今回はわかりやすくアドセンスのコードを例にしましたが、jQueryなどのライブラリ読み込みコードが重複していたら削除してしまっても構いません。
ソーシャルボタンの変更
はてなブログが用意しているソーシャルボタンはとても重いのでオリジナルのソーシャルボタンを使った方が早くなります。
しっかり検証されている方がいます。
[http://www.stdio.jp/entry/blog/social-button-speed-test:title]
オリジナルのソーシャルボタンの配置をするなら他ブロガーさんのものを参考にするといいでしょう。
画像の遅延読み込みをする
画像を画面内に入ったときに読み込ませる事で通信量を減らし高速化を図ります。
パソコンが使えて一括変換ツールで書き換え可能であればこちらの記事が一番わかりやすいです。
[https://blog.rokuzeudon.com/entry/lazy_loading:title]
私はデザイン設計から記事を書くところまでiPadなのでできません。
（こういう時にiPadだけだと不便）
一括変換できなかったり、面倒くさがり屋さんはこちらを参考にしてみてください。
[http://netabare4you.hatenablog.com/entry/lazy-load:title]
-
-
はてなブログを高速化して簡単SEO対策する！【初級編】
SEO対策を調べているとGoogleの検索順位にはページ読み込み速度が関係しているそうです。 そこでSEO対策のため、はてなブログでできるだけの高速化をしてみました！ 目次はてなブログ設定編トップペー ...
続きを見る
