What forces layout/reflow. The comprehensive list.
what-forces-layout.md What forces layout / reflow All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck. Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for a
コードの圧縮や外部ファイル化とページの読み込み速度について
なぜ、ごちゃごちゃしてるのか？ぱっと気づくのがこの2点です。 改行やスペースがほとんど使われていない CSSやJavascriptが外部化ファイル化されていない Googleとしてはソースがきれいなことよりも、読み込み速度を速くすることでユーザーのストレスを軽減したり、ファイルサイズ小さくすることでサーバーへの負荷を減らしたりすることの方が重要だと思います。 もちろんアップする前にこのような状態にしているだけで、それまではきれいに書かれているはずですが。 ということで、「コードの軽量化」と「外部ファイル化」の2点について考えてみます。 コードの軽量化について HTML、CSS、JavaScriptなどのコードは、改行やスペースを使わずサイズを小さくした方が読み込みは速くなります。 これは当然ですね。 コードの見やすさよりも読み込み速度やサーバーの負担軽減を優先するなら、できるだけファイルを
ReFlowの原因とマークアップの最適化 « NAVER Engineers' Blog
自己紹介 ネイバージャパンのUIT(User Interface Technology)チームの裵完理(ベワニ)です。 概要 CSSやJavaScriptを使って複雑なデザインや動的なページを実装しているサービスが増えてきていますが、速度低下などの問題が発生しやすくなっています。これを100%直すことは難しいですが、改善するにはブラウザレンダリングプロセスを理解する必要がありますので、理解した上で改善方法を探してみましょう。 ブラウザレンダリングプロセスの理解 ブラウザの基本構造 User Interface – アドレスバー、戻る・進むボタン、ブックマークメニューなど、メインウィンドウに表示(document)されるページ以外の部分 Browser Engine – UIとレンダリングエンジン間のアクションを制御するもの Rendering Engine – リクエストしたコンテンツを表
今すぐ出来る、ちょこざいなサイトパフォーマンスアップ - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 一言にサイトパフォーマンスアップと言っても、どこまで手をつけるか悩みどころ。 今日のお話は、出来るだけ忘れずにやっておきたいごくごく簡単なチューニングです。 フロントエンドで出来ること CSSは一番はじめにロードする スタイルシートに含まれる背景画像のロードと、 ページのレンダリングを出来るだけ早くおこなう為です。 JavaScriptは一番最後にロードする JavaScriptは</body>の直前あたりでロードするのがパフォーマンスが上がる様子。 ただし、レンダリング前に処理したいケースもあるので、可能な限りで。 CSS/JavaScriptは圧縮しよう ツールを使って、CSS/JavaScriptファイルを最小化してあげましょう。 YahooライブラリにあるYUICompressorは、CSS/JS両方を圧縮出来るのと、
YUI CompressorでjavascriptやCSSを連結・圧縮 | チバのブログ
GoogleのPage SpeedやYslowの項目の中に「gzipで圧縮してね」みたいなものがある。Java ScriptやCSSをgzipで圧縮することについては前に試して結構圧縮されたんだけど、どうせやるならもっと圧縮してやろう！ってことになりまして、YUI Compressorに手をつけました。YUI Compressorっていうのはヤフーが配布しているJava ScriptやCSSの圧縮用のライブラリです。 圧縮といってもzipにするとかそういうものではなくて、余計な改行なんかを取り除いてくれるツールです。圧縮後はjquery-min.jsの中身みたいに何が何だか分からなくなりますが、動作としては同じように動いてくれます。 このブログでいえば、jquery.js・yuga.js・jquery.corner.jsをほとんどのページで読み込んでいるので、これを1つのファイルにまとめ
oreilly.co.jp -- ハイパフォーマンスWebサイト
米Yahoo!のパフォーマンス担当責任者が導き出した「高速サイトを実現する14のルール」を実例とともに紹介します。サイトの高速化と聞くと、サーバ負荷分散などバックエンドで実施する大掛かりなパフォーマンスチューニングを思い浮かべますが、じつは待ち時間の80％はフロントエンドの処理に費やされています。ここで紹介する明解なルールに従いさえすれば、この時間を大幅に削減できるのです。本書では、ブラウザとサーバの通信の仕組みからわかりやすく解説し、14のルールに従うことでなぜ高速化できるのかを論理的に解明しています。 翻訳者によるサポートページ。 訳者まえがき 本書に対する賞賛の声 推薦の言葉 まえがき A章 フロントエンドのパフォーマンスの重要性 A.1 ウェブページのパフォーマンスを追跡する A.2 時間はどこで使われたのか？ A.3 パフォーマンス改善の鉄則 B章 HTTPの概要 B.1 圧縮
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
