{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/amp-wp/issues/1518","repository_url":"https://api.github.com/repos/Automattic/amp-wp","labels_url":"https://api.github.com/repos/Automattic/amp-wp/issues/1518/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/amp-wp/issues/1518/comments","events_url":"https://api.github.com/repos/Automattic/amp-wp/issues/1518/events","html_url":"https://github.com/Automattic/amp-wp/issues/1518","id":372629084,"node_id":"MDU6SXNzdWUzNzI2MjkwODQ=","number":1518,"title":"Further compress CSS by renaming long class names to short versions","user":{"login":"westonruter","id":134745,"node_id":"MDQ6VXNlcjEzNDc0NQ==","avatar_url":"https://avatars2.githubusercontent.com/u/134745?v=4","gravatar_id":"","url":"https://api.github.com/users/westonruter","html_url":"https://github.com/westonruter","followers_url":"https://api.github.com/users/westonruter/followers","following_url":"https://api.github.com/users/westonruter/following{/other_user}","gists_url":"https://api.github.com/users/westonruter/gists{/gist_id}","starred_url":"https://api.github.com/users/westonruter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/westonruter/subscriptions","organizations_url":"https://api.github.com/users/westonruter/orgs","repos_url":"https://api.github.com/users/westonruter/repos","events_url":"https://api.github.com/users/westonruter/events{/privacy}","received_events_url":"https://api.github.com/users/westonruter/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":{"url":"https://api.github.com/repos/Automattic/amp-wp/milestones/10","html_url":"https://github.com/Automattic/amp-wp/milestone/10","labels_url":"https://api.github.com/repos/Automattic/amp-wp/milestones/10/labels","id":3683538,"node_id":"MDk6TWlsZXN0b25lMzY4MzUzOA==","number":10,"title":"v1.1","description":"","creator":{"login":"westonruter","id":134745,"node_id":"MDQ6VXNlcjEzNDc0NQ==","avatar_url":"https://avatars2.githubusercontent.com/u/134745?v=4","gravatar_id":"","url":"https://api.github.com/users/westonruter","html_url":"https://github.com/westonruter","followers_url":"https://api.github.com/users/westonruter/followers","following_url":"https://api.github.com/users/westonruter/following{/other_user}","gists_url":"https://api.github.com/users/westonruter/gists{/gist_id}","starred_url":"https://api.github.com/users/westonruter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/westonruter/subscriptions","organizations_url":"https://api.github.com/users/westonruter/orgs","repos_url":"https://api.github.com/users/westonruter/repos","events_url":"https://api.github.com/users/westonruter/events{/privacy}","received_events_url":"https://api.github.com/users/westonruter/received_events","type":"User","site_admin":false},"open_issues":19,"closed_issues":5,"state":"open","created_at":"2018-09-24T16:14:09Z","updated_at":"2018-10-22T17:59:06Z","due_on":null,"closed_at":null},"comments":0,"created_at":"2018-10-22T17:59:05Z","updated_at":"2018-10-22T18:14:25Z","closed_at":null,"author_association":"COLLABORATOR","body":"In Twenty Seventeen, the `style.css` has the following class names mentioned with the following frequencies:\r\n\r\n```\r\n  74 .main-navigation\r\n  50 .twentyseventeen-front-page\r\n  40 .entry-content\r\n  38 .site-content\r\n  35 .has-header-video\r\n  35 .has-header-image\r\n  34 .home\r\n  31 .custom-header-media\r\n  31 .blog\r\n  29 .widget\r\n  29 .entry-footer\r\n  28 .has-sidebar\r\n  23 .site-branding\r\n  23 .panel-content\r\n  23 .icon\r\n  22 .gallery-item\r\n  21 .entry-title\r\n  19 .page-numbers\r\n  18 .site-footer\r\n  18 .entry-header\r\n  18 .alignright\r\n  17 .edit-link\r\n  16 .wp-playlist-item\r\n  16 .navigation-top\r\n  16 .archive\r\n  15 .site-title\r\n  15 .page_item_has_children\r\n  15 .page\r\n  15 .menu-item-has-children\r\n  14 .recent-posts\r\n```\r\n\r\nInstead 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.\r\n\r\nKey considerations:\r\n\r\n* 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`.\r\n* 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.\r\n* Certain class names should be excluded from munging, in particular those which are used in Microformats. The exclusion list could be filterable.\r\n\r\nRef https://github.com/ampproject/amphtml/issues/17269#issuecomment-431860606 and props @jpettitt and @kristoferbaxter for idea and input."},"comment":{"url":"https://api.github.com/repos/Automattic/amp-wp/issues/comments/431921034","html_url":"https://github.com/Automattic/amp-wp/issues/1518#issuecomment-431921034","issue_url":"https://api.github.com/repos/Automattic/amp-wp/issues/1518","id":431921034,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMTkyMTAzNA==","user":{"login":"jpettitt","id":524856,"node_id":"MDQ6VXNlcjUyNDg1Ng==","avatar_url":"https://avatars3.githubusercontent.com/u/524856?v=4","gravatar_id":"","url":"https://api.github.com/users/jpettitt","html_url":"https://github.com/jpettitt","followers_url":"https://api.github.com/users/jpettitt/followers","following_url":"https://api.github.com/users/jpettitt/following{/other_user}","gists_url":"https://api.github.com/users/jpettitt/gists{/gist_id}","starred_url":"https://api.github.com/users/jpettitt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpettitt/subscriptions","organizations_url":"https://api.github.com/users/jpettitt/orgs","repos_url":"https://api.github.com/users/jpettitt/repos","events_url":"https://api.github.com/users/jpettitt/events{/privacy}","received_events_url":"https://api.github.com/users/jpettitt/received_events","type":"User","site_admin":false},"created_at":"2018-10-22T18:14:25Z","updated_at":"2018-10-22T18:14:25Z","author_association":"NONE","body":"A few thing I learned doing this:\r\n\r\n1. Create a classes to preserve list based on any that are manipulated by `amp-bind` and well as any that match `^amp-.*`\r\n2. Preserve classes mentioned in `[class=^=\"foo-\"]` selectors (yes people do that).\r\n3. Be careful of collisions with existing class names.  \r\n4. Don't rename anything to `.ad` it will get trashed by ad blockers.\r\n5. When replacing in the html start with the longest first as this will avoid weird partial match errors.\r\n\r\nWe used b36 shifted to only be alpha.\r\n\r\nStrictly you should have a minimum of 2 characters in a class name but 1 will work on all the browsers I've checked."}}
{"actor":{"display_login":"jpettitt"}}