ブログ運営

はてなブログを高速化して簡単SEO対策する!【上級編】

f:id:kipiro:20190324170329j:plain

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などのライブラリ読み込みコードが重複していたら削除してしまっても構いません。

 

スポンサードリンク

ソーシャルボタンの変更

はてなブログが用意しているソーシャルボタンはとても重いのでオリジナルのソーシャルボタンを使った方が早くなります。

f:id:kipiro:20190327102200j:image

しっかり検証されている方がいます。

[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対策する!【初級編】 1
はてなブログを高速化して簡単SEO対策する!【初級編】

SEO対策を調べているとGoogleの検索順位にはページ読み込み速度が関係しているそうです。 そこでSEO対策のため、はてなブログでできるだけの高速化をしてみました! 目次はてなブログ設定編トップペー ...

続きを見る

特P 2特P 3

合わせて読みたい

合わせて読みたい

おすすめ記事

バイク用ガレージを借りるならハローコンテナ一択の理由 4 1

きぴろバイクの盗難やイタズラが心配だからガレージを用意しようかな… ついでに整備もできたらいいなぁ しかし賃貸や都内ではガレージをおけるスペースってありませんよね。 そんなときはバイク用ガレージを借り ...

下取りよりもバイク王の方が高く売れた話 14 2

きぴろどうせバイクを手放すなら高く売りたい そう思うのが普通ではないでしょうか。 私もバイクを乗り換える時に高く売って、その資金を新しいバイクに当てたいと考えていました。   そこで以前乗っ ...

音楽家が考えるバイクの良い音とは 24 3

このマフラーは良い音するなぁ! バイクのいい音ってなんだろう??きぴろ バイクに乗っていると度々「このバイク良い音する」みたいな話をされるのですが、私はバイクの良い音というのが理解できません。 私は音 ...

-ブログ運営
-, ,

© 2020 きぴろの日記