サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Google ChromeでスクロールキャプチャできるChrome拡張「Webpage Screenshot」
Google ChromeでスクロールキャプチャできるChrome拡張「Webpage Screenshot」を紹介します。 この拡張を利用すれば、画面キャプチャやスクロールキャプチャはもちろん、ページ上に図形や文字を描いたり、ページ上でテキスト編集を行うこともできます。 １．インストール 「Chrome ウェブストア - Webpage Screenshot」のページ右側にある「CHROMEに追加」をクリック。 「追加」をクリック。これでインストールが開始します。 インストールが完了すると次のようなページが表示されます。 ２．キャプチャする キャプチャしたいウェブサイトの右上にあるカメラマークのアイコンをクリック。 メニューが表示されます。ここでは「ページすべてをスクリーンショット」を選択します。 スクロールキャプチャが開始します。 キャプチャが完了すると次のような画面が表示されます。
960pxのグリッドを1クリックで用意してくれるPhotoshopのアクション
960pxのグリッドに4, 6, 8, 10, 12カラムとそれに伴ったガイドを1クリックで用意してくれるPhotoshopのアクションを紹介します。 960 Grid Actions for Photoshop アクションはPhotoshopのドキュメントを新規作成するもので、グリッド・カラム・ガイド以外にもレイヤーにヘッダやフッタなどのフォルダも準備されます。 フォルダも準備されます アクションを一から作成するのは面倒なので、これをそのまま使用してもよいし、自分用にカスタマイズしてもいいかもしれません。 ダウンロードしたアクションファイルは当方のPhotoshop CS4日本語版でエラーが出てしまったので、それを修正する方法を紹介します。 ※再配布のライセンスがなかったので説明のみで。 日本語環境と英語環境で作成される名前が異なるため、エラーが表示されます。 エラーの内容はレイヤー「G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
