How performant is my GitHub Pages blog?

[john-science]

Run a performance test using various browsers and from different locations:

https://www.webpagetest.org/result/170208_X8_RGSD/

Consider:

1) Did I remove all of the unnecessary JavaScript and CSS from my site? 2) How lightweight is this pre-rendered Jekyll platform? 3) Do some of my pages have too many images? 4) What can I do to help my pages that are image-heavy load faster and better? For instance, visual placeholders that are in the right place, but are empty, allowing people to read while the image loads. 5) Should I be minifying my custom JavaScript? 6) Is the Jekyll JavaScript served up by default minified?

Read up on the general theory on modern "High Performance Browser Networking":

https://hpbn.co/

If I can improve my load times enough, it might be worth posting how I did it.

[john-science]

Minimized CSS using: https://css.github.io/csso/csso.html

NOTE: None of these CSS minimizers contract different keywords that have the same attributes. There is room for a better tool here.

[john-science]

The easiest solution for minifying my JS is to use the webapp version of the Closure Compiler:

http://closure-compiler.appspot.com/home

[john-science]

Google's webapp PageSpeed has the best starting guide to improving your website's performance (and other things).

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fantineutrino.net%2F2017%2F01%2F10%2Feww-javascript-part-2&tab=desktop

[john-science]

When build locally for testing: jekyll server is the command

[john-science]

I guess I should break the CSS into functional groups. Fewer files would also mean fewer requests to the server.

The goal is to break out the sections of CSS out that are actually needed above-the-fold. And divide the rest into sections based on media queries:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

[john-science]

To isolate above-the-fold CSS, check out this helpful blog post, which references this snippet of JavaScript, which should do that heavy-lifting. You will need this snippet, to get the JS function getMatchedCSSRules to run in Firefox.

For the final CSS compression, look here.

[john-science]

Existing CSS to Clean Up

• h1 through h5: much duplication. This can be cleaned a lot.
• How much of this ie stuff do I want to support? No one has ever visited my site with IE < 10.
• unit-article and layout-page - so complicated - simplify?

Existing CSS to Remove

• Anything with foot: I do not have a footer
• nav-global (or anything) -> capitalize. I can do this manually. And should.
• ::selection - removed from spec
• dfn - for definitions - unused
• [hidden] - unused elements appear to be working
• ins - as opposed to del - both unused
• sup and sub stuff - not sure why - just remove
• svg anything - not using it - remove unless I do
• .the-header .nav-global li ... *display - unused
• canvas, video - unused - will build custom CSS when I need it - will never be common
• aside, details, figcaption, figure, hgroup, selection, mark, legend
• .the-header .logo a:visited - overridden anyway

Existing CSS to Research, with the hope of simplifying

• There are a lot of * selectors. Do I really need all of these? They are very slow.

[john-science]

Move IE CSS to it's own file... or delete it. Use HTML conditional import.

[john-science]

Change name syntaxhighlighter.css to after-the-jump.css. Move master pre definition from style.css over to it. And... what else?

• tag_box
• list-tag & list-category
• .unit-article .entry-content:first-child - headers have margin-top already - DELETE
• fieldset - or just delete
• dl - or just delete
• all this ie stuff - or just delete?
• button - or just delete?
• textarea - or just delete?

[john-science]

The previous above/below-the-fold CSS changes finally got me Two Green Checks on Google PageSpeed!

• 89/100 on Mobile
• 95/100 on Desktop

Does Disqus affect my ratings on PageSpeed?

[john-science]

Articles on improving page speeds and PageSpeed rankings:

• http://kleopetrov.me/2015/07/03/road-to-perfection/
• https://chrishallahan.com/blog/pass-google-pagespeed-performance-test
• https://css-tricks.com/authoring-critical-fold-css/

[john-science]

I didn't get to see how removing Disqus comments affected my performance, because I was only running PageSpeed against the home page, not a post. Darn.

[john-science]

Okay, I have some good, rough outlines to test my blog's performance in the future. No reason to leave this ticket open forever.