2016.10.26スポンサーリンクはてなブログのページ読み込み速度は遅い、遅すぎます。はてなブログが遅いと言うのは感じていましたが、それに加え、自分でも機能を拡張するために、Javascript等を使用して更に重くしている現状です。GoogleもAMPの導入に取り組み、SEO全体の流れが「ページの表示速度」に重点を置いてきているので、このまま放置しておくと検索結果にも影響が出てきそうですね。画像の見直しCSS・Javascriptの圧縮CSSとJavascriptの整理CSSとJavascriptを外部ファイルに高速化の為に実施したことまとめ最終的な測定結果まとめページ表示速度改善計画はてなブログでもAMP対応は進んでいますが、まだベータ版の段階で導入するにはまだ様子を見た方が良いと個人的には思っています。そこで、はてなブログを高速化するために自分でできることをいろいろと試してみましたので紹介します。metrix」で調べてみました。測定したのはTOPページと、比較的文字数の多い記事の2点です。Insights」では、100点をMAXに表示速度の診断と修正箇所・修正案を出してくれます。ちなみに85点以上がパフォーマンスの高いサイトと判断されるそうです。100数値だけを見ると思っている程悪くないように思えますが、体感ではもっと遅いように感じます。Insightsよりも、もっと詳細に表示速度の診断と原因を調べてくれます。■TOPページ■記事ページTOPページも記事ページも評価はF。A、B、C、D、Eの次の“F“です...。他のはてなブログの方も調べさせて頂きましたが、僕のブログはリクエスト数が多すぎますね。余計なものを入れすぎw読み込み速度は約11秒となっていますが、体感ではもう少しかかっているようなイメージです。上記は僕のブログを測定した結果ですが、そもそもはてなブログ(公式のテーマをカスタマイズしていない状態)は早いの?という疑問があったので公式テーマのデフォルト状態の表示速度も測定してみました。そもそも「はてなブログ」が遅いのなら何をしても無駄ですもんねw使用したテーマは一番シンプルな「Life」です。Cまとめると、以下のようになります。比べてみると、やはり公式テーマのカスタマイズしていない状態の結果は良いですね!他のテーマでも調べてみましたが、測定結果に大きな変化はありませんでした。僕が余計なものを入れすぎていることがよくわかります^^;デフォルト状態でも早いとは言い切れませんが、はてなブログでの目標値は上記の数値ですね!はてなブログが遅い原因はてなブログのページ表示速度が遅い原因としてよく言われているのが、「はてなスター」「デフォルトのソーシャルボタン」「はてなブックマークコメント」「はてブ数の表示」です。どれも噂なので実際に自分でも調べてみました。Insights」を使用しています。「はてなスター」が遅いのは有名ですよね。PCではそれほど感じませんが、スマートフォンページを4G回線で見ると明らかに「はてなスター」がページ全体の読み込み速度を遅くしているように感じます。すなばいじりさん(id:psne)がおっしゃっていますが、「スクリプトが読み込まれないのでSEOでいう表示速度については特に影響はないようです。はてなスターが付いているかと言って「外部へリンクを貼っている=スパム扱い」という心配も、はてな側でrobots.txtによってブロックしているらしくGoogle側でスパムと判定されることはないようです。すなばいじりなんどめだナウシカ。気にせず付けておけば良いというお話です。psn.hatenablog.jpSEO的には影響は無さそうですが体感的には、はてなスターは読み込まれるのが遅いしやっぱり気になりますよね^^;僕も、はてなスターを外すべきか何度も悩んだ時期はありましたが、結局今も付けています。理由は、はてなブログでブログを書いているので「はてなブログ」らしさを残しておきたいという気持ちと、純粋にはてなスターが付くと嬉しいからですwちなみに「はてなスター」がある時と無い時で調べてみると以下のようになりました。100(-3P)※「+(プラス)」が改善「-(マイナス)」が遅いです。記事ページでは下がりましたが、ぶっちゃけ影響があるのか無いのかよくわかりませんwデフォルトのソーシャルボタン次にはてなブログが用意しているデフォルトのソーシャルボタンです。これはもう明らかに重いですよね!このデフォルトボタンが重いから多くの方が、他のソーシャルボタンを使っていると思います。このデフォルトボタンを設置した状態で測定してみると以下のようになりました。100(-4P)※「+(プラス)」が改善「-(マイナス)」が遅いです。※TOPには設置してないので計測していません。■結論やはりデフォルトのソーシャルボタン重いですね!いろんなブロガーさんがコピペで使えるおしゃれなソーシャルボタンを提供されているので変更した方が良いかもしれませんね!はてなブックマークコメントはてなブックマークのコメント欄を表示することが出来る機能ですが、こちらも重いと聞いたことがあります。このはてなブックマークのコメント欄を設置した状態で測定してみると以下のようになりました。100(変化なし)※「+(プラス)」が改善「-(マイナス)」が遅いです。※モバイルは非対応なので計測していません。数値に変化も無かったのでお好みで設置しても良いと思います。100(-2P)※「+(プラス)」が改善「-(マイナス)」が遅いです。※モバイルは非対応なので計測していません。若干ですが数値が下がりました。はてブ数の取得する為のリクエストが無くなるのでその分でしょうか。その他の原因その他の原因として考えられるのが広告ですね!ただ、収益を目的としているなら広告を外すわけにもいかないので、広告については難しいところですね!試しに、広告を全部はずした状態で計測してみました。100(+2P)※「+(プラス)」が改善「-(マイナス)」が遅いです。広告関係は非常に重いですね...。広告を外すと劇的に速度が上がりました。GTmetrixでもランクがFからDに、読み込み速度も11秒から5秒に改善されました。AdSenseはそんなに影響が無いように思えますが、その他のアフィリエイトバナーやネットワーク広告、そして楽天のウィジェット辺りは、ページの表示速度に大きな影響があると思います。このような結果が出ても広告を全て外すという選択にはならないのが辛いところですね...^^;それでも、広告枠を見直して効果の悪い部分は外すようにしようと思います。他には、はてなブログではパンくずリストの機能が無かったので、ユーザーさんが考えた非公式の「パンくずリスト」を使っている人も多かったと思います。僕もそうですが、こちらを少し前にリリースされた公式の「パンくずリスト(PCのみ)」に変更することによって無駄なスクリプトが減るので多少の変化はあるかもしれませんね。改善策はてなブログが遅い原因としてよく言われているものを調べてみましたが、僕が調べた限りは「デフォルトのソーシャルボタン」「広告」以外は大きな影響は無いように思えました。すべきなのか??こちら側で出来ることは限られてきますが、僕は画像の見直し、CSS・JavaScriptの圧縮とCSS・JavaScriptの整理を行いました。画像の見直し画像の見直しというのは、画像の圧縮ではなく、ロゴ等全ページに表示される画像をサイズを抑えた状態で作り直し再掲載しました。記事中の画像については掲載に意識してサイズを抑えていたので今回は修正していません。(本当はすべきでしょうが面倒なので放置w)CSS・Javascriptの圧縮こちらは某有名サイトのCSSの一部です。見てもらったらわかるように、暗号のようにスタイルシートの記述が並んでいますよね!無駄なスペースや改行を削除するだけでもファイルサイズを約70%に抑えられました。管理面ではわかりにくくなりますが、絶対この方が良いと思います。JavascriptのコードもCSSと同様に無駄なスペースや改行を削除する事でサイズを抑えることが出来ます。CSS・Javascriptの圧縮方法についてはこの記事が参考になると思います。QiitaCSSとJavascriptの整理ブログを初めて時間が経過すればするほど、より良くするためにデザインや機能をいじることが多いと思います。すると知らないうちに、使っていないCSSやJavascriptの記述が残っていることがあります。僕も今回整理している中で、不要な記述が結構ありました^^;それを削除するだけでも、無駄なアクションが無くなるので読み込み速度は早くなると思います。CSSとJavascriptを外部ファイルに外部ファイルについては、ファイルを保管できるサーバーを持っている方が対象ですが、CSSとJavascriptを外部に置いて外部ファイルとして読み込むことでブラウザのキャッシュを利用しよう!という方法です。ブラウザのキャッシュ機能は、閲覧者のローカルのパソコン上に一度開いたページを記録する事で、次に訪問した場合には以前のデータを元にページを表示させるのでページの表示が早くなるという感じですね!CSSやJavascriptは「.htaccess」で有効期限を設定するのもアリですね!僕はCSSに1日、Javascriptを30日の有効期限を設定しました。外部ファイルにする場合、CSSは一つのファイルでしょうが、Javascriptも一つのファイルに収めた方が良いと思います。ブログ上で複数の機能を追加するためにいろんなスクリプトを使っている方も多いと思いますが、その場合もそれぞれの外部ファイルを作るのではなく、1つのファイルにそれぞれのスクリプトをまとめた方が読み込み速度は早くなると思います。繰り返さなくてもCSSを編集してサーバーにアップするだけで編集できるのでデザインを触るときには非常に便利です。高速化の為に実施したことまとめ上記で書いた以外にも細々といろいろやってみたことをまとめました。広告を削除することは出来ませんが、画像の見直し、CSSとJavascriptの整理・圧縮等いろいろとやってみました。その結果、最終的な測定結果は以下のようになりました。※「+(プラス)」が改善「-(マイナス)」が遅いです。大きな変化とまではいかなかったですが、多少は変化があったように思います。metrixでは相変わらずの”F”ランクでちょっとへこんでます...。僕の場合は、間違いなく広告ですね!少し減らしましたが、今後は各広告枠の効果を見ながら見直していきたいと思います。それにしても遅い...。ならないものでしょうかねぇwまとめ今回、はてなブログの高速化の為にいろいろとやってみましたが、なかなか思うようには速度は改善しませんね!原因としてはっきりとしている「広告」をいかに抑えつつ、無駄なスクリプトを入れないが、高速化のための第一歩だと思います。広告は自分の責任ですが、機能面についてはもう少しはてなさんにも頑張ってもらいたいですね!(特にスマートフォン!)今後も様子を見ながら、はてなブログの高速化については取り組んでいこうと思います。スポンサーリンクスポンサーリンクはてなブログSEOシェアするTwitterFacebookはてブPocketLINEコピーフォローお願いします!スポンサーリンクカツヲ晴れ時々晴天なり関連記事はてなブログ祝!読者100人達成!皆さんありがとう!はてなブログの運営を開始して6ヶ月。読者さんが100人を突破しました!はてなユーザーさんだけで100人達成出来たことは本当に嬉しい限りです。そこで、読者登録して下さっている方の中から数名の方を紹介させていただきたいと思います。はてなブログはてなブログ|AMPページに非公式の広告(AdSense)設置方法の問題点AMPページにAdSense広告を掲載する方法として非公式のやり方とその問題点を報告します。はてなブログはてなブログ|管理画面で読者一覧が確認できるようになったよ!はてなブログの管理画面(ダッシュボード)に読者一覧を確認出来るようになったようです。はてなブログはてなブログ|公式パンくずリストが追加!SEO対策(内部リンク)強化にも期待!はてなブログに、公式のパンくずリスト機能が追加されました!簡単に説明すると、閲覧者が今サイト内のどの階層、どの位置にいるのかを確認する為のリンクリストの事です。視覚的な効果だけではなく、SEOにも効果があると言われており、Google等の検索エンジンのクローラーの巡回の手助けや、内部リンク対策としても有効とされています。はてなブログはてなブログ|記事の直下に広告を掲載する方法はてなブログでは「記事の下」に広告タグを設定しても、ソーシャルボタンの下に広告が表示されます。そこで広告を記事の直下(ソーシャルボタンの上)に配置する方法を紹介します。はてなブログブログサービスがSSLに対応し始めたので、はてなブログも準備しておいた方が良いかもね!最近になって、アメーバブログ、楽天ブログ、Yahoo!ブログが立て続けにSSL対応を発表しましたが、いよいよレンタルブログサービスにもSSL(HTTPS)の流れが来てますね!僕が利用している「はてなブログ」ではまだアナウンスはありませんが、他のブログサービスが対応し始めているので、はてなブログのSSL対応もそう遠くないと思っています。そこで、はてなブログがSSLに対応した場合を想定して、実際に対応された際に障害になりそうな点をまとめてみました。はてなブログはてなのブログカード風にリンクをカスタマイズする方法!はてなブログのブログカードは「iframe」を使用していますが、iframeを使わずにブログカード風のリンクボックスを生成する方法を紹介します!CSSを使えばデザインをカスタマイズすることも可能です!はてなブログはてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!はてなブログでは画像にalt、title属性を編集することが出来ませんが、ある二つのツールを使えば編集することが出来るのでその方法を紹介します!はてなブログはてなブログ|アクセスアップの為にやっておきたいグループ登録はてなブログのグループ登録について説明すると、はてなブログを利用されている方たちのリンク集ですね!ブログ開始時にカテゴリーを選択し、「グループに参加して、同じ興味のブログ仲間とつながりましょう!」というものです。単なるリンク集としてだけではなくブログを更新すると登録しているカテゴリー上で自分のブログが紹介されます。最近、始めて色々な所を見ていると、表示速度のやけに遅い処があるのがわかってきました。AM>ぐっちぃさん参考にして頂きありがとうございます。僕のブログもまだまだ遅いですが、お互い頑張りましょう!カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。フォローお願いします!スポンサーリンクよく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。2015年11月サイト内検索よく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08はてなブログ|表示速度が遅いので改善するまで足掻いてみた!2016.10.262019.08.07はてなブログ|アクセスアップの為にやっておきたいグループ登録2016.01.262019.08.08ありがとう!はてなブログ。4年間クソお世話になりました!2019.09.12はてなブログ|記事の直下に広告を掲載する方法2016.01.202019.08.07ページの表示速度|Googleの指示通りに改善したけどこれがはてなの限界ですか?!2017.08.182019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。ダイエットAMPプール姫路城メリケンパークパグ犬YoutubePHPInstagram著者カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。検索タイトルとURLをコピーしました。