WEB ページの読み込み時間を短くしよう - Qiita
まずは遅くなる原因を取り除こう この記事ではクライアントサイドに焦点を当てて紹介しますので、PHP や Ruby などサーバーサイドのプログラミングに関することは一切出てきませんのでご了承ください(o*｡_｡)oﾍﾟｺｯ サイトの読み込みが遅い場合、大抵はまずいやり方をしている一部分が足を引っ張っていることが多いと思います。 手当たり次第に最適化を試す前に「なぜ遅いのか？」問題の切り分けをしっかりやってから対応を考えましょう。 原因はどうやって特定するの？ PageSpeed Insights (developers.google.com) を使ってみる ブラウザ搭載のデバッガで調査するのが王道だけど、お手軽に調べるのであれば PageSpeed Insights がキャッチーでオススメです。 最低限のお作法について指摘してくれるので、指摘事項を直していけば割と解決します。（原因が曖昧なま
60 (フレーム・パー・) セカンズ：Pinterestの描画パフォーマンス最適化のケーススタディ | POSTD
今日はWebサイトやWebアプリの描画パフォーマンスをどう改善したらいいのか、ということについて取り上げようと思います。私たちWeb開発者にとって、この分野は比較的新しく注目し始めたエリアで、 ユーザエンゲージメントとユーザ体験 に影響があるため重要です。 フレームレートはWebにも影響がある フレームレートとは、 連続した イメージを端末がスクリーンに映し出すレートのことです。秒間フレーム数（FPS）が低ければ肉眼で個別のフレームを判別でき、FPSの数値が高ければユーザにとっては反応が速いと感じられます。ゲーム業界ではおなじみの概念となっているものですが、Webにも当てはまるのです。 長時間に及ぶイメージのデコード、不必要なイメージのリサイズ、重いアニメーションとデータ処理はすべてフレーム落ちを起こす可能性があり、結果としてフレームレートは下がり、jankが多いページになってしまいます。
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
Unityの2DやuGUIのパフォーマンス最適化についての7つのTips - テラシュールブログ
最適化というか、改善する話です。 モバイル向けに作った時に妙に遅かった場合、この辺りの要因が絡んでいるケースが多い印象です。この辺りは作る際に確認しながら作ると、後々痛みが少なくて良いかなと思います。 目次 目次 プロファイラで確認する エディタ上で動かすプロファイラの注意点 メソッド毎の負荷について DrawMeshを抑える バッチングされない謎の理由 バッチングしやすくする為には フィルレートに気をつける よくあるフィルレートで死ぬパターン フィルレート対策 uGUIにおけるフィルレート対策 Unity 2Dにおけるフィルレート対策 解像度を下げる ゲーム画面は低解像度、UIは高解像度 バッチについて注意すべき事 フォントの扱いについて テクスチャ更新時のスパイク 2つの対策 UIを動かす（変形させる）コストについて 物理演算について その他… VSYNCについて Tweenとか Pi
Unity 5の新機能FrameDebuggerでグラフィックパフォーマンスを改善する - Qiita
追記：2015年11月27日 本記事の旧タイトルは「Unity 5 Proの新機能FrameDebuggerでグラフィックパフォーマンスを改善する」でしたが、これは本記事がUnity 5リリース前に書かれたためで、Unity 5正式版は無料版PersonalでCloud、Team Licenseなどのアドオンを除くエディタ上の全機能が使用可能になったため、本記事から「Unity 5 Pro」の記述を取り除きました。 Unityアプリのパフォーマンス最適化 UnityはMonoを採用しているため、C++やObjective-Cのようにネイティブのバイナリコードが出力されるわけではなくMono Virtual Machineで動作する中間言語が出力されそれを読み込んでアプリを実行しています。（iOSでは規約のためネイティブに事前コンパイルされています） と言っても現在ではCPUの性能が向上し、
HotSpot JVMの最適化オプションについて調べる - terazzoの日記
Javaの最適化の議論で「インライン展開」「エスケープアナリシス」などの用語が出てきていて、気になって調べたところ、java実行時のオプションで最適化の方法を指定したり実行過程を表示したり出来るらしい。 主なオプションについて Java HotSpot VM Optionsにパフォーマンスに影響しそうなHotSpot VMのオプションが説明されている。 例: オプション 効果 -XX:+PrintCompilation メソッドがコンパイルされた際にメッセージを表示 -XX:+UseBiasedLocking Biased Lockingを使用する -XX:+OptimizeStringConcat 可能なら文字列の連結操作の最適化を行う -XX:+AggressiveOpts 将来のリリースでデフォルトになりそうな最適化フラグを有効にする ... ... たとえばjava起動時に-XX:
Java8時代の文字列連結変態さんまとめ - きしだのHatena
いろいろな文字列連結のコードを書いた人がいたのでまとめておきますね。 主に変態さん。 とりあえず、基準として、メモリ確保したStringBuilder版 public static String stringBuilderJoinMem(){ StringBuilder s = new StringBuilder(9100).append("["); for(int i = 0; i < strarray.length; ++i){ if(i != 0){ s.append("],["); } s.append(strarray[i]); } s.append("]"); return s.toString(); } 1037ms ということで、まずはbackpaper0さん。比較的常人のコード。 https://gist.github.com/backpaper0/10273558 pu
【JavaScript】メモリの浪費を避けるコーディング | ヘッドウォータースのブログ TechNote
こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領
CSS Nite LP, Disk 23「表示速度最適化」 に行って来ました – tama's memo
6/30にCSS Nite LP, Disk 23「表示速度最適化」 に行って来ました。 気になっているテーマでしたので超早割で申し込みました。自分も表示速度最適化に関しては興味があった（勉強会でお話させていただく機会もあった）のでかなり期待してお話を聞きました。 実際に濃い話が多く、４時間あっという間でした。 以下に自分用のメモとして書きます。 1. Measuring Web Performance – 自己満足で終わらないためのパフォーマンス計測 - ～石本 光司さん(サイバーエージェント)～ 改善をどこから行うか このテーマについては自分も悩んでいましたが、石本さんの定義方法は理解しやすかったです。 改善箇所は Yahoo Developer NetworkのExceptional Performance や Web Performance Best Practices – Ma
スマートフォンサイトを驚くほど速くする！高速化9つのポイント | Find Job ! Startup
回線が細くCPUも弱いスマートフォンは、リッチなWebサイト表示が苦手です。しかし、地道な対策で表示速度が驚くほど変化するのも事実。 今回はスマホのWebサイト表示の高速化手法をまとめました。もちろんPC向けにも効果バツグンのTips集です。 Webサイトを劇的に高速化する9つのポイント １.画像を圧縮する ２.画像はサイズを指定して使う ３.画像は適切なサイズで使う ４.CSS/JavaScriptを圧縮する ５.CSSスプライトを使う ６.不要なCSS/JavaScriptを読み込まない ７.CSS/JavaScriptをまとめる ８.CSSセレクターを最適化する ９.mod_deflateでgzip圧縮する １.画像を圧縮する 画像を最適化することは、フロントエンドの高速化に絶大な効果を発揮します。Photoshopを使って圧縮しても良いのですが、もっと手軽に圧縮
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
JavaScriptベストプラクティス30選-jsEdu
#jsEduから適当に選んで日本語にしたものです。 訳とかは全く正確ではなく、as possibleなど表現をかなり省いてるので命令口調になってます。 フィーリング的なものはあんまり入れてないので、興味をもったらTogetter – 「JavaScriptのベストプラクティス大会 jsEdu」を読みましょう。(まとめた奴はこれの10倍くらいありますが、被ってるのや関係無いのもあるので読める程度の量です) 全てを確認したわけではないので、正確性は保証しかねます。 ==ではなく===を使うべき (自動的に型変換に行われないのでバグが減る、高速) new Object() and new Array() よりも[] or {}を使うべき。 []や{}の方がシンプル JavaScriptを高速化する6つのテクニック | エンタープライズ | マイコミジャーナルで出てくるのは間違いだと思う。 []
JavaScript のパフォーマンスと Sweet Spot の甘い罠 - Block Rockin’ Codes
本文 先日 JavaScript を高速化するには、 VM を知る必要があるんだろうと思い、 以下のような発言をしてみました。 とにかく今は 「V8の最適化の恩恵を受けるための JS の書き方」や「ホットスポットを温めて C よりも速い JS を書こう」という釣りっぽいけど釣りじゃない記事を @Constellation さんや @bad_at_math さんに書いていただく必要があるということでした！ 2011-10-23 21:53:44 via Echofon しかし、釣り針が小さかったためか、誰も釣れず。。 自分で調べろってことですよね、すいません。。 と思っていたら、先日下記のエントリが話題になりました。 そのものずばり、JavaScript を最適化する話。 mraleph-The trap of the performance sweet spot 先に感想を言うと、これはい
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
ズルイくらいに凄い！アクセスアップのコツ ３０
作成：2013/01/15 更新：2016/06/08 SEO対策 > ポイントだけおさえて、アクセスアップしたい 試行錯誤している時間はないし、コツだけつかんだらコンテンツに集中したい。 先日アクセスが上昇した記事を書きましたが 今回は「最短でアクセスを上げる」為に必要な重要ポイントを書いておきます。 もちろん、一番役に立ったサイトのURLも記載しておきます。 ※2013/04/10：SEO対策に関する過去記事を修正しました。 根拠を示すデータや統計がある記事はアクセスアップしやすい ※2016/06/08 追記：ここ１年で「SNSで話題になったニュース記事を自分なりの考察を添え、1000文字以上書いて毎日配信する」という実験を、別ドメインで行ってみたのですが、ほぼ圏外にすっ飛んでいましたし、その記事は拡散性が低かった。その中でも唯一上位に食い込んだ記事に共通していたことは「根拠を示すデ
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordCamp Tokyo 2012 ~ Pr�o Tips� for� Spee�ding U�p WordPress: Optimization of Front-End ~
表示が速過ぎても、誰も文句は言いません～CSS Nite「表示速度最適化」レポート
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
JavaScriptをまじめに考えました+
