• Windows
    ウィンドウの左上の端っこをダブルクリックすると、ウィンドウを閉じられる
    2012年9月29日
  • 旅行
    【レポート】Wire13行ってきた - 2013/09/14
    2013年9月18日
  • Windows
    Windowsが起動しなくなったらまず確認するべき8つの項目
    2014年12月5日
  • Windows
    コマンドプロンプトで名前にスペースが入ってるフォルダを指定する方法
    2013年4月5日
  • Webサイト
    写真や動画からノスタルジックな雰囲気のあるPVを簡単に作成してくれる『Magisto』がすごくいい感じ。
    2014年1月14日
  • Mac
    【MacOS】Command+Hでウィンドウ非表示にするのを防ぐ暫定策(Yosemite版)
    2015年10月7日
  • その他
    エヴァンゲリオンとほぼ同サイズ! 茨城の田舎にそびえる超巨大仏像『牛久大仏』を見に行ってきた
    2013年8月27日
  • ニュージーランド
    【NZ】ニュージーランドのワーホリ保険はユニケアが安くて良し! 1年間でだいたい6万円、日本語の登録代行もあるよ。
    2016年11月3日
  • 旅行
    【NZ】もしもの時のために「在留届」を提出! 在留届の出し方をまとめました
    2016年11月30日
  • Excel
    【Excel】「20150325」という数字の羅列を日付フォーマットに直す方法
    2015年4月11日
  • Mac
    Macのトラックパッドでの複数指でのスワイプ機能が直感的に便利で良い感じ!
    2013年1月3日
  • ネットワーク
    通信確認メモ。 Windowsで、どのソフトが特定ポートの通信を送信しているのか確認するコマンド。
    2014年2月18日
  • Excel
    【Excel】グラフの折れ線をなめらかに表示する方法 (Windows版)
    2018年2月5日
  • Excel
    【Excel Tips】 同じフォーマットの複数シートを編集する時に作業がラクになるテクニック
    2014年10月4日
  • Excel
    【Excel】IF文で使える全・演算子まとめ
    2017年8月20日
  • 旅行
    東雲・豊洲・お台場エリアで運動に使える役立つ9つの公園・運動場まとめ Part2
    2015年9月27日
  • Instagram
    Instagram写真をブログ上に貼り付け(埋め込み)する方法(2015年10月版)
    2015年10月12日
  • Excel
    【Excel】データ入力時間を圧倒的短縮!「フラッシュフィル」機能を活用しよう
    2017年10月5日
  • Windows
    【Windows10】スタートに表示される「おすすめ」を二度と表示しなくさせる方法!
    2017年12月15日
  • 旅行
    【NZ】国際免許証は即日発行してもらえます。 実際に申請・受け取りまでをまとめました
    2016年11月27日
  • Excel
    【Excel】7分の1まで縮小!画像で肥大化したファイルサイズを小さくするワザ
    2013年8月14日
  • コマンド
    【バッチ勉強】Windowsのダウンロードフォルダをスケジュールで定期的に削除する
    2014年11月26日
  • Mac
    MacBook Airを初期化する方法 (2012年モデル・Mountain Lion)
    2015年10月8日
  • コマンド
    文字列のコピーから辞書登録ウィンドウを開くまで一瞬で行うショートカットキー
    2012年5月22日
  • ニュージーランド
    【NZ】ニュージーランド・ノマドツアー その14 ニュージーランド最南端・スチュワートアイランドの「ラキウラトラック」へ
    2017年8月13日
  • Webサイト
    国土サイズを地図上で自由に比較できるサイト「The True Size Of...」
    2017年11月5日
  • Kindle
    Kindle for Macが日本アカウントにようやく対応! 和書が読めるようになって、これはありがたい…
    2015年2月14日
  • Windows
    【Windows10】通知サウンドを鳴らさないようにする方法
    2015年8月8日
  • Excel
    【Excel】作業効率化!知らぬと損する必須ショートカットキー15選
    2015年2月15日
  • iPhone
    iPhoneみたいにワンタッチで画面の一番上まで戻りたくて…色んなソフトのショートカットキーを調べてみた
    2013年4月25日

