loadCSS

Clicking the permalink often brings up reply for lower nested comments. >There is no reason to load any JavaScript on a page that only contains some text and images. While I've not read through all of Amp's JS to know what it's for, I will say I've used JS to specifically speed up static pages before. One example is the Filament Group's loadCSS script[0]. This allows for cross-platform asynchronous CSS loading. Font loading is also another tricky subject. Linking non-blocking font assets while minimizing FOIT and FOUT is still not a solved problem. Smashing Magazine just had a 50 minute video presentation[1] on this problem. JS loaders are a common approach. So I disagree with you that page speed is not the primary goal here, simply because I've run into these same kinds of problems myself and can relate. Google also has the advantag

Version B could probably be optimized here by not loading two very similar fonts. You can also try loading the font locally first, to avoid the download if it's installed on the user's system. Finally, unicode-range lets you avoid the download completely if that character isn't included on the page. Not a likely outcome on an English page, but a good practice regardless. Webfonts are tough to optimize, but not impossible. Right now there's solutions of using Javascript to background the font so it's non-blocking (eg. loadCSS[1]), but it's not ideal when trying to keep overhead down. The situation should improve once font-display[2] becomes standardized. For what it's worth though, I find Version B looks much nicer. [1] https://github.com/filamentgroup/loadCSS [2] https://css-tricks.com/font-display-masses/

HTTP/2 helps with that but the total size still matters. This is particularly relevant for resources like CSS which block rendering – even with HTTP/2 making it less important whether that's one big resource or a dozen small ones, the page won't render until it's all been transferred. https://github.com/filamentgroup/loadCSS#recommended-usage-p... has a rather nice way to load CSS asynchronously in browsers which support rel=preload.

At the moment I'm using loadCSS (https://github.com/filamentgroup/loadCSS) to render local fonts on my projects. I wonder how difficult would be to create a subset of the font to load first, and then switch it for the full family once the site is loaded (as the article suggests). What is the best font-loading strategy today?

Sure, here's some notes I have from building the Shittalk Generator Minify HTML (http://www.willpeavy.com/minifier/) Minify CSS (YUICompressor) Minify JS (Google Closure Compiler) Enable gzip compression Replace jQuery (29kB) with Zepto (9.6kB) Remove Bootstrap.js dependancy (usually, you don't need it) Heavy reliance on async ajax calls (only load visible page content, load everything else on scroll using a function like below) $(window).ready(function () { $(this).one('scroll', function () { //only executes once // call this data when a user scrolls down for the first time // only do this with below-the-fold content }); }); Make efficient database queries, bundle them together when you can. Use loadCSS to asynchronously load non-essential CSS after the page has been loaded: https:

Seriously. CSS loading/parsing is render blocking. By loading CSS that isn't needed immediately asynchronously in a way that will use the browser cache if it's available, it makes the page visible much faster. It feels like overkill in the simple example, but it's a tried and true method. ( https://github.com/filamentgroup/loadCSS has > 2k stars if that kinda thing means anything) From my experience on a large website (m.trulia.com), On a 3G connection with an 'average' (nexus 5) phone, this technique made almost a 2 second difference in perceived load time.