{"action":"created","issue":{"url":"https://api.github.com/repos/Automattic/Genericons/issues/65","labels_url":"https://api.github.com/repos/Automattic/Genericons/issues/65/labels{/name}","comments_url":"https://api.github.com/repos/Automattic/Genericons/issues/65/comments","events_url":"https://api.github.com/repos/Automattic/Genericons/issues/65/events","html_url":"https://github.com/Automattic/Genericons/pull/65","id":63583852,"number":65,"title":"Remove data-uri encoding of woff font.","user":{"login":"tollmanz","id":921795,"avatar_url":"https://avatars.githubusercontent.com/u/921795?v=3","gravatar_id":"","url":"https://api.github.com/users/tollmanz","html_url":"https://github.com/tollmanz","followers_url":"https://api.github.com/users/tollmanz/followers","following_url":"https://api.github.com/users/tollmanz/following{/other_user}","gists_url":"https://api.github.com/users/tollmanz/gists{/gist_id}","starred_url":"https://api.github.com/users/tollmanz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tollmanz/subscriptions","organizations_url":"https://api.github.com/users/tollmanz/orgs","repos_url":"https://api.github.com/users/tollmanz/repos","events_url":"https://api.github.com/users/tollmanz/events{/privacy}","received_events_url":"https://api.github.com/users/tollmanz/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-03-22T22:32:47Z","updated_at":"2015-03-24T03:12:18Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/Automattic/Genericons/pulls/65","html_url":"https://github.com/Automattic/Genericons/pull/65","diff_url":"https://github.com/Automattic/Genericons/pull/65.diff","patch_url":"https://github.com/Automattic/Genericons/pull/65.patch"},"body":"In researching WordPress' Twentyfifteen theme performance, I found that\r\ndata-uri enconding the woff Genericons font file could cause visually\r\ncomplete delays of up to 300ms on a mobile connection.\r\n\r\nWhen a browser tries to render a page, it tries to complete the CSSOM as\r\nquickly as possible so the first paint can be completed. The CSSOM is\r\ndependent upon the CSS being downloaded from the server(s). Any delays\r\nin getting the CSS can cause delays in rendering the page.\r\n\r\nThe Genericons CSS files weighs in around 16k and can be reduced to 2k\r\nwith the encoded woff file removed. The size reduction is significant\r\nand can lead to much quicker resolution of the CSSOM if this change is\r\nmade.\r\n\r\nFurthermore, data-uri encoding the font into the CSS requires that all\r\nbrowsers receive the font even if it cannot be used by the browser. If\r\nall fonts are located at external locations, the browser can make the\r\ndecision about which ones to load instead of the application, which is\r\nnot in a good place to make such a decision.\r\n\r\nThis commit removes the data-uri encoded font and prefers the external\r\nfont file instead."},"comment":{"url":"https://api.github.com/repos/Automattic/Genericons/issues/comments/85319797","html_url":"https://github.com/Automattic/Genericons/pull/65#issuecomment-85319797","issue_url":"https://api.github.com/repos/Automattic/Genericons/issues/65","id":85319797,"user":{"login":"tollmanz","id":921795,"avatar_url":"https://avatars.githubusercontent.com/u/921795?v=3","gravatar_id":"","url":"https://api.github.com/users/tollmanz","html_url":"https://github.com/tollmanz","followers_url":"https://api.github.com/users/tollmanz/followers","following_url":"https://api.github.com/users/tollmanz/following{/other_user}","gists_url":"https://api.github.com/users/tollmanz/gists{/gist_id}","starred_url":"https://api.github.com/users/tollmanz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tollmanz/subscriptions","organizations_url":"https://api.github.com/users/tollmanz/orgs","repos_url":"https://api.github.com/users/tollmanz/repos","events_url":"https://api.github.com/users/tollmanz/events{/privacy}","received_events_url":"https://api.github.com/users/tollmanz/received_events","type":"User","site_admin":false},"created_at":"2015-03-24T03:12:17Z","updated_at":"2015-03-24T03:12:17Z","body":"Thanks for taking to time to explain the history behind this decision @jasmussen.\r\n\r\nI understand where you are coming from with your decision to encode the font. I disagree with the approach as it is shipping a \"hack\" as the default setup for the font. The \"casual user\" is likely not the same user that uses the fonts with a CDN, but this is tough to quantify. It's just hard to agree with a compromised default experience that is optimized for the potential that a novice user will be using a system that allows them to deploy a website with CDN integration. It would seem better to deploy this project with best practices and other projects that use it can integrates workarounds for improved user experience.\r\n\r\nIf the woff file is being encoded, why aren't the other fonts being encoded as well? Wouldn't users end up with the same issue if the browser choses to use one of the other fonts?\r\n\r\n> If we did not include base64 -- like we did in the beginning -- we'll see tons of users confused why their icons aren't working.\r\n\r\nTo be clear, this change was in response to user reports? Was this for WordPress themes using it or with other projects?\r\n\r\n> An alternative solution would be to provide two CSS files in the Genericons download package, the default genericons.css and for the pro-users a genericons-lite.css (or a better name), then explain in the readme file why you might want to enqueue the latter. It would be an extra 16K of disk space used on the server (unless you delete the file you won't be using), but only the file enqueued will actually be loaded.\r\n\r\nAs you probably can imagine, I'd like to see the non-encoded version be the default with a \"compat\" version as a secondary version.\r\n\r\nMy main beef with this is that encoded fonts are really problematic. CSSOM construction is so important for a browser being able to get to the first paint. Extra bytes in CSS are a major culprit in blocking the CSSOM construction. When you add fonts to the CSS, you run the risk of not even needing the font in the first place. The current page might not use the font or a different font type my be preferred for the browser. As such, loading fonts via an external source tends to be the best option for performance. In the case of an icon font, loading the font in the CSS essentially prioritizes non-textual (i.e., design) elements over loading the important site content.\r\n\r\nI appreciate you elaborating on the decision to encode the font. It is reasonable and makes sense. I personally would love to see a project like this push for better performance practices even though it may mean compatibility issues."}}