あとかのブログスマートフォン用の表示で見るあとかのブログ海外ドラマを中心に、日々のことや、不意に思い出した思い出等を書き綴ってます。昔、販売の仕事をしていたので、時々家電ことを書いてみたりします。【SEO対策】簡単にすぐできるブログの表示速度対策5選【はてなブログ】2020-01-13【SEO対策】簡単にすぐできるブログの表示速度対策5選【はてなブログ】ブログTwitterGooglePocketこんにちは、あとかです♪このブログに足を運んでいただき、ありがとうございます。スマホ等モバイルから開いている皆様には、ご迷惑をかけし、申し訳ございません。以前から、薄々感じていましたが、このブログの表示は非常に遅い様です。ブログの表示速度に関しては、SEOにも関連があると言われています。今回は、私自身の取り組んだ簡単にすぐできる、ブログの表示速度の対策5選について、ご紹介します。こまめにトリミングする。画像を縮小して、軽くする。「はてブコメント」「はてなスター」の表示を消す【はてなブログ】まとめブログの表示速度はSEOに関係がある?実は、「ブログの表示速度はSEOに影響する」ということは、Googleから正式にアナウンスされています。Googleサーチコンソールにも、昨年「速度(試験運用版)」の項目が新設されました。モバイル環境での表示速度については、検索者がスピーディに結果を得るということが重視されています。同じ内容のサイトなら、表示速度が速い方が検索の上位に来るということになるのです。Insights」ご存知と思いますが、ご自身のブログ(サイト)のURLを入力するだけで、ページの読み込みの評価を確認できます。Insightsトップページだけでなく、各記事(ページ)についても、表示速度が速いのか、遅いのか100点満点で評価が表示されますまた、モバイルとパソコン、それぞれで見ることができます。ちなみにこのブログは、この様な結果でした。パソコンは、まあまあの結果でした。ところが、モバイルの方は。遅いという結果になりました。実は、以前よりももっと遅くなっています。「▲」マークは、早急な対策の必要な項目です。「■」マークは、できるだけ対策した方が良い項目です。「●✔︎」マークは、対策不要の項目です。画面を下にスクロールしてみると、「改善できる項目」欄があります。いろいろな項目で、短縮できる時間を提案されています。「次世代フォーマットでの画像の配慮」に注目しましょう。気づいていらっしゃると思いますが、サイトの表示速度を遅らせる原因は、データ量の「重さ」です。「重さ」と言えば、やはり画像が一番の原因になっています。「オフスクリーン画像の遅延読み込み」という項目も気になると思いますが、とりあえず無視しましょう。これは、モバイルで表示される部分は限られるので、まず見えるところだけ優先的にさっと表示してしまうという対策です。後からしか見ない部分はゆっくり表示すると言う便利な話なのですが、すぐにできる対策はありません。例の「CSS」のようなものを使いこなせる上級の方々にしかできないと思います。不要な画像を削除するすぐにできる対策です。私は、何となく賑やかしのために貼っている画像が、かなりありました。何も画像がないのは寂しすぎますし、参考画像が無さすぎるのもSEOにも逆効果です。しても削れない画像も多いと思います。私は海外ドラマの話題の記事を書く際に、公式ホームページなどの引用画像を貼り付けることが多いです。それも、アフェリエイトのDVDのパッケージを貼ることで、かなり軽くなります。こまめにトリミングする。ご自身で撮影した写真は、かなり画像サイズが大きいと思います。最初から画質を落としてアップロードし、さらにトリミングの加工もしておきましょう。チリも積もればと言いますので、無駄な部分は切り取っておきましょう。画像を縮小して、軽くする。はてなブログの場合、写真を簡単に貼り付けることができます。画像サイズも、表示する際に勝手に最適化してくれています。便利なのですが、そのせいかめちゃめちゃ重たい画像のまま貼り付けてしまうことがあります。いった画像をまず調整してみるのが、表示速度改善の早道です。はてなブログの写真縮小の手順ステップ1:「写真を投稿」→「HatenaBlog(private)」↗️はてなブログの「写真を投稿」の上の、斜め矢印から「はてなフォトライフ」に入ります。「はてなフォトライフ」の「HatenaBlog」に入ってください。はてなブログで使った画像で、縮小したい画像を選びます。選ぶのはもちろん、先ほどの「次世代フォーマットでの画像の配慮」の中で、上位の画像です。ステップ3:「編集」「この画像を編集する」→ピクセル変更→ブログ貼り付け選んだ画像を直接「編集」か、「画像を編集」をクリックします。すると、画像サイズを入力できる画面になります。長辺が1200ピクセルというのは、はてなブログで自動で設定されるサイズです。元々が、大きな画像も1200ピクセルに編集されていると思います。私は、一応600ピクセルに設定しています。模索中ですが、100KBを目安に、出来るだけ下げるように調整しているところです。ご自身でお試しいただいて、調整いただくのが良いと思います。小さくしすぎると、画像がぼやけてしまうので、プレビューを見ながら最終調整してください。スマホのプレビューでも見えるか、パソコンの大きな画面でぼやけていないかをご確認いただくとうまくいきます。元々のサイズが小さい画像を、さらに縮小するとボケボケになってしまうと思います。文章で読むと難しそうに見えるかもしれませんが、やってみると案外簡単です。フォトライフには、1縮小した画像と、2元々の画像の両方が残っていますので、不要な方を削除してください。デザイン見直し【はてなブログ】1全体の画像見直しブログのヘッダー、タイトル画像の削除、サイズ調整。私は使用していませんが、ご自身でブログ名やそのヘッダー部分に、綺麗なタイトル画像を貼っている方も多いと思います。その画像が重いと、毎回開くまでが遅くなります。お作りになる「CSS」も重たくなる原因だそうです。様々なサイトで提供いただいている「コピペだけで使えるCSS」をお使いの方は、不要なものが残っていないか、一度ご確認ください。私もそうですが、理解していないままにやたらと使ってしまうので、不要になってもそのまま貼りっぱなしになっています。テーマを変えた方は、それ以前に使用していた「デザインCSS」部分などは不要な可能性が高いです。※削除する前に、必ずバックパップを取ってから作業をしてください。3シェアボタン凝ったものでなければ、それほど問題はないみたいです。設置しないと言うのも手ですが、はてなブログのベーシックなシェアボタンは最も軽いものだそうです。4ヘッダー、フッター非表示(はてなブログProの方)これは、はてなブログProの方だけです。ご存知と思いますが、はてなブログ専用のヘッダーとフッターが、非表示にできます。丁寧にブログを書かれている方は、「関連記事」を貼り付けることも多いと思います。一つ一つはそれほどではありませんが、貼り付けすぎると、意外と重くなります。不要なリンクを削除しただけで、表示速度がかなり改善します。「はてブコメント」「はてなスター」の表示を消す【はてなブログ】はてなスターは、ブログで他者と繋がっていることを実感でき、読んでもらっている励みにもなります。「はてなブログ」の売りであり、とても良いギミックだと思います。表示速度にはどうしても悪影響があります。実際に非表示にすると、ブログの表示速度はかなり改善します。そのため、私も今回から「はてなスター」を非表示にすることにしました。様子を見て、寂しくなって、また表示するかもしれませんが、一旦は非表示にしてみます。これまでスターをつけていただいた皆様、本当にありがとうございました!私からのスターは、当然これまで同様(それ以上に?)つけさせていただきます。今後ともよろしくお願いします。まとめ今回は、簡単にすぐできるブログの表示速度対策5選をまとめてみました。以前、似た記事を書いたのですが、リライトも兼ねて改めて書きました。Insights」でモバイルは22→33まで上昇しました。言ってもまだまだ赤の圏内ですが、今後は記事を一つ一つ見直していくしか無いと思います。少なくとも、この記事の表示速度が上がっていれば幸いです。最後までお読みいただき、ありがとうございました。23:55関連記事2020-01-05【2020年】Twitterを始めてみました。はてなブログPro娘と息子を持つ、昭和生まれのお父さんです。海外ドラマは吹き替え派です。Amazonプライムビデオ配信コンテンツを中心に、色々書き綴っていきたいと思います。▲スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。