core(stackpacks): proto uses icon_data_URL and stackPack test

lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

@@ -53,6 +53,9 @@
 <!-- FAIL(errors-in-console): exception thrown -->
 <script type="text/javascript">throw new Error('An error');</script>
 
+<!-- Stack Pack Wordpress detection script -->
+<script src="fake-script-wp-includes"></script>
+
 <style>
   body {
     color: #000;

lighthouse-core/test/report/html/renderer/util-test.js

@@ -152,7 +152,25 @@ describe('util helpers', () => {
 
       // Original audit results should be restored.
       const preparedResult = Util.prepareReportResult(clonedSampleResult);
+
+      // Delete stack packs from preparedResult
+      Object.values(preparedResult.audits).forEach(audit => {
+        if (audit.stackPacks) {
+          delete audit.stackPacks;
+        }
+      });
+
       assert.deepStrictEqual(preparedResult.audits, sampleResult.audits);
     });
+
+    it('makes stack pack objects', () => {
+      const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+      // Original audit results should be restored.
+      const preparedResult = Util.prepareReportResult(clonedSampleResult);
+
+      // Stack Pack should exist
+      assert(preparedResult.audits['unused-css-rules'].stackPacks);
+    });
   });
 });

lighthouse-core/test/results/artifacts/artifacts.json

@@ -1757,6 +1757,11 @@
       "name": "jQuery",
       "version": "2.1.1",
       "npm": "jquery"
+    },
+    {
+      "detector": "js",
+      "id": "wordpress",
+      "name": "WordPress"
     }
   ],
   "OptimizedImages": [

lighthouse-core/test/results/sample_v2.json

@@ -2619,6 +2619,9 @@
             "name": "jQuery",
             "version": "2.1.1",
             "npm": "jquery"
+          },
+          {
+            "name": "WordPress"
           }
         ],
         "summary": {}
@@ -5439,8 +5442,72 @@
       ],
       "lighthouse-core/config/default-config.js | seoCrawlingGroupDescription": [
         "categoryGroups[seo-crawl].description"
+      ],
+      "stack-packs/packs/wordpress.js | unused_css_rules": [
+        "stackPacks[0].descriptions[unused-css-rules]"
+      ],
+      "stack-packs/packs/wordpress.js | uses_webp_images": [
+        "stackPacks[0].descriptions[uses-webp-images]"
+      ],
+      "stack-packs/packs/wordpress.js | offscreen_images": [
+        "stackPacks[0].descriptions[offscreen-images]"
+      ],
+      "stack-packs/packs/wordpress.js | total_byte_weight": [
+        "stackPacks[0].descriptions[total-byte-weight]"
+      ],
+      "stack-packs/packs/wordpress.js | render_blocking_resources": [
+        "stackPacks[0].descriptions[render-blocking-resources]"
+      ],
+      "stack-packs/packs/wordpress.js | unminified_css": [
+        "stackPacks[0].descriptions[unminified-css]"
+      ],
+      "stack-packs/packs/wordpress.js | unminified_javascript": [
+        "stackPacks[0].descriptions[unminified-javascript]"
+      ],
+      "stack-packs/packs/wordpress.js | efficient_animated_content": [
+        "stackPacks[0].descriptions[efficient-animated-content]"
+      ],
+      "stack-packs/packs/wordpress.js | unused_javascript": [
+        "stackPacks[0].descriptions[unused-javascript]"
+      ],
+      "stack-packs/packs/wordpress.js | uses_long_cache_ttl": [
+        "stackPacks[0].descriptions[uses-long-cache-ttl]"
+      ],
+      "stack-packs/packs/wordpress.js | uses_optimized_images": [
+        "stackPacks[0].descriptions[uses-optimized-images]"
+      ],
+      "stack-packs/packs/wordpress.js | uses_text_compression": [
+        "stackPacks[0].descriptions[uses-text-compression]"
+      ],
+      "stack-packs/packs/wordpress.js | uses_responsive_images": [
+        "stackPacks[0].descriptions[uses-responsive-images]"
+      ],
+      "stack-packs/packs/wordpress.js | time_to_first_byte": [
+        "stackPacks[0].descriptions[time-to-first-byte]"
       ]
     }
   },
