Closed john-science closed 6 years ago
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.
The easiest solution for minifying my JS is to use the webapp version of the Closure Compiler:
Google's webapp PageSpeed has the best starting guide to improving your website's performance (and other things).
When build locally for testing: jekyll server
is the command
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:
Existing CSS to Clean Up
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
foot
: I do not have a footernav-global
(or anything) -> capitalize
. I can do this manually. And should.::selection
- removed from specdfn
- for definitions - unused[hidden]
- unused elements appear to be workingins
- as opposed to del
- both unusedsup
and sub
stuff - not sure why - just removesvg
anything - not using it - remove unless I do.the-header .nav-global li
... *display
- unused.the-header .logo a:visited
- overridden anywayExisting CSS to Research, with the hope of simplifying
*
selectors. Do I really need all of these? They are very slow.Move IE CSS to it's own file... or delete it. Use HTML conditional import.
Change name syntaxhighlighter.css
to after-the-jump.css
. Move master pre
definition from style.css
over to it. And... what else?
The previous above/below-the-fold CSS changes finally got me Two Green Checks on Google PageSpeed!
Does Disqus affect my ratings on PageSpeed?
Articles on improving page speeds and PageSpeed rankings:
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.
Okay, I have some good, rough outlines to test my blog's performance in the future. No reason to leave this ticket open forever.
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.