タグ

パフォーマンスに関するalphabet_hのブックマーク (3)

  • 超高速な静的Webページを作ろう! - Qiita

    PageSpeed Insights 計測結果 モバイル/パソコン 共に100点 速度という点に絞ると信用できるものではないかもしれませんが、100点という数字は単純にうれしい:) それでは!以下が私のやったことです リクエスト数を極限まで減らす CSSはstyle属性やstyleタグで設定 複数箇所で使う場合はstyleタグに、要素固有のスタイルはstyle属性で設定してしまいましょう。 style属性で設定する場合はセレクタでの捜索が発生しないので、ごく僅かながら速くなると思います。 画像はbase64で埋め込む こことかでデータURIスキームに変換してhtmlに埋め込みます。 base64エンコードすると容量が1.3倍くらいに増加するため大きな画像には向かない方法ですが、小さなアイコン程度ならリクエスト数減らすほうが効果的な場面があります。 複数箇所に使う画像の場合はCSS変数でba

    超高速な静的Webページを作ろう! - Qiita
  • 読んだ!>ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール - ふじこのプログラミング奮闘記

    Webサイトを高速化するときに、私たちエンジニアは サーバとかデータベースとかバックエンド側のことを考えがちですが、 じつはフロントエンドの方を改善するほうが低コスト&高パフォーマンスであることと、 その方法がまとめられたでした。 フロントエンドの方がすきな私にとっては嬉しいハナシ!(pゞεσq) ほんとにそんなに早くなるの?って人は、このグラフを見てみてください。 一昔前のYahoo!ページへアクセスしたときに、 HTMLファイルやその他のファイルをDLするのにかかっていた時間だそうです。 縦に並んでいるのは、そのWebサイト内に埋め込まれたファイル。 横はそれぞれのファイルを取得し始めてから取得完了するまでの時間の長さです。 一度に取得できるファイルには制限があるので、順々に取得されていっています。 <参考> Pingdom Tools(私はこういう計測にこれ使っています) htt

  • ついに出た!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サイトに限らず

    ついに出た!Chrome版「Page Speed」の使い方
  • 1