-  "stackPacks": []
+  "stackPacks": [
+    {
+      "id": "wordpress",
+      "title": "WordPress",
+      "iconDataURL": "data:image/svg+xml,%3Csvg viewBox='0 0 122.5 122.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2321759b'%3E%3Cpath d='M8.7 61.3c0 20.8 12.1 38.7 29.6 47.3l-25-68.7c-3 6.5-4.6 13.7-4.6 21.4zM96.7 58.6c0-6.5-2.3-11-4.3-14.5-2.7-4.3-5.2-8-5.2-12.3 0-4.8 3.7-9.3 8.9-9.3h.7a52.4 52.4 0 0 0-79.4 9.9h3.3c5.5 0 14-.6 14-.6 2.9-.2 3.2 4 .4 4.3 0 0-2.9.4-6 .5l19.1 57L59.7 59l-8.2-22.5c-2.8-.1-5.5-.5-5.5-.5-2.8-.1-2.5-4.5.3-4.3 0 0 8.7.7 13.9.7 5.5 0 14-.7 14-.7 2.8-.2 3.2 4 .3 4.3 0 0-2.8.4-6 .5l19 56.5 5.2-17.5c2.3-7.3 4-12.5 4-17z'/%3E%3Cpath d='M62.2 65.9l-15.8 45.8a52.6 52.6 0 0 0 32.3-.9l-.4-.7zM107.4 36a49.6 49.6 0 0 1-3.6 24.2l-16.1 46.5A52.5 52.5 0 0 0 107.4 36z'/%3E%3Cpath d='M61.3 0a61.3 61.3 0 1 0 .1 122.7A61.3 61.3 0 0 0 61.3 0zm0 119.7a58.5 58.5 0 1 1 .1-117 58.5 58.5 0 0 1-.1 117z'/%3E%3C/g%3E%3C/svg%3E",
+      "descriptions": {
+        "unused-css-rules": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.",
+        "uses-webp-images": "Consider using a [plugin](https://wordpress.org/plugins/search/convert+webp/) or service that will automatically convert your uploaded images to the optimal formats.",
+        "offscreen-images": "Install a [lazy-load WordPress plugin](https://wordpress.org/plugins/search/lazy+load/) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://wordpress.org/plugins/amp/).",
+        "total-byte-weight": "Consider showing excerpts in your post lists (e.g. via the more tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.",
+        "render-blocking-resources": "There are a number of WordPress plugins that can help you [inline critical assets](https://wordpress.org/plugins/search/critical+css/) or [defer less important resources](https://wordpress.org/plugins/search/defer+css+javascript/). Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.",
+        "unminified-css": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+css/) can speed up your site by concatenating, minifying, and compressing your styles. You may also want to use a build process to do this minification up-front if possible.",
+        "unminified-javascript": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+javascript/) can speed up your site by concatenating, minifying, and compressing your scripts. You may also want to use a build process to do this minification up front if possible.",
+        "efficient-animated-content": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video.",
+        "unused-javascript": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page.",
+        "uses-long-cache-ttl": "Read about [Browser Caching in WordPress](https://codex.wordpress.org/WordPress_Optimization#Browser_Caching).",
+        "uses-optimized-images": "Consider using an [image optimization WordPress plugin](https://wordpress.org/plugins/search/optimize+images/) that compresses your images while retaining quality.",
+        "uses-text-compression": "You can enable text compression in your web server configuration.",
+        "uses-responsive-images": "Upload images directly through the [media library](https://codex.wordpress.org/Media_Library_Screen) to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using `Full Size` images unless the dimensions are adequate for their usage. [Learn More](https://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages#Image_Size).",
+        "time-to-first-byte": "Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server."
+      }
+    }
+  ]
 }

proto/lighthouse-result.proto

@@ -368,7 +368,7 @@ message StackPack {
   string title = 2;
 
   // The icon as a data url.
-  string icon_data_url = 3;
+  string icon_data_URL = 3;
 
   // Map of audit-ids to Stack Pack descriptions.
   map<string, string> descriptions = 4;

proto/sample_v2_round_trip.json

@@ -1096,6 +1096,9 @@
                         "name": "jQuery", 
                         "npm": "jquery", 
                         "version": "2.1.1"
+                    }, 
+                    {
+                        "name": "WordPress"
                     }
                 ], 
                 "summary": null, 
@@ -3653,11 +3656,33 @@
             "warningAuditsGroupTitle": "Passed audits but with warnings", 
             "warningHeader": "Warnings: "
         }
