Automating Landscape Illustration with Pen and Ink Style Rendering ...
Automating Faster Page Rendering - step by step from start to finish
31
/ Jonas Ohlsson @pocketjoso Automating Faster Page Rendering — Step by step from start to finish
-
Upload
jonas-ohlsson -
Category
Internet
-
view
373 -
download
0
description
You might have heard of critical path CSS and its impact on performance, but how can we take care of this problem today? Doing it manually is time consuming, error prone, and a nightmare to maintain. These slides will show you how to automate the process, using a tool that I built for this purpose.
Transcript of Automating Faster Page Rendering - step by step from start to finish
/ 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]
