はてなブログを最速に仕上げる史上最強の高速化カスタマイズ設定！！
読み込み3.2秒！！
googleタグマネージャー有効！！
jqueryも有効！！
記事数表示は最大値である15記事！！
実用性 + 爆速 = 最強
シンプルな図式です。
元々の設定を高速化していまえば
記事の中で多少の文字色の変更や文字サイズの変更をしたところで
高速な描画は維持できます。
記事内での高速化は頑張らなくてもいいんです！！
サクッと高速化をして自由な執筆活動に勤しみましょう！！
早速設定方法を紹介
設定は大きく分けて
一般的な設定編と黒魔術編に分かれます。
細かい説明は省いて先に進めます。
一般的な設定編
いわゆる有名どころの高速化設定です。
解説記事は豊富ですし
このページを訪れる方なら既に適用済みの事も多いでしょうから簡潔に箇条書きします。
はてなスターの無効化
重いので外します。
はてブコメントの無効化
はてなブックマークのコメント表示は
かなり重くなるので高速化をするなら無効化必須。
jQueryの取得先を統一
jQueryを使っているなら必須ですね。
参考記事
はてなブログでjQueryの読み込み時間をゼロにする方法（はてなブログの高速化） – naenote.net
有料プラン向けの高速化設定
- キーワードリンクの無効化（pro）
- 公式の広告を非表示（pro）
- ヘッダとフッタを非表示（pro）
これらも全て行っておきます。
更にスピードを突き詰めるなら
- コメント欄の無効化
コメント欄そのものが重い上に
コメントされると更に重くなります、撤去しましょう。
- プロフィールの非表示
検索から流入してきた人にとって
これを表示させる為の遅延は無駄なので排除します。
意外としなくてもいい高速化設定
全ての高速化設定が効果的という訳ではありません
筆者の試してみた中で特にそこまでする必要はないかなという設定もあります。
標準ソーシャルボタンの完全無効化
Twitterのみ有効にしていますが
付属のソーシャルボタンで特に問題は感じていません。
結構軽くていい感じです。
パンくずリストの無効化
これもオフにして計測したところ誤差の範疇でした。
パンくずリストは実際にクリックされる事は滅多にないので無効化しても構わないのですが
google検索の結果に良い影響を与えるという説もあるので有効のままにしてあります。
黒魔術編
いよいよ黒魔術編です。
CSSファイルの圧縮＆インライン化
まずは自分のサイトのトップページから
ページのソースコードを表示してcssファイルの中身を取得します。
※必ずバックアップを取ってください
取得したccsの中身を下記のサイトで圧縮します
ここから先は、テーマにレスポンシブデザインを採用しているかどうかで
対応が分かれます。
レスポンシブデザインを採用している場合
先ほど圧縮したたcss文字列をコピーして
<style>
(文字列)
</style>
という形式でheadに貼り付けます
こうする事でスタイルやデザインcssの情報は
圧縮された状態で全てhead内に記述されました。
従来のデザインcssは不要なので削除します。
この時に/* Responsive:yes */という文字列を残しておいて下さい。
これでレスポンシブデザインを維持した状態で
cssの圧縮が可能となります。
ただし、記事の執筆時と
はてなブログ側の設定が変わっている可能性もあるので
しっかり適用されているかの確認を忘れないようにしてください。
レスポンシブデザインを採用していない場合
レスポンシブデザインを採用していない場合には
headに貼り付けるとスマホ用のページでも無駄にcssを読み込んでしまうので
proの場合にはPCデザインのタイトル下に貼り付けたうえで
「スマートフォン用にHTMLを設定する」にチェックを入れましょう。
無料アカウントの場合にはデザインcssに圧縮したcssを貼り付けます。
proの場合、デザインcssの欄はこのようになる。
そもそもjpeg画像を使わない
実は編集で事前に色を落とした場合には
圧縮率を高めたjpg形式よりもgif形式の方が画像のサイズが落ちる場合があります。
特に元々色の少ないPC画面のスクショ画像の場合には違いが出やすいので
選択肢の一つとして貼り付け前にサイズを比較してみましょう。
遅いスクリプトを先に読み込む
ベンチマークを取っていると
時々https://platform.twitter.com/widgets.jsがボトルネックになっている事が判明しました。
効果は不明（というか効果はない）ですが速度アップへの祈祷の意味を込めてこれもheadに持っていきます。
（この項目はプラセボ効果しか無いのでマネしなくていいです）
まあこんな所ですかね。
cssのインライン化はベンチマークよりも体感速度に対する影響が大きい印象です。
皆さんも様々な方法を駆使してブログをサクサクに仕上げてみて下さい。
