パフォーマンスは技術課題ではなくデザインの課題
人気デザインギャラリーサイトから幾つかモバイル向け Web サイトのパフォーマンスを検証してみました。以下が各サイトのリクエスト数とファイルサイズになります。 FELISSIMO 500色の色えんぴつ: 81リクエスト / 1.94MB 旅館 大村屋 55リクエスト / 1.52MB UR オンラインストア 90リクエスト / 705kb JiNS PC 78リクエスト / 1.39MB らでぃっしゅレシピ 69リクエスト / 987kb 明治北海道十勝カマンベールチーズ 54リクエスト / 1.12MB いずれもスクリーンショットでは素晴らしい見た目で使いやすそうに見えますが、中身はかなり重いことが分かります。1MB 以下に抑えているサイトもありますが、それでもかなりリクエスト数が多いのが分かります。リクエスト数が多いということは、回線が安定しない場合、すべての要素が読み込まれない可能性
ウェブページの高速化のために読んでおきたいサイトのまとめ
ユーザビリティの改善や検索エンジン対策としてウェブページの読み込みスピードの高速化は非常に重要です。ということで、ページの読み込みスピード向上のために役立つサイトをまとめてみます。 ページ読込速度の重要性 次の事例にあるように、ユーザーは表示速度に敏感です。 Googleによるとページの読み込みが0.5秒遅くなると、検索数が20%減少する Amazonによるとページの読み込みが0.1秒遅くなると、売り上げが1%減少する そして、Googleのアルゴリズムにウェブページの読み込み速度が追加されて以降、サイトの高速化への注目度は高まっています。 Google、ウェブページの読み込み速度をアルゴリズムに取り入れたことを発表 | 海外SEO情報ブログ Googleがついに順位決定に表示速度を使い始めた（公式発表） | Web担当者Forum Google、検索順位にページ読込速度の考慮を開始 [詳
身につけておきたいWebサイト高速化テクニック #1｜アジェンダ編 | DevelopersIO
Webサイトの表示高速化対策していますか？ 日本は欧米諸国に比べWebサイトの表示高速化対策をしているサイトが少ないです。 特に、最近ではスマートフォンの普及によりモバイルサイトの需要も増え、高速化をしなければいけない機会も増えてるのかなと思います。 日本のモバイルデータ通信はLTEで高速になりつつあるとは言え、まだまだ「貧弱！貧弱ゥ！」です。 幸いなことに僕も最近鶴の一声によってクライアントからサーバー周りまで包括的な高速化対策を経験する機会を得ることができました。 それまでは、「手間がかかりすぎるからできればやりたくない」というのが本音でした。職務怠慢ですね（苦笑）。 でも、できるだけ楽したい！と思うのが人の常。 この連載ではできるだけ楽をしながらできる高速化手法と計測結果を1つ1つ紹介しようと思います。 基本的にはすべて受け売りの内容です。やってみた対策を羅列して、連載の中で自分で試
CDNでウェブサイトを高速化するためのまとめ
CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Contents Distribution Network（コンテンツディストリビューションネットワーク）」のことで（注）、コンテンツを配信するために最適化されたネットワークを指します。 Wikipediaの「コンテンツデリバリネットワーク」の説明によると、次のサービス（企業）が著名な商用CDNサービスを提供しているようです。 Akamai Technologies Limelight Networks
WordPress をとにかく速くする (WordPress Advent Calendar 2011 20日目) - dogmap.jp
12月25日まで毎日ブログをつないでいく WordPress Advent Calendar 2011、20日目担当 @wokamoto です。 @mypacecreator さんに引き継いでいただきました！ドキドキ。 そんな、@mypacecreator さんのエントリはこちら。 3大「WordPressに慣れていない人がやってしまいがちだけど、こっちのほうがいいのになぁ」って思うこと 去年は PHP Advent Calendar に参加して「匿名関数と無名関数 (PHP Advent Calendar 2010 16日目)」って記事を書いたんですが、今年は WordPress Advent Calendar に参加します！ そんなわけで、(一部の)みんな大好き WordPress のハイパフォーマンスチューニングの話題。 このサイト dogmap.jp で行っている施策について書きま
WordPressを高速化する9つのステップ | PLUS
福岡を拠点に活動するPLUSではWebサイト制作・iPhone/Androidアプリの開発を行っています。 WordPressはそのままだとアクセスが増えた時に、重くなりがちです。プラグインも入れすぎるとさらに重たくなることに。このブログだと表示スピードが改善前は7.7ｓかかっていましたが、見直しを行って0.4sにまで改善することができました。表示スピードは離脱率や、SEOとしても重要な要素ですので、改善する余地は大いにあります。 高速化に役立つツール まずはじめに、改善に役立つツールを2つご紹介します。 一つ目はWebWait。URLを入れると、読み込み時間を教えてくれます。まずはどのくらい時間がかかっているのか、チェックしてみましょう。 次はGoogleの「PageSpeed Insights」。URLを入れるだけで、高速化に役立つTipsを教えてくれます。もともとGoogle社内で
jQuery google api and other google hosted javascript libraries. - ScriptSrc.net
Mastering the Code Things We Wish We Knew Much Earlier In Our Career - Articles, Tips, Inspirations, Sources and Resources for web designers and developers Watch video Hello, coders! Computer Science became one of the top professions and hobbies in the past two decades. Many people, especially website developers, are drawn to learn at least one programming language that will back up their written
CSS内の画像埋込で高速化(Data URI) - Qiita
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
WordPress ＋ W3 Total Cache ＋ CDN な話 | gaspanik weblog
今となってはさほどアクセスもないうちのブログなんですが、なんとなくCDN（Contents Delivery Network）を導入してみました。というのも、か細い回線&自宅サーバだったこの10年にお別れをし、自宅の引っ越しを機に海外のサーバに移転したからですが。 日本語でしか書いてないこのブログ、普通に考えれば国内のサーバを借りて公開ってのが筋でしょうが、あいにくのひねくれ者なので「Media Temple」という海外のホスティング会社のDedicated Virtualのサービスを使っています（俗に言うVPSに似た感じのサービスで管理があまりいらない）。 サーバのスペック的には強力になったとはいえ、日本国内からではネットワーク的にはかなり遠い…。どれぐらい遠いかと言えば、日本とアメリカぐらい（そのまま 笑）。そういう背景もあって、このWordPressを使ったブログでもあれやこれやと実
jQueryを高速化するために覚えておきたい10のTips | IDEA*IDEA
jQueryを高速化するためのTipsがまとまっていましたよ。jsPerfなるツールを使ってちゃんと計測している点が素晴らしいですよ。 全部で10個（+Bonus）紹介されていますが、どれもサンプルコードがわかりやすいのでおすすめです。 最新のjQueryを使おう！ どのセレクタが速いか、どれが遅いか理解しておこう！ Nodeの親子関係を理解しよう！ jQueryを使うべきところを見極めよう！ キャッシュはあなたのお友達！ Chainを使おう！ delegate()の使いどころを覚えよう！ DOMはDBじゃないよ！ ループの使いどころを理解しよう！ jQueryオブジェクトは必要なときだけ作ろう！ jQueryを良く使う人は一読しておくと良いですよ。 » jQuery Proven Performance Tips And Tricks (Slides)
jQueryのパフォーマンス高速化Tipsまとめ | Webエンジニアのメモ
TweetPocket jQueryのパフォーマンス高速化Tipsまとめ jquery-logo jQueryのパフォーマンス高速化Tipsのヒントリストです。 セレクタのパフォーマンスのヒント 1. 常に#ID から辿る jQueryで要素を選択する最速の方法は、IDによるものです。 $('#content').hide(); $('#content p').hide(); 2. クラスの前にタグを使用 jQueryで2番目に早いセレクタは、タグセレクタ（$（’head’））です。 なぜならそれはネイティブJavaScriptメソッド、getElementsByTagName（）だからです。 最良の方法は、接頭辞にタグ名（およびIDから派生）を持つクラスです。 var receiveNewsletter = $('#nslForm input.on'); クラスセレクタは、jQueryの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
設計から実装まで、今すぐ始める高速化
1216彩票-官网平台