html - Optimizing above-the-fold CSS -
i want fix "eliminate render-blocking javascript , css in above-the-fold content" requirement better pagespeed insights score i'm not quite sure best approach problem is.
- how can best balance page load new visitors , returning visitors?
- when should load css asynchronously, when not?
- should maybe inline css small screens?
relevant presentation: optimizing critical rendering path
example
since inlining lots of css leads slower page loads on subsequent visits, serve different versions recurring visitors based on cookie. detecting above-the-fold css use bookmarklet article: paul.kinlan.me/detecting-critical-above-the-fold-css/
for new visitors:
<!doctype html> <html> <head> <title>new visitor</title> <style><!-- insert above fold css here --></style> <noscript><link rel="stylesheet" href="style.css"></noscript> </head> <body> <!-- insert content here --> <script> // load css var node = document.createelement('link'); node.rel = 'stylesheet'; node.href = 'style.css'; document.head.appendchild(node); // set cookie var exp = new date(); exp.settime(exp.gettime() + 3600 * 1000); document.cookie = 'returning=true; expires=' + exp.toutcstring() + '; path=/'; </script> </body> </html> for returning visitors:
<!doctype html> <html> <head> <title>returning visitor</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- content here --> </body> </html> any problems approach?
there such thing over-optimizing. example approach adds unneeded complexity. should looking @ minimal stylesheet head section make above fold make sense , conform design , layout (but not respect 100%).
for rest of page load rest of css @ end of page , should fine. if matters above fold, first css load. else can delayed.
Comments
Post a Comment