new_audit: efficient-animated-content - use videos instead of gifs #4885

wardpeet · 2018-03-28T21:35:51Z

Only number 1 is covered by this one

Implement an audit that identifies GIFs from network records by contentType and flags all GIFs over 10kb with some title "Use a video format for animated content" (or something much better someone comes up with 😄), description calls out that if your GIF is not animated consider PNG/WebP

So I check mimetype and webinspector type as mentioned in our meeting. If you could give some pointers on the metadata part and maybe the audit name 😛 I would appreciate that.

@addyosmani @patrickhulce @paulirish

wardpeet · 2018-03-28T21:36:32Z

lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

@@ -35,13 +35,13 @@ module.exports = [
        extendedInfo: {
          value: {
            results: {
-              length: 18,
+              length: 19,


had to bump these as I added another request to the dbw tester file

shall we finally just convert this to '>15' or something?

patrickhulce

looks good! not a whole lot to this one :)

patrickhulce · 2018-03-28T21:39:48Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+const WebInspector = require('../../lib/web-inspector');
+
+// the threshold for the size of GIFs wich we flag as unoptimized
+const GIF_BYTE_THRESHOLD = 10 * 1000;


patrickhulce · 2018-03-28T21:40:15Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+    return {
+      name: 'uses-optimized-animated-images',
+      informative: true,
+      description: 'Use a video format for animated content',


s/a format/formats

patrickhulce · 2018-03-28T22:03:12Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+      name: 'uses-optimized-animated-images',
+      informative: true,
+      description: 'Use a video format for animated content',
+      helpText: 'no help here, your on your own!',


my take: "Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Learn more."

wikipedia link

patrickhulce · 2018-03-28T22:05:11Z

lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

@@ -35,13 +35,13 @@ module.exports = [
        extendedInfo: {
          value: {
            results: {
-              length: 18,
+              length: 19,


shall we finally just convert this to '>15' or something?

paulirish · 2018-03-30T23:30:02Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+const WebInspector = require('../../lib/web-inspector');
+
+// the threshold for the size of GIFs wich we flag as unoptimized
+const GIF_BYTE_THRESHOLD = 10 * 1024;


let's make it 100kb.

we just looked at 3000 GIFs and encoded 2200 of them (the valid ones).
and then did an analysis. looks like 92% of gifs above 100k are animated. and of those, only 2% of them get bigger as a video.

SO WE GOOD.

patrickhulce

LGTM! I think there's just some 🚲 🏠 left to do on learn more link, and audit naming

patrickhulce · 2018-04-10T22:55:13Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+      description: 'Use video formats for animated content',
+      helpText: 'Large GIFs are inefficient for delivering animated content. Consider using ' +
+        'MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save ' +
+        'network bytes. [Learn more](https://en.wikipedia.org/wiki/Video_alternative_to_GIF)',


@paulirish @addyosmani any better link here? when does that post go live :)

Looks like it wont be live within the next week. But hopefully soon after that? cc @malchata

Yep. That's the plan. I want to blast through feedback in the next couple days and get it into a PR. Knowing the PR process, it'd be next week.

patrickhulce · 2018-04-10T22:57:33Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+   */
+  static get meta() {
+    return {
+      name: 'uses-optimized-animated-images',


might want to 🚲 🏠 this name, people seemed to be real confused with our last "optimized" images audit

uses-optimized-animated-content
uses-efficient-animations
optimizes-animated-content

none of those really seem better to me than what you've got, but others may have ideas :)

good call. since the recommendation is to use video, it's kinda weird to use this current name.

efficient-animated-content is my proposal.

paulirish

Let's go for an opportunity!

Over here I left a fn we can use to estimate savings for each file.

we can then use the byteEfficiency method for computing overall savings.

wdyt?

paulirish · 2018-04-11T00:33:19Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+   */
+  static get meta() {
+    return {
+      name: 'uses-optimized-animated-images',


good call. since the recommendation is to use video, it's kinda weird to use this current name.

efficient-animated-content is my proposal.

paulirish · 2018-04-11T00:52:34Z

lighthouse-core/config/default-config.js

@@ -290,6 +291,7 @@ module.exports = {
        {id: 'screenshot-thumbnails', weight: 0},
        {id: 'mainthread-work-breakdown', weight: 0, group: 'perf-info'},
        {id: 'font-display', weight: 0, group: 'perf-info'},
+        {id: 'uses-optimized-animated-images', weight: 0, group: 'perf-info'},


isn't this a perf-hint? feels pretty equivalent to optimized-images, which is an opportunity.
(will also need to change informative)

paulirish · 2018-04-11T00:53:15Z

lighthouse-core/audits/byte-efficiency/uses-optimized-animated-images.js

+    });
+
+    const headings = [
+      {key: 'url', itemType: 'url', text: 'Url'},


paulirish

lgtm % nits

paulirish · 2018-04-23T16:29:33Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+    return {
+      name: 'efficient-animated-content',
+      scoreDisplayMode: ByteEfficiencyAudit.SCORING_MODES.NUMERIC,
+      description: 'Use a video formats for animated content',


s/a video formats/video formats/

;)

paulirish · 2018-04-23T16:30:28Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+  /**
+   * Calculate savings percentage
+   * @param {number} bytes
+   * @see https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-380296510} bytes


paulirish · 2018-04-23T16:31:28Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+  }
+
+  /**
+   * Calculate savings percentage


Calculate rough savings percentage based on 1000 real gifs transcoded to video

paulirish · 2018-04-23T16:33:04Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+   * @see https://github.com/GoogleChrome/lighthouse/issues/4696#issuecomment-380296510} bytes
+   */
+  static getPercentSavings(bytes) {
+    return (29.1 * Math.log10(bytes) - 100.7) / 100;


can you throw a math.round() around the numerator?

paulirish · 2018-04-23T16:35:14Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+const WebInspector = require('../../lib/web-inspector');
+const ByteEfficiencyAudit = require('./byte-efficiency-audit');
+
+// the threshold for the size of GIFs wich we flag as unoptimized


typo (wich), but let's rewrite this anwyay

If GIFs are above this size, we'll flag them
See #4885 (comment) and #4696 (comment)

paulirish · 2018-04-23T19:22:04Z

lighthouse-core/audits/byte-efficiency/efficient-animated-content.js

+      description: 'Use a video formats for animated content',
+      helpText: 'Large GIFs are inefficient for delivering animated content. Consider using ' +
+        'MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save ' +
+        'network bytes. [Learn more](https://en.wikipedia.org/wiki/Video_alternative_to_GIF)',


https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/

wardpeet · 2018-04-24T06:04:20Z

@paulirish I believe everything is fixed

paulirish · 2018-04-25T18:22:59Z

not sure why smoketests failed on appveyor but not travis
but i saw this same failure on the previous travis run here.

also check out the displayValue. needs some toLocaleString, probably via a util method.

ignore the commitlint failure. that's my bug. :/

wardpeet · 2018-04-25T18:27:49Z

Indeed, no idea why locally it's always green

wardpeet · 2018-04-27T21:07:15Z

@paulirish @patrickhulce said we should go for this implementation and he was going to look at it later.

Sorry if I misunderstood @patrickhulce 😛

patrickhulce · 2018-04-27T21:13:41Z

lighthouse-cli/test/smokehouse/dobetterweb/dbw-expectations.js

+          items: [
+            {
+              url: 'http://localhost:10200/dobetterweb/lighthouse-rotating.gif',
+              totalBytes: 934285,


👍 yeah @paulirish I told ward I'd tackle a more fine-grained assertion when I finish the other lantern opportunity rejiggering

sgtm i like the look of this

…ogleChrome#4885)

wardpeet requested review from brendankenny, patrickhulce and paulirish as code owners March 28, 2018 21:35

wardpeet commented Mar 28, 2018

View reviewed changes

devtools-bot added the waiting4reviewer label Mar 28, 2018

patrickhulce reviewed Mar 28, 2018

View reviewed changes

patrickhulce added waiting4committer and removed waiting4reviewer labels Mar 28, 2018

devtools-bot added waiting4reviewer and removed waiting4committer labels Mar 29, 2018

paulirish reviewed Mar 30, 2018

View reviewed changes

wardpeet force-pushed the feature/audit-gif-video branch from 4893f20 to 4a6083e Compare April 3, 2018 18:36

wardpeet force-pushed the feature/audit-gif-video branch from 4a6083e to 978758a Compare April 10, 2018 21:06

patrickhulce approved these changes Apr 10, 2018

View reviewed changes

paulirish requested changes Apr 11, 2018

View reviewed changes

wardpeet force-pushed the feature/audit-gif-video branch from 052b08c to 1ac3263 Compare April 12, 2018 19:31

wardpeet force-pushed the feature/audit-gif-video branch from 89f43e6 to 8cd3119 Compare April 22, 2018 14:16

paulirish approved these changes Apr 23, 2018

View reviewed changes

paulirish mentioned this pull request Apr 23, 2018

ByteEfficiency reports no savings in animated GIF->video cases #5017

Closed

paulirish reviewed Apr 23, 2018

View reviewed changes

paulirish changed the title ~~new-audit(optimized-animated-content): use videos instead of gifs~~ new-audit(efficient-animated-content): use videos instead of gifs Apr 23, 2018

wardpeet force-pushed the feature/audit-gif-video branch from 55f5185 to 50e3289 Compare April 24, 2018 06:02

wardpeet added 7 commits April 25, 2018 19:35

new-audit(optimized-animated-content): use videos instead of gifs

7291b14

Setup smoketests

8448912

Review changes

fc30c77

change threshold to 100kb

27c8f31

Review changes

0bb7652

Rename optimized animated image audit

c8d017c

Fix travis (eslint & smoke)

e682b5e

wardpeet added 6 commits April 25, 2018 19:35

Update bytesize - smoke

63266f5

Fix travis

c7f99f2

Review fixes

4e1707d

Add typings

31a188d

Fix jsdoc typing

18fab9b

Fix lhr json

5f9c066

wardpeet force-pushed the feature/audit-gif-video branch from b597d17 to 5f9c066 Compare April 25, 2018 17:40

paulirish changed the title ~~new-audit(efficient-animated-content): use videos instead of gifs~~ new_audit(efficient-animated-content): use videos instead of gifs Apr 25, 2018

paulirish changed the title ~~new_audit(efficient-animated-content): use videos instead of gifs~~ new_audit: efficient-animated-content - use videos instead of gifs Apr 25, 2018

wardpeet added 2 commits April 25, 2018 22:45

Fix smoketest?

0d7c6a9

fix smoketest

8686e8e

patrickhulce reviewed Apr 27, 2018

View reviewed changes

paulirish merged commit 6045fa9 into master Apr 27, 2018

paulirish deleted the feature/audit-gif-video branch April 27, 2018 21:43

paulirish removed the waiting4reviewer label Apr 30, 2018

kdzwinel pushed a commit to kdzwinel/lighthouse that referenced this pull request Aug 16, 2018

new_audit: efficient-animated-content, use videos instead of gifs (Go…

dc0bdcd

…ogleChrome#4885)

brendankenny mentioned this pull request Jul 10, 2019

Image audit: check for animated GIFs that could be videos #2586

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new_audit: efficient-animated-content - use videos instead of gifs #4885

new_audit: efficient-animated-content - use videos instead of gifs #4885

wardpeet commented Mar 28, 2018

wardpeet Mar 28, 2018

patrickhulce Mar 28, 2018

patrickhulce left a comment

patrickhulce Mar 28, 2018

patrickhulce Mar 28, 2018

patrickhulce Mar 28, 2018

patrickhulce Mar 28, 2018

paulirish Mar 30, 2018

patrickhulce left a comment

patrickhulce Apr 10, 2018

paulirish Apr 11, 2018

malchata Apr 11, 2018

patrickhulce Apr 10, 2018

paulirish Apr 11, 2018

paulirish left a comment

paulirish Apr 11, 2018

paulirish Apr 11, 2018

paulirish Apr 11, 2018

paulirish left a comment

paulirish Apr 23, 2018

paulirish Apr 23, 2018

paulirish Apr 23, 2018

paulirish Apr 23, 2018

paulirish Apr 23, 2018

paulirish Apr 23, 2018

wardpeet commented Apr 24, 2018

paulirish commented Apr 25, 2018 •

edited

Loading

wardpeet commented Apr 25, 2018

wardpeet commented Apr 27, 2018

patrickhulce Apr 27, 2018

paulirish Apr 27, 2018

new_audit: efficient-animated-content - use videos instead of gifs #4885

new_audit: efficient-animated-content - use videos instead of gifs #4885

Conversation

wardpeet commented Mar 28, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

patrickhulce left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardpeet commented Apr 24, 2018

paulirish commented Apr 25, 2018 • edited Loading

wardpeet commented Apr 25, 2018

wardpeet commented Apr 27, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paulirish commented Apr 25, 2018 •

edited

Loading