ウェブページの読み込みが遅いときはLighthouseで改善案を見て速度改善する（ひとり DevTools Advent Calendar 2020 – 15日目） | Ginpen.com
15 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 ウェブクライアント側のパフォーマンスは主に読み込み時と実行時のふたつに分けることができます。今回はそのうち読み込み時のパフォーマンス改善について。 Lighthouse パネルのボタン一発で改善案が出てきます。その指示に従うと良いでしょう。 先にまとめ DevTools Lighthouse パネルを使う ボタン押すだけ 速度以外にもアクセシビリティとか SEO とか計測できるツール 改善案を提示 改善前に計測して、改善後と比較する ファイルサイズを減らすのが基本方針 Lighthouse を使った計測 さて計測なんですが、Lighthouse が初手として一番簡単かつ最後まで効果的です。なんてったってボタンを押すだけ。 DevTools 内にあり、ボタンを押すだけで手軽 結果が
CSSを最適化してページの読み込み時間を高速化する方法
CSSを最適化して、ページの読み込み時間を高速化する方法を紹介します。 シンプルなCSSのファイルをはじめ、大規模プロジェクトで使用されるCSSまで、すべてのCSSに効果があるテクニックです。 Optimizing CSS for faster page loads by Tomas Pustelnik 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 読み込みに時間がかかるのはなぜか？ スタイルシートのファイルサイズを制限する クリティカルCSSを使用する 遅延読み込みのスタイルシート スタイルシートにコード分割を使用する まとめ はじめに 先日、私は自分のWebサイトの読み込み時間を改善することにしました。すでにかなり高速にロードされていましたが、まだ改善の余地があり、CSSの読み込みがその原因の1つであることが分か
Chrome クリーンアップ ツール - Google Chromeのブラウジング環境をクリーンナップ MOONGIFT
Google Chromeは開発者を中心として人気あるブラウザです。しかし外部のソフトウェアの影響によって、動作が不安定になることがあります。場合によっては意図せずインストールしたマルウェア的ソフトウェアもあるでしょう。 そんな時には今回紹介するChrome クリーンアップ ツールを使って環境を自動的にリフレッシュしてみてはいかがでしょう。 Chrome クリーンアップ ツールの使い方 Chrome クリーンアップ ツールはごくごく簡単なソフトウェアで、ダウンロードした実行ファイルを起動するだけです。 筆者の環境では該当するソフトウェアはなかったようです。 削除対象のアプリケーションを確認できます。これらがあるとChromeが不安定になる恐れがあるとのことです。 Webブラウザは普段のネット生活の中で必ず使われる必須のツールになっています。そんなツールが不安定になるとストレスも溜まるはずで
Adblockよりもはるかに軽い広告除去ツール「µBlock」を使ってみました
ウェブページの広告を非表示にすることで表示速度をアップしようとAdblockなどの拡張機能をインストールしてみたものの、かえって動作が重くなってしまうということがあります。そこで、広告を非表示にできAdblockよりもはるかに軽いと評判の拡張機能「µBlock」を使ってみました。 gorhill/uBlock · GitHub https://github.com/gorhill/uBlock ◆µBlockについて 広告を非表示にしてくれるブラウザの拡張機能としては「Adblock」が圧倒的に有名ですが、最近、企業からお金をもらってホワイトリストに追加するという動きをAdblockが見せ始め、デフォルト設定で表示される広告が増え、さらに、「以前より動作が重くなった」という意見がちらほら聞こえ始めています。 GoogleやAmazonは広告を消す拡張機能「AdBlock Plus」にお金を
データを圧縮転送してChromeを高速化する拡張機能「Data Compression Proxy」
AndroidとiOS版のChromeにはSPDYプロトコルですべてのHTTPトラフィックをGoogleのサーバーに転送することで、データ使用量を最大で50％削減してウェブブラウジングを高速化できる「データ圧縮と帯域幅管理機能」が備わっています。この帯域幅管理機能をPC版Chromeでも使えるようにして高速ブラウジングを実現するChrome拡張機能が「Data Compression Proxy」です。 Chrome ウェブストア - Data Compression Proxy https://chrome.google.com/webstore/detail/data-compression-proxy/ajfiodhbiellfpcjjedhmmmpeeaebmep インストールするには「無料」をクリック。 「追加」をクリック。 すると画面右上に緑色のマークが出現しており、アイコンを
Google Chrome の履歴をスピーディーに検索できる拡張機能「Holmes」 : 二十歳街道まっしぐら
HolmesはChromeの履歴をスピーディーに検索できる拡張機能です。 Chromeに保存された検索履歴を素早く検索し、そのページを開くことができます。 ショートカットも用意されているので、慣れると非常に便利かと。 以下に使ってみた様子を載せておきます。 まず「Holmes」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 このようにChrome内の履歴を検索できます。 とても早く検索してくれストレスなく開くことができますよ。 Ctrl+数字キーで検索結果のページを開けます。 また、Chrome標準の検索バーに「*」を入力してTabキーを押すことで、 履歴の検索をすることも可能。 履歴を検索するときに便利なので入れておいて損はないですね～。
動きが重くなったGoogle Chromeを速くする「OneClick Cleaner」
動きが速く、なおかつ高機能なことが売りのGoogle Chromeですが、使っているうちに重くなってきてしまうのは、どのブラウザでも同じこと。どうしても使い勝手が悪く感じるようになってしまいます。 重くなる原因には、ブラウザやアプリのキャッシュやcookie、閲覧やダウンロードの履歴など、さまざまなものがあります。 今回は、このようにゴミが溜まっている状態を開放し、Chrome本来の動きを取り戻してくれる拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Chromeにたまったデータをワンクリックで削除できる拡張機能 「OneClick Cleaner for Chrome」は、Google Chromeのプロファイルに溜まっている不要なデータをワンクリックで削除することがで
Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」
Google ChromeでサイトパフォーマンスのボトルネックをチェックできるChrome拡張「PageSpeed」を紹介します。 この拡張を利用すれば、「ブラウザのキャッシュを活用する・圧縮を有効にする・CSSスプライトに画像をまとめる」といったパフォーマンスの最適化のための項目や、その詳細なデータを確認することができます。 １．インストール Using PageSpeed Insights for Google Chromeのページにある「Install PageSpeed Insights」またはその左のアイコンをクリック。 ページ右側にある「CHROMEに追加」をクリック。 「追加」をクリック。これでインストールが開始します。 インストールが完了しました。 ２．使い方 Windowsの場合、測定したいページを表示した状態で「F12」をクリックして、表示されたデベロッパーツールの右側
Chrome拡張機能を用途によってグループ分けして切り替える「Context」重いChromeとサヨナラできる
Google Chromeといえば、拡張機能が豊富で、便利なものが多いことも特徴。それゆえ、拡張機能を入れすぎて壊れてしまったり、重くなってしまうことも多々あります。 そんなときに、Google Chromeが重いことや、ボタンが増えすぎてしまう状態を解決してくれる拡張機能をご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! Chrome拡張機能をグループ分けして切り替える拡張機能「Context」 「Context」は、Google Chrome 拡張機能を用途ごとにグループ分けし、状況によって利用するものを切り替えるChrome拡張機能。 設定した拡張機能以外を止めることができるので、Google Chormeのメモリ消費量を抑えることができます。 用途によって使う拡張機能を切り替
ついに出た！Chrome版「Page Speed」の使い方
2011/3/22に、GoogleがようやくGoogle Chrome版「Page Speed」拡張機能を公開しました。 「Page Speed」は、項目をある程度理解できれば自分や自社のサイトの表示速度の改善にとても役立つツールです。 この記事では、「Page Speed」のインストール方法から各調査項目の見方や改善方法を中心に使い方を解説します。 ぜひ、ご自身のサイトの改善に役立てていただければと思います。 そもそも、なぜサイトの表示速度を速くする必要があるのか？ 例えば、Amazonの調査によると「表示速度が0.1秒遅くなると、売上が1％減少する」といい、Googleの調査によると「表示速度が0.5秒遅くなると、検索数が20％減少する」と言われます。 また、GoogleはWebページの読み込み速度をアルゴリズムに取り入れたことを発表しています。 大手サイトや大規模なECサイトに限らず
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA