自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！
自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ 石本 光司（Kaizen Platform, Inc...） こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製のツールを作りました。 t32k/stylestats – GitHub StyleStatsの使い方はとても簡単です。ターミナルから下記コマンドを打てば、すぐにCSSを解析した結果が得られます。 $ npm install -g stylestats $
Webアプリのパフォーマンス改善をWeb標準で行う方法、まとめ - ふろしき Blog
「HTML5 Advent Calendar 2013」の24日目の記事です。 Webアプリのパフォーマンス改善と言えば、JavaScriptやDOMアクセスなど、既存の技術ベースな改善手法を想像する方も多いでしょう。最近では、こうした改善のあり方を、別の視点からもう少し広げようというアイデアが存在感を持ち始めています。それは「Web標準」です。 そこで今回、Web標準側でできるWebアプリのパフォーマンス改善について、掻い摘んで紹介します。全てを説明となるとキリがないので、キーワードを中心とさせて頂きます。最近になって、結構実用化が進んできているので、悩んだ時には試してみる価値はあるでしょう。 1. リソースを先に読み込む linkタグにてURLなどを指定することで、これから先に読み込ませる可能性が高いWebページのリソースを予め読み込むWeb標準があります。ニュースサイトでは次のページ
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
jQueryライブラリを毎回読み込むムダをなくすには？ Googleの提案
Googleの「mod_pagespeed」にキャッシュ活用支援の新機能が搭載された。初訪問のサイトでも読み込みが高速化する仕掛けだ。 Webページ表示の高速化支援ツール「mod_pagespeed」の最新バージョンに導入された新機能について、米Googleが12月19日のブログで説明している。mod_pagespeedはバージョン1.2.24.1のβ版が12月14日にリリースされた段階。初めて閲覧するサイトでブラウザキャッシュの活用を支援するフィルタなどが加わっている。 バージョン1.2で追加された新機能のうち、「canonicalize_javascript_libraries」は、多くのサイトが使っている主要JavaScriptライブラリを、JavaScriptライブラリホスティングサービスでホスティングされているライブラリと入れ替えるフィルタ。 jQueryやjQuery UIなど
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
Twitter.comの読み込みが高速化 5分の1に短縮 - ITmedia ニュース
米Twitterは5月29日（現地時間）、Twitter.comをアップデートし、読み込みにかかる時間を従来の5分の1に短縮したと発表した。今週中に新生Twitter.comに切り替わる見込み。 まず、ページ上のパーマリンク（永続的なリンク）に含まれているハッシュバング（#!）を排除した。ハッシュバングはAjaxを利用するための仕組みだが、JavaScriptがパスを解釈する分、読み込みに時間がかかる。これを排除することで、パーマリンクの読み込みを速くしたという。 また、外部のWebサイト上でツイートのリンクをクリックしてからTwitter.comでそのツイートを表示するまでの時間を短縮するために、まずサーバでページのコンテンツをレンダリングしてからJavaScriptをロードするようにした。 さらに、JavaScriptのロード時間も短縮するために、コードを書き換えた。 Twitterは
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build and implement a single sign-on solution