Amp-wp: Further compress CSS by renaming long class names to short versions

[westonruter]

In Twenty Seventeen, the style.css has the following class names mentioned with the following frequencies:

  74 .main-navigation
  50 .twentyseventeen-front-page
  40 .entry-content
  38 .site-content
  35 .has-header-video
  35 .has-header-image
  34 .home
  31 .custom-header-media
  31 .blog
  29 .widget
  29 .entry-footer
  28 .has-sidebar
  23 .site-branding
  23 .panel-content
  23 .icon
  22 .gallery-item
  21 .entry-title
  19 .page-numbers
  18 .site-footer
  18 .entry-header
  18 .alignright
  17 .edit-link
  16 .wp-playlist-item
  16 .navigation-top
  16 .archive
  15 .site-title
  15 .page_item_has_children
  15 .page
  15 .menu-item-has-children
  14 .recent-posts

Instead of mentioning main-navigation (15 bytes) a total of 74 times, we could compress that down to just single byte a which would bring the total size used down from 1110 bytes to just 74 bytes—a 93% savings. This is a similar approach that is taken in JS minification, like with Uglify.

Key considerations:

• The mapping of original class names to the munged/shortened class name would need to be stable across page loads. So the mapping should be stored when we initially parse the CSS. This is a key consideration for a document updated using amp-live-list.
• The munging should be a last resort after tree shaking fails to remove enough CSS, since class name shortening has the negative effect of obfuscating the page.
• Certain class names should be excluded from munging, in particular those which are used in Microformats. The exclusion list could be filterable.

Ref https://github.com/ampproject/amphtml/issues/17269#issuecomment-431860606 and props @jpettitt and @kristoferbaxter for idea and input.

[jpettitt]

A few thing I learned doing this:

1. Create a classes to preserve list based on any that are manipulated by amp-bind and well as any that match ^amp-.*
2. Preserve classes mentioned in [class=^="foo-"] selectors (yes people do that).
3. Be careful of collisions with existing class names.
4. Don't rename anything to .ad it will get trashed by ad blockers.
5. When replacing in the html start with the longest first as this will avoid weird partial match errors.

We used b36 shifted to only be alpha.

Strictly you should have a minimum of 2 characters in a class name but 1 will work on all the browsers I've checked.

[westonruter]

The only way I'd feel comfortable with this is if we implement sourcemaps: #2917.

[westonruter]

Alternatively to sourcemaps, we could implement the class name minificiation for users who aren't in dev mode. Once in dev mode, we could then skip doing minification and mark the style[amp-custom] as also being in dev mode, knowing that it will be more than 50KB.

The minification should only be done if it is determined that the total concatenated size is greater than 50KB. If so, then a second pass will need to be done on the stylesheets to minify the class names and make the corresponding changes in the document. This will be facilitated by #4026. Once done, then the stylesheets would need to be iterated over to determine if they all fit within the 50KB limit again, which they may still not.

Note: when in dev mode we'd still want the same stylesheets to be included as the ones included when not in dev mode. So the additional computation step should be done still, but the stylesheet and the document would not get mutated.

This will incur additional per-page processing time.

[westonruter]

Maybe later.