フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
フロントエンドを100倍速くした（ ＾ω＾） - Qiita
おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小
フロントエンド速度改善でやったこと(Expiresヘッダ、faviconのgzip圧縮、JSの読み込み遅延化) - $shibayu36->blog;
フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog; という記事を以前に書いたのだけど、結局何をやったか書いて欲しいと社内で言われたので、今回のフロントエンドの速度改善でやったことについて書いてみる。そこまで大したことはやってないので参考程度にどうぞ。 前提 ページのレンダリングが遅いと思い始めたので改善をすることになったのだが、改善をし始めたところChromeのアップデートがあり爆速になってしまった(FirefoxやSafari等はもともと速かった)ので、では明らかにやったほうが良いことだけやりますかという話になった。そのためあんまりbefore/afterもちゃんと取っていないので、今回はやったことの紹介くらいに留める。 やったこと 計測や調査をしてみたところ、以下のようなことはやってしまったほうが良いということになった。 静的ファイルに適切にEx
フロントエンドがサーバー負荷を抑えるためにできること - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 フロントエンドエンジニアとして働いていると、いかにサーバーサイドに負担を掛けずに処理を行うかについて考えることも多いと思います。 そこで今回は、サーバーに画像の転送を行う前にクライアント側で画像加工をする話について書きます。 この記事は animateLAB Advent Calendar 2015 15 日目の記事です。 qiita.com JavaScript で画像処理を行う ウェブアプリケーションで画像ファイルの加工が要件にある場合、サーバー側で画像加工を処理するケースが大半だと思います。 しかし、データ通信のことを考えると、最適な考え方とは言えない気がしています。 近年、日本のインターネット回線の速度は大きく向上しているとはいえ、モバイルデータ回線はまだまだ速度的に完璧とは言えません
【CSS/JavaScript】CSS/JavaScript高速化のためのまとめ – T2
【CSS/JavaScript】CSS/JavaScript高速化のためのまとめ 10月 1, 2012 admin 読了: 約 8 分 現在、現職の制作会社でマークアップと簡単なJavaScriptを仕事で行う中、最近機会があって、某ヒカリエに所属するフロントエンドの方と話しをした際 もっとスピードを意識した方が良いなと個人的に感じたのでその辺りを纏めておきます。 photo credit: Express Monorail via photopin cc CSSの高速化について CSSの高速化ですが、色々な角度からアプローチというか見なければなりませんよね。 ざっと挙げて行きたいと思います。 １．CSS Spriteの使用 ⇒ text-indentは使用しないりーフィーラングリッジ法を使用する事。 スマートフォンでは特に重要 前記事でも挙げましたが、サイバーエージェントのAmeba、
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
JavaScriptが遅い4つの原因とは？
1つ前の記事「JavaScriptをいかに高速化するか、IE9、Firefoxの取り組み」では、IE9とFirefoxにおけるJavaScriptの高速化について紹介しましたが、そもそもJavaScriptの実行速度はなぜ遅いのでしょう？ その理由について、Mozilla Japanテクニカルマーケティング担当の浅井智也氏が、スライド「Trace Monkey」でポイントをまとめています（このスライドはタイトルから分かるとおり、Firefoxの当時の新しいJavaScriptエンジン「Trace Monkey」を紹介するために1年以上前に作成されたスライドですが、1つ前の記事を見ると、ここで示された課題はいまも変わっていないようです）。 全67枚のスライドの20枚目から24枚目の5枚を以下に紹介します。 JavaScriptが遅い原因は、以下の4点にまとめられています。 インタープリタ型言
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法３
8 ヶ月前に setInterval 書き換えのネタで作ったやつ id:amachang:20060104:1136344836 id:amachang:20060114:1137243389 ふと ちょっと設計変えたらすごく速くなる気がして、作り替えてみた。 でも、作ってみたら clearInterval がちょっとだけ速くなったけど、正直そこまで変わらなかった。 でも、設計はきれいになったと思うので公開します。 ダウンロード http://sample.ecmascript.jp/setInterval/setInterval03.js 以前のもファイル化した 最初の失敗作(utf-8だから適当にエンコードして使ってください) 次に作ったやつ、実績はこっちのがある(utf-8だから適当にエンコードして使ってください) 使いかた すべてのスクリプトより前に読み込む <script src
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近の Web パフォーマンス改善について知っておきたいコト
実践・ウェブアプリ高速化テクニック#Chrome+HTML5 Conference