Webパフォーマンス
Google I/O 2015でのセッション「The Next Generation Mobile Web(次世代のモバイルWeb)」がそこそこに激アツな気がしたのですが、予想に反し、あまり注目を集めていません。わかります。大衆向けなメディアだと、AndroidやVR/AR、Google Photosのようなわか…
ここ数年のうちに、人々が利用するメインコンピューターは、デスクトップからモバイルへと移りました。少ないハードウェアリソース、不安定なネットワーク、逼迫するバッテリー消費、シンプルなユーザインタフェース、開発者はこうした制約の中で、Webサイト…
Webサイトのユーザ体験を向上させる上で、Webページの遷移(ナビゲーション)のパフォーマンスを向上させることは重要です。しかし、ナビゲーションを速くなんて言われても、具体的にどこからどこまでが速ければ良いのかと、悩んだことはないでしょうか。ユー…
Webの技術は、様々な用途で使われるようになり、ユースケースの多様化が進んでいます。それに追従する形で、技術サイドでも進化することが求められているのですが、残念なことに、インフラ側は入れ替えが急には進まないという問題を抱えています。せっかくの…
「HTML5 Advent Calendar 2013」の24日目の記事です。Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようとい…
1300の優良サイトが選んだシリース、第3回は「AMDと遅延ロード」です。JavaScriptファイルのロードのパフォーマンス向上を図るメカニズムを「AMD(Asynchronous module definition)」といいます。Webアプリ開発を行なうデベロッパの方は、今後重要な知識にな…
Webページを表示する時、画面に表示されていない無駄な画像までロードしていませんか？画像のロードは、Webブラウザの表示を遅らせるだけでなく、サーバ側にも負荷を与える厄介な処理でもあります。"Lazy Load"は、そんな画像ファイルのロードタイミングを、…
yepnope.jsは、JavaScriptファイルやCSSファイルを遅延して読み込んだり、条件によって読み込む対象ファイルをスイッチさせることで、ページ応答やパフォーマンスを改善するJSライブラリです。yepnope.jsの公式Webサイトはこちらですが、2013年6月現在はリン…
FOUC(Flash of Unstyled Content)とは、Webページへアクセスした直後、CSSによるデザインが有効でないページが一瞬だけ表示される現象のことです。まず、下の例をご覧下さい。 <html> <head> <meta charset="utf8" /> <title>Example</title> <link rel="stylesheet" href="hoge.css" type="text/css" /> </head> <body> ・・・ </body> </html> この例では、CSSの外部ファイルをhead要素内から呼び出…
