タグ

ブックマーク / wazanova.jp (5)

  • WebPagetestのウォーターフォールグラフの読み方 - ワザノバ | wazanova

    http://calendar.perfplanet.com/2013/web-performance-waterfalls-from-10000-feet/1 comment | 0 points言われてみれば当然のことであっても、集中を欠いてグラフを見てると、せっかくの貴重なサイトパフォーマンスの改善ポイントを見過ごしてしまうことがありえそう。備忘録的。 Poor Caching repeat viewのサイズがfirst viewと似ていて、かつイエローでハイライトされたリクエストが多ければ、ブラウザがリソースをローカルのキャッシュから取得していない可能性が高い。 Slow Back-End リダイレクトがないと仮定して、ベースのページにおけるウォーターフォールの最初のリクエストが、一般的には唯一のアプリのサーバコードへのリクエスト(DBクエリやその他アプリ特定のロジックのトリガー)

    kyaido
    kyaido 2016/06/22
  • CSSパフォーマンスツールを使いこなす - ワザノバ | wazanova

    https://www.youtube.com/watch?v=FEs2jgZBaQA 1 comment | 1 point | by WazanovaNews ■ comment by Jshiike | 約1時間前 CSSconf EU 2014におけるGoogleのAddy Osmaniの講演です。CSSのパフォーマンス向上に役立つツールを40個+ 紹介してくれてます。 背景 パフォーマンスの最適化において、 ベースラインとしてやること 最小化(minification) 結合(concatenation) 画像の最適化 圧縮(GZip, Zopfli) 非同期スクリプト キャッシュの利用 WOFF2フォント CSSスプライトを使う リダイレクトをしないこと スピードアップ パフォーマンス向上に重要なCSSのインライン化 レンダリングをブロックしないように、急ぎでないアセットの取

    kyaido
    kyaido 2014/10/16
  • 長期かつ修正頻度の高いPJでのCSSメンテ - ワザノバ | wazanova

    http://benfrain.com/enduring-css-writing-style-sheets-rapidly-changing-long-lived-projects/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約2時間前 長期的な大規模プロジェクト、かつ修正頻度が高い場合は、DRYよりはメンテ性を最優先にしたCSSを書くべきという、Ben Frainの方法論です。長文ですが、よくまとまってると思います。 1) テクノロジーとツール プレプロセッサ 長期のプロジェクトにおいて重要なのは、テクノロジーではなく、何ができて、どう進めるかというアプローチ。 Sass / LESS / Stylus / Myth などどれでも、しっかり書かれていれば、必要なときにいつでも統合はできる。プレプロセッサは

    kyaido
    kyaido 2014/08/18
  • JavaScriptでvarを並べること - ワザノバ | wazanova

    http://benalman.com/news/2012/05/multiple-var-statements-javascript/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 まあ、好みの問題もあるので、嫌な人にとっては嫌なんでしょうが、、 JavaScriptで、例えば先頭で var をまとめて定義 & 値を代入する際に、 var foo = 1, bar = 2; でなく、 var foo = 1, var bar = 2; と、varを並べたほうが、メンテ性も見た目を揃えるにもよいのではないかという、Ben Almanの2年前のブログが最近いくつかtweetされてたので、チェックしてみました。 そもそも、 複数varを並べるのは無駄だし、初心者っぽい。 単独varの方が見た目がよい。

  • フロントエンド自動化ツールをまとめて理解する - ワザノバ | wazanova

    http://www.youtube.com/watch?v=1OAfGm_cI6Y 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 GoogleのAddy OsmaniによるFuture of Web Appのキーノートスピーチです。 49分間 [Video]で下記の話題を全てまとめてます。フロント関連の便利ツールが一通り網羅されてます。おかげで、Yeoman (Yo/Grunt/Bower) の概要もすっきり理解できました。スライド(236枚)で確認されたい方はこちら。 Codekit Hammer Prepros Koala Mixture compass.app scout-app Yeoman / Grunt grunt-image: JPG/PNG/Gifを最適化して軽量化 grunt-

    kyaido
    kyaido 2014/02/18
  • 1