The only thing blocking your page render (if you inline the CSS) is the call to Google Fonts. Whilst it is possible to make this asynchronous, it would be easier to drop the font entirely if you care about performance. Open Sans isn’t that distinctive, so I reckon you’d get away with just using system fonts (as most modern operating systems have really nice ones nowadays). This is what I do on pretty much all my projects now. It has the advantage of making your app blend in better with the native system. More here:
https://css-tricks.com/snippets/css/system-font-stack/
If you want to keep Open Sans it might be worth looking into the new font-display property that lets you control how the browser initially tries to render text. Currently in Chrome the text is invisible for a bit whilst the font loads. If you'd rather you can have it render the fallback font until the external font loads (there are cool options like waiting a short time for the custom font, then going with the fallback if it takes too long etc). More info here:
https://developers.google.com/web/updates/2016/02/font-display
Caveat: it is a @font-face option, so you'd have to download the font and serve it yourself I think. It's also really new and will probably not work in most browsers.
The only thing blocking your page render (if you inline the CSS) is the call to Google Fonts. Whilst it is possible to make this asynchronous, it would be easier to drop the font entirely if you care about performance. Open Sans isn’t that distinctive, so I reckon you’d get away with just using system fonts (as most modern operating systems have really nice ones nowadays). This is what I do on pretty much all my projects now. It has the advantage of making your app blend in better with the native system. More here:
https://css-tricks.com/snippets/css/system-font-stack/
If you want to keep Open Sans it might be worth looking into the new
font-displayproperty that lets you control how the browser initially tries to render text. Currently in Chrome the text is invisible for a bit whilst the font loads. If you'd rather you can have it render the fallback font until the external font loads (there are cool options like waiting a short time for the custom font, then going with the fallback if it takes too long etc). More info here:https://developers.google.com/web/updates/2016/02/font-display
Caveat: it is a
@font-faceoption, so you'd have to download the font and serve it yourself I think. It's also really new and will probably not work in most browsers.