Coder Social home page Coder Social logo

Comments (3)

y7kim avatar y7kim commented on July 22, 2024

Hey zbeekman,

I am afraid that I'm not so up to speed with above-the-fold techniques, though now you have me intrigued. I doubt I could provide any insight on manually identifying above-the-fold CSS but these tools look like they could help:

http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
https://github.com/addyosmani/critical

Have you tried either of these?

from agency-jekyll-theme.

zbeekman avatar zbeekman commented on July 22, 2024

Strange, in my email notification, there was a link to uncss too, but I don't see it in your post.

I tried using critical, but it extracts a ton of stuff. I'm intrigued by uncss, especially if it can handle media queries well. I had tried a different tool (I don't remember which) that failed epically with the media queries. Using critical ends up actually including a lot of stuff and I think that some of order of precedence gets changed with critical resulting in some odd rendering problems.

I also came across this post which uses jekyll's built-in sass functionality to merge and minify all the css, and then simply jam it all into the <head><style> section. I like that this dispenses with the asynchronous javascript styling. The only problem is that the browser needs to read through the entire sites style sheet before it can start painting, if I understand correctly, so the site's css needs to be relatively small.

I think this latter approach might be feasible using jekyll's built-in sass capabilities. If my very limited understanding of sass is correct, then .css files should be valid scss files, no? So I think I have a decent handle on how to proceed.

The last performance issue that needs addressing is the google-fonts css url requests. The most ideal solution would be for me to find open web fonts and serve them directly.

from agency-jekyll-theme.

zbeekman avatar zbeekman commented on July 22, 2024

scratch that, uncss is the tool I tried to use that didn't seem to work at all...

from agency-jekyll-theme.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.