ページ表示速度・改善計画実施中です。

ページ表示速度はSEOにも影響してきます。 ページ表示速度が遅いページは検索エンジンの掲載順に不利になるばかりか、実際のユーザもページが表示されるまで一定以上の時間がかかると、表示されきるまで待たずにページから出て行ってしまう…という情報もあるぐらい。

Tipstourはと言うと、実はあんまり芳しくなくてですね。 一般的に理想と言われる速度よりも遅い…という結果が出てしまっているもので、対応策を色々と試行錯誤しつつ改善しようとしているわけです。

まだ、結果はあんまり出てないけども。

 

そんなわけで、SEO対策上に使えそうなツールも、そのうちいくつか紹介していこうかなと思います。 まずはChromeだけで出来る、どの要素がページ表示速度のネックになっているのかを調べる方法です。

スポンサードリンク

関連記事

Chromeデベロッパーツールを使う

どの要素(画像やスクリプトなど)が悪さをして、ページ表示速度が遅くなっているのかを見極めるのは重要です。

言うまでもないですが、極端に表示に時間がかかっている要素、ボトルネックがあれば、それを停止するなり改善するなりという対応が取れるからです。

このネックとなる要素を見つける方法ですが、今回はGoogle Chromeのデベロッパーツールを使います。

ちなみにデベロッパーツール自体は、下記の記事でもさらっと紹介してました。

Chromeを更にディープに使うための知られざる10の小技まとめ(2015年11月版) | Tipstour

デベロッパーツールの開き方

デベロッパーツールを開くには、まずChrome右上のメニューボタンをクリックして「その他のツール」へ。

Cap_2016-05-11_15_20_30

続いて「デベロッパーツール」を選択。 これだけです。

Cap_2016-05-11_15_20_36

すると、こんな感じの画面が表示されるはず。 ここではWebページの開発者にとって役立つ機能が、たくさん揃ってます。 無料でこんだけのツールを提供しているGoogle、相変わらず太っ腹。

Cap 2016-05-11 15.20.59

ネットワーク読込速度を計測する

とりあえず今回はページ表示速度に絞って説明します。

デベロッパーツール上部のメニューから「Network」を選択。

Cap_2016-05-11_15_21_05

するとこんな感じの画面に移動します。 まだページ読み込みを実際に行っていないので、ここには何も表示されてません。

Cap 2016-05-11 15.21.16

実際に再読み込みして計測してみる

ここで改めてページを再読み込み(リロード)しましょう。 すると、こんな風に計測が始まるはず。 計測は勝手に終了します。

Cap 2016-05-11 15.21.27

読込時間とそのタイムラインの形式で図式表示されるので、視覚的にどの要素の読込に時間がかかっているのか、把握しやすいですね。 (1000ms = 1秒)

Cap 2016-05-11 15.22.05

どの要素がネックなのかを調べる

タイムラインの下に表示されているのがページ読み込み時に実際に読み込まれた要素の一覧。 ここで「Time」でソートをかけると、どの要素が一番時間がかかっているのかわかりやすいです。

Cap 2016-05-11 15.21.47

404などのHTTPエラーが返ってきている要素については、赤色で表示されたりもするので、エラーつぶしにも役立ちますね。

さらに一覧の要素をクリックすると、こんな感じでヘッダー部分やプレビューなどが見れたりもします。 読込に時間がかかってる要素はこうやって更に詳しく調べてみる、というのが進め方のセオリーかな。

Cap 2016-05-11 15.47.25

スポンサードリンク

 

とにかく、非常に便利な機能が標準でChromeには搭載されてます。

ただブラウジングするだけなら使うことはないけども、Webサイトやブログを運営する上ではいつか役に立つツールだと思います。

とりあえず、紹介までね。

それでは!