ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » スタッフ» Googleクロームの新機能について
投稿日: 2017/06/22 投稿者:スタッフ
こんにちは!
今回は、Googleのデベロッパーツールのことを書いていこうと思います。
皆さんはデベロッパーツールのことをご存知でしょうか。
Googleクロームですと、キーボードの「F12」を押すと立ち上げることができます。
web制作を行っている方ならきっと知っていると思いますが、とっても便利なツールですよね。
例えば、スマホデバイスの見え方を確認できたり、
例えば、その場でソースコードを変えた場合の挙動を見ることができたり...と、
本当にweb制作を助けてくれるたいへん便利なツールだと思います。
そのGoogleクロームが6/5にリリースした最新のバージョン59から、さらに便利な機能がデベロッパーツールに追加されました。
追加された昨日はこちら。
★ページの軽量化: 未使用のCSSとJavaScriptを見つける
★フルサイズのスクリーンショットをキャプチャ
★リソースのロードをブロック
★非同期コードの検証
★コマンドメニューの統一
この中でも今回は1番目の、ページ軽量化の部分を説明します。
① まずはブラウザ上でいつも通り「F12」キーを押してデベロッパーツールを立ち上げます。
② 「Ctrl」+「Shift」+「P」を押し、「Show Coverage」を入力して選びます。
※Macの場合は「command」キーになると思います。
③ ページを再読み込みします。
すると、タブに使用されたコードの量と、ロードされた量が表示されます。
コードの重さも分かるので、不必要なコードは削除することでページの軽量化になるということです。
いかがでしたか?
こういった細かい点をメンテナンスしていくことで、ページの軽量化が出来ていくのだと思いますので、たまにはサイトをメンテナンスしてみてくださいね!