-    },
+    }, 
     "lighthouseVersion": "4.3.0", 
     "requestedUrl": "http://localhost:10200/dobetterweb/dbw_tester.html", 
-    "runWarnings": [],
-    "stackPacks": [],
+    "runWarnings": [], 
+    "stackPacks": [
+        {
+            "descriptions": {
+                "efficient-animated-content": "Consider uploading your GIF to a service which will make it available to embed as an HTML5 video.", 
+                "offscreen-images": "Install a [lazy-load WordPress plugin](https://wordpress.org/plugins/search/lazy+load/) that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using [the AMP plugin](https://wordpress.org/plugins/amp/).", 
+                "render-blocking-resources": "There are a number of WordPress plugins that can help you [inline critical assets](https://wordpress.org/plugins/search/critical+css/) or [defer less important resources](https://wordpress.org/plugins/search/defer+css+javascript/). Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes.", 
+                "time-to-first-byte": "Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server.", 
+                "total-byte-weight": "Consider showing excerpts in your post lists (e.g. via the more tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments.", 
+                "unminified-css": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+css/) can speed up your site by concatenating, minifying, and compressing your styles. You may also want to use a build process to do this minification up-front if possible.", 
+                "unminified-javascript": "A number of [WordPress plugins](https://wordpress.org/plugins/search/minify+javascript/) can speed up your site by concatenating, minifying, and compressing your scripts. You may also want to use a build process to do this minification up front if possible.", 
+                "unused-css-rules": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page.", 
+                "unused-javascript": "Consider reducing, or switching, the number of [WordPress plugins](https://wordpress.org/plugins/) loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running [code coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage) in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page.", 
+                "uses-long-cache-ttl": "Read about [Browser Caching in WordPress](https://codex.wordpress.org/WordPress_Optimization#Browser_Caching).", 
+                "uses-optimized-images": "Consider using an [image optimization WordPress plugin](https://wordpress.org/plugins/search/optimize+images/) that compresses your images while retaining quality.", 
+                "uses-responsive-images": "Upload images directly through the [media library](https://codex.wordpress.org/Media_Library_Screen) to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using `Full Size` images unless the dimensions are adequate for their usage. [Learn More](https://codex.wordpress.org/Inserting_Images_into_Posts_and_Pages#Image_Size).", 
+                "uses-text-compression": "You can enable text compression in your web server configuration.", 
+                "uses-webp-images": "Consider using a [plugin](https://wordpress.org/plugins/search/convert+webp/) or service that will automatically convert your uploaded images to the optimal formats."
+            }, 
+            "iconDataURL": "data:image/svg+xml,%3Csvg viewBox='0 0 122.5 122.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2321759b'%3E%3Cpath d='M8.7 61.3c0 20.8 12.1 38.7 29.6 47.3l-25-68.7c-3 6.5-4.6 13.7-4.6 21.4zM96.7 58.6c0-6.5-2.3-11-4.3-14.5-2.7-4.3-5.2-8-5.2-12.3 0-4.8 3.7-9.3 8.9-9.3h.7a52.4 52.4 0 0 0-79.4 9.9h3.3c5.5 0 14-.6 14-.6 2.9-.2 3.2 4 .4 4.3 0 0-2.9.4-6 .5l19.1 57L59.7 59l-8.2-22.5c-2.8-.1-5.5-.5-5.5-.5-2.8-.1-2.5-4.5.3-4.3 0 0 8.7.7 13.9.7 5.5 0 14-.7 14-.7 2.8-.2 3.2 4 .3 4.3 0 0-2.8.4-6 .5l19 56.5 5.2-17.5c2.3-7.3 4-12.5 4-17z'/%3E%3Cpath d='M62.2 65.9l-15.8 45.8a52.6 52.6 0 0 0 32.3-.9l-.4-.7zM107.4 36a49.6 49.6 0 0 1-3.6 24.2l-16.1 46.5A52.5 52.5 0 0 0 107.4 36z'/%3E%3Cpath d='M61.3 0a61.3 61.3 0 1 0 .1 122.7A61.3 61.3 0 0 0 61.3 0zm0 119.7a58.5 58.5 0 1 1 .1-117 58.5 58.5 0 0 1-.1 117z'/%3E%3C/g%3E%3C/svg%3E", 
+            "id": "wordpress", 
+            "title": "WordPress"
+        }
+    ], 
     "timing": {
         "entries": [
             {