CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
Webパフォーマンスにおけるイニシャライズとランタイム
Webフロントエンド・パフォーマンス 思考整理系。 Webフロントエンドにおける3要素として、過去のセッションでは下記の3つを中心に紹介していました。 通信コスト - Networking 描画コスト - Rendering 計算コスト - Computing これらの問題は複雑に絡み合い、時として相反する関係をとります。例えば、通信コストを減らすために、視覚表現を画像からCSS3に置き換えたら、描画コストが高くなってしまいスクロールが重くなった、なんてケースは頻繁にあるでしょう。 理解の問題 この3つのコストは確かにパフォーマンスに影響を与える要因であります。しかし、その要因がWebフロントエンドのページライフサイクルにおいて、どこで影響を与えているかは表してくれません。 要因がどのような影響を及ぼしうるかという基礎的な理解と、パフォーマンスの問題に取り組むための切り口としての理解は、そ
MySQLを使ったアプリケーションを作るエンジニアが知るべきMySQLの内部構造とは？ | Yakst
MySQLを使ったアプリケーションを作るエンジニアが知るべきMySQLの内部構造について、データベースコンサルティング会社PalominoDBを経営するLaine Campbell氏による回答。MySQLを知るためには何をポイントに学習すればよいのかがよくわかる、DBAや開発者にとっても役立つ内容。 1. ストレージエンジン ストレージエンジンと、永続性、ロック機構、トランザクション処理の振る舞いや分離レベルといったストレージエンジンの基礎となる動きについての理解なしに、MySQL自体やモデルデータのコードをいじるべきでない。それに加えて、InnoDBのクラスタ化されたプライマリキーや、MyISAMの全文検索インデックスのようなコア要素も、極めて重要な情報だ。 2. インデックスのコンセプト 特に以下のような点について。 カバリングインデックス 連結インデックス インデックスを使ったソート
DOM操作の最適化によるJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
『Velocity 2013 レポート』
ちょりーっす！コミュニティ部門でWebデベロッパーをしています石本（@t32k）です。今回は6/18-6/20、米国のサンタクララで開催されたVelocity 2013のレポートを書いてみるよ。 Velocityは『ハイパフォーマンスWebサイト』の著者でも有名なSteve Souders氏が2008年から開催している、Web Performance（フロント、バックエンド問わず）, Web Operationsなどを幅広く取り扱ってるカンファレンスです。また同名のカンファレンスが、ニューヨーク、ロンドン、北京でも開催されており、まさしく世界的なカンファレンスと言ってもいいでしょう。 『ハイパフォーマンスWebサイト』を読んだ時から、私にとっていつかは行きたいと思ってた憧れのカンファレンスだったので、3日間興奮しまくりでした。その中でも特に印象的だったTwitter社のMarcel Dur
Rails アプリケーションのパフォーマンスについて RubyKaigi 2013 で発表しました - クックパッド開発者ブログ
インフラストラクチャー部の成田です。 先日開催された RubyKaigi 2013 で、 "High Performance Rails" というタイトルの発表をしてきました。 スライドと動画 発表の様子は ustream の録画をご覧ください。 [ustream id=33559705 hwaccel=1 version=3 width=480 height=302] スライドは以下にアップロードしてあります。 High Performance Rails (long edition) // Speaker Deck なお、発表時間の都合上、当日はここから 40 枚ほどのスライドを削除してしまいました。発表に使った短いバージョンのスライドはこちらです。 発表の概要 クックパッドは 2008 年から Ruby on Rails を採用し、ずっと使い続けてきました。サービスが成長するとともに
クライアントサイド JavaScript のパフォーマンス改善には backburner.js が便利！ - tricknotesのぼうけんのしょ
DOM 処理や Ajax など、JavaScript が外の世界とやり取りする部分というのは、一般的に待ち時間を多く必要とします。 パフォーマンスを改善しようと思った時に、ロジック部分でコツコツと節約するより、まずコストが高い処理を行わないようにするということで、驚くほどの効果を経験をされたことはありませんか？ 今までパフォーマンス測定をされた方であればピンとくる部分があることと思います。 そんな時に役に立つのが、今回ご紹介する backburner.js です。 ebryn/backburner.js - GitHub backburner.js って? backburner.js とは Ember.js の run loop モジュールから切りだされたとても小さなライブラリで、短時間に集中的に発生するメソッド呼び出しの回数を制限したい場合などに利用することができます。 backburn
Webアプリケーションを高速化する50のトリック
MicrosoftのInternet Explorer PMであるJatinder Mann氏は、BUILD 2012でHTML5アプリとサイトを高速化する50のパフォーマンストリックというセッションで、Webアプリケーションを高速化する多くのチップスを提供した。 Mann氏が提供したアドバイスは、以下の6つの原則を中心に構成されていた。 1. ネットワークリクエストに迅速に応答する リダイレクトを避ける。上位1,000のWebサイトのうち63%は、リダイレクトを使用している。これらはリダイレクトをやめることによって10%のパフォーマンスを改善することができる。 メタリフレッシュを避ける。世界のURLのうち14%は、メタリフレッシュを使っている。 可能な限りユーザーの近くにあるCDNを使用してサーバーの応答時間を最小化する。 異なるドメインからのリソースをダウンロードすることによって、同時
「Node.jsは静的コンテンツには向いていない」のか？ - hakobera's blog
この記事は東京Node学園祭2012 アドベントカレンダーの8日目の記事です。 この記事を書こうと思った理由 Node.jsに関するWeb上の記事を読んでいると、「Node.jsは静的コンテンツに弱い」とだけ書いてある記事をよく見かけます。有名なところだと、LinkedInのNode.jsのパフォーマンスに関する10個のTipsの3番目のTipsに"Don't use Node.js for static assets"とばっちり書いてあります。 確かにCDNやNginxに比べれば、Node.jsは静的コンテンツの扱いが遅いとは思います。しかし、それは LinkedIn くらいの超大規模なトラフィックがある場合には問題になるとは思いますが、小〜中規模なサイトでもNginxは必須なほど遅いのでしょうか？512MBしかメモリのないVPSにNginxとNode.jsを入れてやりくりすることがホン
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
最低2秒、目指すは1秒以内。ウェブサイトを高速化するためのTIPS at #SMX Advanced Seattle 2012
[対象: 上級] ページの表示速度が、Googleのランキングを決める指標として日本を含むインターナショナルで導入されていることがSMX Advanced Seattle 2012で判明しました。 そこで今日は、ウェブページの高速化を取り扱ったセッションをレポートします。 スピーカーは、ECサイトのREIでSEOに携わるJonathon Colman（ジョナサン・コールマン）氏です。 ウェブサイトのパフォーマンス最適化 サイトを高速化する理由 コンバージョン率の最適化 カスタマーエクスペリエンスとカスタマー満足度の向上 直帰率を下げる。 競争率が非常に激しいキーワードでオーガニックからのトラフィックを増やす。 全体的な競争力を高める。 運用費を節約する。 数字で見るページスピード Googleではページスピードが検索の1%に影響している。 ユーザーがページ表示に待てるのは2秒まで。 3秒以
CentOS6で制限されているプロセス最大数を制限解除する - 256bitの殺人メニュー
ハマったのでメモ。 Linuxでリソース制限するための仕組みのulimitがありますが、その1項目に「nproc」があります。 これはそのユーザで実行できるプロセス（スレッド）数の制限となります。 これが、CentOS5までは、 $ ulimit -u unlimitedのように無制限だったのですが、CentOS6になって以下のように1024で制限がかかるようになりました。 $ ulimit -u 1024そのため、デーモンとかで高負荷な処理をさせてプロセス（スレッド）が増えると処理が落ちてしまうのです。 悲しいけどこれってデフォルト値なのよね。 設定箇所は？ 実際の設定は、[/etc/security/limits.d/90-nproc.conf]でされています。 # cat /etc/security/limits.d/90-nproc.conf # Default limit for
Webアプリのパフォーマンスアップ作戦 - ゆーすけべー日記
予定している機能を実現するアプリが完成するだけでWebサービスが成り立つわけではありません。 運用の最中にパフォーマンスにまつわる問題が出てくる可能性があります。 それは突然大きなトラフィックがやってきたというような時だけではありません。 知識が無いうちですと、いざ運用に乗せてみるとずいぶんとサイトの読み込みが遅いといったケースが発生することもあります。 僕はいくつかのエロサイトを管理しているのですが、 その中に月間700万PVのアクセスをいただいている「サイトA」があります。 サイトAの場合、トラフィックもそこまで無かった当初からパフォーマンスに関する問題がいくつか発生し、 その都度調べては実践で試して対策をしてきました。また、できる限り少ないリソースでの運用を目指しています。 今回はWebアプリのパーフォマンスアップ作戦として、 サイトAでの運用経験からのいくつかの方針やTipsを紹介
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久