mmistakes/so-simple-theme

Optimize CSS Delivery

gionn opened this issue · 3 comments

gionn commented

Test with PageSpeed Insights

Your page has 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
https://mmistakes.github.io/so-simple-theme/assets/css/main.css
https://fonts.googleapis.com/…400,400i,700,700i|Lora:400,400i,700,700i

This is out of scope for the theme.

You'd need to look at altering the theme to deliver critical CSS first, then pull down the rest after the initial payload.

gionn commented

Page speed affects google search ranking, why you said is out of scope?

If you are going to merge a PR addressing this, I can look into it.

Oh, and thanks for this theme, I decided to use it after 30 seconds from initial discovery 👍

It's out of scope because there isn't much more optimizing the theme can do with regards to the CSS.
This is the sort of thing you'd need to do as part of a build step to inline the the critical CSS.

There's no good way for the theme to do it that would be supported on GitHub Pages as you'd need a plugin or run a task runner like Gulp. This adds extra complexity to the theme for those who aren't web devs and just want to write in Markdown and push to GH and have a simple site.