Post on 02-Dec-2014
description
/ Jonas Ohlsson @pocketjoso
AutomatingFaster PageRendering
— Step by step from start to finish
Today's talk
Start Render TimeWhat is the browser waiting for?
JS & CSSBlocking assets
HTTP Requests are evil(In current protocol)
Reduce Render StartTime: How to
<html> <head>... <link rel="stylesheet" href="css/styles.css"> <script src="js/scripts.js"></script></head><body><!--Blocking HTTP requests AFTER DOM content--></body></html>
Reduce Render StartTime: How to
<html> <head>...<!--Inline CSS to avoid HTTP request. Only critical css for page though!--> <style> body { color: #202020; } </style></head><body><!--Page content here--> <link rel="stylesheet" href="css/styles.css"> <script src="js/scripts.js"></script></body></html>
What is critical (css)?
“Styles needed to render immediately visibleDOM content.”
Me, right now
Step 1. GenerateCreating the critical CSS
Manually?No way!
Scripting//for each selector in full CSS:var elements = document.querySelectorAll(".myClass");//for each element on page matchedfor (var i=0; i < elements.length; i++){ //if "above the fold" if (elements[i].getBoundingClientRect().top > window.innerHeight) { //keep CSS rules that use this selector keepThis = true; }}
Slightly more complicated..
@-Rules (@font-face, @media, @keyframe...)
pseudo-selectors (:before, :hover ..)
others.. (input:-moz-focus-inner, ::-webkit-input-
placeholder)
Perfection
Necessary for automation
Demohttp://jonassebastianohlsson.com/criticalpathcssgenerator
Step 2. BuildAutomating the critical css generation
PenthouseCLI, Node, Grunt, Gulp (Thanks !)@kopseng
https://github.com/pocketjoso/penthouse
Grunt generate setuppenthouse: { task1 : { css : 'css/jso.min.css', url : 'http://localhost/jso/index.php', outfile : 'index.php.css', width : 1300, height : 900 }}
Grunt generate setuppenthouse: { task1 : { css : 'css/jso.min.css', url : 'http://localhost/jso/index.php', outfile : 'index.php.css', width : 1300, height : 900 }, task2 : { css : 'css/jso.min.css', url : 'http://localhost/jso/work/index.php', outfile : 'work/index.php.css', width : 1300, height : 900 } /*..etc !*/}
Step 3. ServeMaking use of the critical CSS
PHP serve setup<head><?php//get file on server for this page$pagefile = $_SERVER['DOCUMENT_ROOT'] . $_SERVER['PHP_SELF'];//answer like 'C:/xampp/htdocs/jso/index.php'
//check if there is a corresponding critical css file$critcssfile = $pagefile . ".css";if (file_exists($critcssfile)) { $USE_CRITICAL_CSS = true;?> <!--inline critical path CSS--> <style><?php include($critcssfile);?></style><?php } else { ?> <!--fallback - no critical css found for page --> <link rel="stylesheet" href="/jso/css/jso.min.css" media="all"><?php } ?></head>
PHP footer<!--towards end of page..-><!--CSS - if using Critical Path CSS on page--><?php if($USE_CRITICAL_CSS){?><link rel="stylesheet" href="/jso/css/jso.min.css" media="all"><?php } ?></body></html>
THE END
LinksCritical Path Css generator tools
Penthouse [https://github.com/pocketjoso/penthouse]
Online Critical path css generator
[http://jonassebastsianohlsson.com/criticalpathcssgenerator]
Critical (extract & inline critical css automation)
[https://github.com/addyosmani/critical]
LinksPerformance testing
WebPageTest [http://webpagetest.org]
PageSpeed Insights [http://developers.google.com/speed/pagespeed/insights/]
Pingdom Website Speed Test [http://tools.pingdom.com/fpt/]
LinksGoing further
loadCSS (faster than using links, for full footer CSS)
[https://github.com/filamentgroup/loadCSS]
basket.js (store CSS/JS in localStorage rather than browser
cache) [http://addyosmani.github.io/basket.js/]
How to make RWD sites load fast as heck
[http://filamentgroup.com/lab/performance-rwd.html]