Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

岩手HTML5の勉強会「モバイル時代のWebパフォーマンス」メモ

More than 5 years have passed since last update.

結構前になってしまったのですが、
2014/8/30に開催された「HTML5とか勉強会 in IWATE 2014」がありました。
普段、web系のサービス開発していましたが業務系のサービスだったため、あまりhtmlレベルでのチューニングを今までしたことがありませんでした。
なのでこれはすごく勉強なったので復習がてら書きます。
ついでにすぐに実践したいと思ったことを個人的な順位をつけて、紹介します。

資料はこちら!!
発表者はhtml5j 代表の吉川さんでした。

http://www.slideshare.net/yoshikawa_t/web-38508917

勉強会はWebパフォーマンスについての発表で、
以下の視点が重要という話からどうすれば検証できるかという実用的な話でした。

パフォーマンスチューニングの2つの視点

  • Page Load … ページのローディング、表⽰示まで のチューニング
  • Runtime … ページ中の動作を60fpsで実現する ためのチューニング

3位 アニメーションで過度な装飾を抑える

以下の装飾は処理が重い

  • border-radius
  • box-shadow
  • text-shadow
  • *‒gradient

アニメーションを使う場合は以下の設定を使用する

  • Position : transform: translate(npx,npx)
  • Scale : transform: scale(n)
  • Rotation : transform: rotate(ndeg)
  • Opacity : opacity: 0...1

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

2位 ページ中の動作が60fps以下かChrome DevToolsで確認する

kobito.1412603886.739653.png

Chrome DevToolsからTimeline ⇒ 「左の赤い記録」ボタンを押下し、グラフにボタンを押下

画面を動作させると、右軸に30fps、60fpsと表示されるため、
こちら60fpsを超えているイベントを検証していくとサイトが早くなりそうです。

1位 PageSpeed Insightsでページを検証してもらう

Googleのツールで簡単にウェブ パフォーマンスを検証するツールがあります。
それがPageSpeed Insightsです。

http://developers.google.com/speed/pagespeed/insights/

kobito.1412603363.824943.png

URLを入れて、分析すると

kobito.1412603417.963839.png

分析結果を表示してくれて、
修正内容まで教えてくれます。

今後webサービスを何かつくったら是非最初に使いたいと思ってます。

cheekit
〜 Make Local Happiness 〜 クラウドソーシング受託を通じて地域のワクワクを増やすベンチャー
http://cheekit.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away