フロントエンド速度改善をしようとして参考にしたもの - $shibayu36->blog;
最近フロントエンドの速度改善をほんの少しだけやって、いろんな資料を参考にしたので、今後また速度改善をする時に備えて、参考になった資料をまとめておく。今回パフォーマンス改善やった項目としてはExpiresヘッダ付ける、gzip圧縮かける、JSをbodyの一番下にとか基本的なことしかやらなかったので、そのあたりはこの記事ではまとめていません。 今回は「測定する」「ブラウザがどう表示しているか知る」「改善を検討する」の流れで調べていったのでその順にまとめる。 測定する 何はともあれ測定しないと何も始まらないので、まずは測定の仕方について調べた。 PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ )と、webpagetest( http://www.webpagetest.org/ ) はとりあえ
AbemaTV の番組表リニューアルに伴うパフォーマンス改善 - Qiita
以前の番組表 ↓↓↓ AbemaTV 新番組表 大きく変わったところ チャンネルが横スクロールですべて見れるようになった サイドバーにチャンネル一覧ができた 日付切り替えがセレクトボックスからカレンダー表示になった etc. 今まではチャンネルが 5ch 毎に区切られていたので、わざわざページを切り替えて見ないといけなかったのを、横スクロールですべてのチャンネルが一覧で見られるようになりました。 さらにチャンネル毎の番組表にもアクセスしやすくなり、日付の切り替えもしやすくなったかと思います。 このリリースによって、ユーザービリティが少しでも向上していれば幸いです。 しかし、便利になった反面、このリリースに至るまでに、パフォーマンス面で様々なところで問題になりました。 今回は実際にリニューアル中に課題となった箇所と解決方法の一部を紹介します。 AbemaTV 以外であまり参考にならないかもし
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブパフォーマンスの基礎とこれから
