タグ

2013年11月7日のブックマーク (3件)

  • [JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium

    ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo

    kem95199
    kem95199 2013/11/07
  • スマホで重要|ページ表示速度を高速化させる17の方法(HTML/CSS篇)

    SEO対策にとってもページ読み込み速度は重要な要素になります。単に画像を圧縮するだけでは十分な施策と言えません。ここではレスポンシブデザインを導入するときに併せて採用したい幾つかの手法を紹介します。 【目次】 HTTPリクエストを最小限に抑える 読み込み順を変える HTMLをスリム化する 外部ファイルを圧縮する DNSルックアップを減らす HTMLの構造を簡素化する。 エラーを無くす おわりに 1.HTTPリクエストを最小限に抑える 応答時間の80%はページ内のすべてのコンポーネントをダウンロードする時間に費やされます。特にHTMLファイル読み込み後の複数の画像の要求・応答に多くの時間を費やされます。 要求する画像の数:ファイル数を減らすだけでも速度アップに繋がります。 複数のファイルを1つにする。 ・小さいが多くあるアイコン類の画像を1枚にして、CSSスプライトで表示させる。 アイコンの

  • jQuery高速化!処理速度を10倍上げるテクニック20選

    Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10%向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers

    jQuery高速化!処理速度を10倍上げるテクニック20選