<head>.
12 | -
13 | id: drupal-cssjs-advagg-compressed
14 | text: Use the AdvAgg module to generate compressed assets.
15 | -
16 | id: drupal-cssjs-advagg-minify
17 | text: Use the AdvAgg module to minify JavaScript.
18 | -
19 | id: drupal-cssjs-advagg-cdn
20 | text: Use the AdvAgg module to reference CDN-hosted jQuery instead of the built-in copy from Drupal core.
21 | -
22 | id: drupal-cssjs-advagg-bundler
23 | text: Use the AdvAgg module to control the number of CSS/JS aggregates on the Drupal site.
24 | -
25 | id: drupal-cssjs-advagg-load
26 | text: Use the AdvAgg module to load CSS and JS asynchronously.
27 | ---
28 |
--------------------------------------------------------------------------------
/_drupal/91-activity-theming.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Theming optimization
3 | type: activity
4 |
5 | tasks:
6 | -
7 | id: drupal-grunt-criticalcss
8 | text: Use Grunt or Gulp to generate critical CSS for a theme
9 | -
10 | id: drupal-theming-prefetch
11 | text: Add a DNS pre-fetch to your theme's page template
12 | -
13 | id: drupal-theming-prerender
14 | text: Add a prerender to your theme's page template (must use Chrome or IE11 to test).
15 | ---
16 |
--------------------------------------------------------------------------------
/_drupal/92-activity-media.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Media optimization
3 | type: activity
4 |
5 | tasks:
6 | -
7 | id: drupal-media-picture
8 | text: Use the Picture module to add responsive images to your site.
9 | -
10 | id: drupal-media-lazyload
11 | text: Use the Image Lazyloader module to defer images until they are actually seen.
12 | ---
13 |
--------------------------------------------------------------------------------
/_foundation/1-concatenation.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Concatenation
3 | ---
4 |
5 | Concatenation means to combine several assets into one asset. When Drupal combines multiple stylesheets into an aggregate, that is concatenation. Another common concatenation is inlining assets into another asset (e.g. inline an image into CSS, or inlining critical CSS into HTML)
6 |
--------------------------------------------------------------------------------
/_foundation/2-minification.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Minification
3 | ---
4 |
5 | Minification is when all unimportant information is removed from a file. This typically means all whitespace and line-breaks are removed, but can also mean that JS variables are renamed to be as short as possible. Generous use of whitespace is required to maintain organized files, but the typical user never looks at your files so the whitespace is unnecessary bulk.
6 |
--------------------------------------------------------------------------------
/_foundation/3-compression.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Compression
3 | ---
4 |
5 | Compression is when your server zips up an asset before sending it to the browser. In most cases it is more efficient to zip the asset, send the smaller version, and unzip it in the browser, rather than transferring the uncompressed asset over the internet.
6 |
--------------------------------------------------------------------------------
/_foundation/4-sharding.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Domain sharding
3 | ---
4 |
5 | Domain sharding is when you set up multiple subdomains in order to "trick" the browser into opening more HTTP connections to a single website. Typically you'll see a domain that has several subdomains: css.example.com, js.example.com etc. Since a browser will only open a certain number of HTTP connections to a single host, domain sharding allows for more simultaneous connections to your server.
6 |
--------------------------------------------------------------------------------
/_img/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
52 |
--------------------------------------------------------------------------------
/_img/maps-google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fourkitchens/frontend-perf/11d63b7dfcd98955c8048826d91cf162d02ccc9f/_img/maps-google.png
--------------------------------------------------------------------------------
/_includes/critical.css:
--------------------------------------------------------------------------------
1 | /* This file intentionally left blank. See gulp task: critical */
2 |
--------------------------------------------------------------------------------
/_includes/goals-codebase.html:
--------------------------------------------------------------------------------
1 | How many of these goals can you complete? Your progress will be automatically saved. Use this site's codebase as a starting point.
2 | -------------------------------------------------------------------------------- /_includes/goals.html: -------------------------------------------------------------------------------- 1 |How many of these goals can you complete? Your progress will be automatically saved as you check the boxes.
2 | -------------------------------------------------------------------------------- /_includes/list-tasks.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
12 |
13 |
--------------------------------------------------------------------------------
/_includes/list-tools.html:
--------------------------------------------------------------------------------
1 | {{ activity.title }}
4 | {{ activity.content }}
5 |
6 |
11 | -
7 | {% for task in activity.tasks %}
8 |
- {{ task.text }} 9 | {% endfor %} 10 |
2 |
20 |
--------------------------------------------------------------------------------
/_js/progress.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This script stores each visitor's progress via localStorage.
3 | */
4 | 'use strict';
5 |
6 | var trainingPrefix = 'frontend-perf-training';
7 | var trainingName = trainingPrefix + '_dcla_';
8 |
9 | //
10 | // Check for progress when page loads.
11 | //
12 | if (localStorage.getItem(trainingName) !== null) {
13 | populateStorage();
14 | } else {
15 | initStorage();
16 | }
17 |
18 | //
19 | // First-time visit needs to initialize storage.
20 | //
21 | function initStorage() {
22 | localStorage.setItem(trainingName, trainingName);
23 | }
24 |
25 | //
26 | // Populate the page based on past progress
27 | //
28 | function populateStorage() {
29 | var checkboxes = document.querySelectorAll('input[type="checkbox"]');
30 |
31 | for (var i = 0; i < checkboxes.length; ++i) {
32 | checkboxes[i].checked = (localStorage.getItem(trainingName + checkboxes[i].id) === 'true') ? true : false;
33 | };
34 | }
35 |
36 | //
37 | // Set status of a checkbox
38 | //
39 | function setStorage(id) {
40 | var checkbox = document.getElementById(id);
41 | var newValue = (checkbox.checked) ? 'true' : 'false';
42 |
43 | // checked = true, unchecked = false.
44 | localStorage.setItem(trainingName + id, newValue);
45 | }
46 |
47 | //
48 | // Listen for changes and save each change. The entire set of checkboxes gets
49 | // saved each time.
50 | //
51 | var checkboxes = document.querySelectorAll('input[type="checkbox"]');
52 |
53 | for (var i = 0; i < checkboxes.length; ++i) {
54 | checkboxes[i].addEventListener('change', function listen() {
55 | setStorage(this.id);
56 | });
57 | };
58 |
--------------------------------------------------------------------------------
/_js/sample1.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is an example JS file that will have its comments stripped out when it
3 | * is minified.
4 | */
5 | (function () {
6 | var message1 = 'This message will appear in the minified file,';
7 | var message2 = 'but the variable name will be changed.';
8 |
9 | // console.log gets stripped out during minification
10 | console.log(message1, message2);
11 | })();
12 |
--------------------------------------------------------------------------------
/_js/sample2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This is a second JS file that will be combined with the other one.
3 | */
4 | (function () {
5 | var message1 = 'This is second JS file.';
6 | var message2 = 'It has been combined with the first.';
7 |
8 | // console.log gets stripped out during minification
9 | console.log(message1, message2);
10 | })();
11 |
--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {{ tool.title }}
3 |
4 | {{ tool.content }}
5 |
6 |
19 |
7 | {% for link in tool.links %}
8 |
9 | {% if link.type == 'official' %}Read official docs for{% endif %}
10 | {% if link.type == 'blog' %}Read a blog post about{% endif %}
11 | {% if link.type == 'more-info' %}More info on{% endif %}
12 | {% if link.type == 'video' %}Watch a video about{% endif %}
13 | {% if link.type == 'gulp' %}gulp plugin{% endif %}
14 | {{ link.text }}
15 |
16 | {% endfor %}
17 |
18 | async attribute to load JS asynchronously.
12 | ---
13 |
--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: About this Training
3 | ---
4 |
5 |
6 |
8 |
9 | About this Training
7 |
10 |
12 |
13 | Learning Objectives
11 |
14 |
34 |
35 |
15 |
16 |
20 | Create a foundation of knowledge
17 |
19 | We will walk through the process of optimizing an existing site. Learn how to identify and measure performance bottlenecks, and respond with solutions to these problems.
18 |
21 |
22 |
27 | Use automated workflow tools
23 |
26 | Tools can tirelessly check every change you make to a site, ensuring that major changes in performance do not go unnoticed during the development cycle.
24 |Use automation to always deploy an optimized build, using an asset pipeline that ensures your HTML, CSS, JS, and images are all as lean as possible.
25 |
28 |
29 |
33 | Confidently build performant sites
30 |
32 | Build sites from scratch while balancing other priorities like feature backlogs and deadlines through the use of performance budgets.
31 |
36 |
38 |
39 | Schedule
37 |
40 |
41 |
94 |
95 |
--------------------------------------------------------------------------------
/audit.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Auditing Performance
3 | ---
4 |
5 | | 8:00 - 9:00 | 43 |Breakfast / Registration | 44 |
| 9:00 - 9:45 | 47 |Foundation of Performance | 48 |
| 9:45 - 10:15 | 51 |Performance Auditing | 52 |
| 10:15 - 10:45 | 55 |Coffee break | 56 |
| 10:45 - 11:15 | 59 |Performance Auditing (cont.) | 60 |
| 10:45 - 11:45 | 63 |Drupal Modules | 64 |
| 11:45 - 1:00 | 67 |Lunch | 68 |
| 1:00 - 1:45 | 71 |Workflow Automation | 72 |
| 1:45 - 3:15 | 75 |Continuous Integration | 76 |
| 3:15 - 3:45 | 79 |Coffee break | 80 |
| 3:45 - 4:30 | 83 |Performance Budgeting | 84 |
| 4:30 - 5:00 | 87 |Wrap up / Evaluations | 88 |
| 5:00 - 6:30 | 91 |Opening reception in the Exhibit Hall | 92 |
Auditing Performance
8 |
10 |
11 | Browser DevTools
9 |
12 |
14 |
15 | We are most familiar with Chrome and so all of the browser examples will follow suit. However, most of the tools demoed are available in all browsers.
13 |Every browser has a powerful set of development tools (DevTools) lurking inside, waiting for you to unlock its full potential. Every type of browser performance problem, from page loads to animation jank, can be debugged directly in the browser. We will cover the most oft-used tools.
16 |17 | 18 |
19 | {% for tool in site.audit %}
20 | {% if tool.type == 'devtool' %}{% include list-tools.html %}{% endif %}
21 | {% endfor %}
22 |
23 |
24 |
25 |
27 |
28 | Auditing Services
26 |These tools are hosted services, meaning you don't have to rely on your personal internet connection to perform an audit. Some have the ability to throttle the connection, or choose where in the world the test is run. They all have APIs and tests can be run as part of a workflow.
29 | 30 |
31 | {% for tool in site.audit %}
32 | {% if tool.type == 'service' %}{% include list-tools.html %}{% endif %}
33 | {% endfor %}
34 |
35 |
36 |
37 |
39 |
40 | {% include goals.html %}
41 |
42 | {% for activity in site.audit %}
43 | {% if activity.type == 'activity' %}{% include list-tasks.html %}{% endif %}
44 | {% endfor %}
45 |
--------------------------------------------------------------------------------
/budgets.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Performance Budgets
3 | ---
4 |
5 | Activities
38 |
6 |
8 |
9 | Performance Budgets
7 |
10 |
11 |
16 |
17 | Note about Performance Budgets
12 |
15 | This is just as much a shift in workplace culture as it is process. Sometimes your client or product owner cannot or will not prioritize performance, so even with a warning system in place, you might not be afforded the time to fix it.
13 | Watch video about Performance Budgets 14 |The main difficulty most teams overcome is actually putting performance front and center during a normal workflow. Many problems are much harder to solve after weeks of work have been built on top of them. One way of finding problems early and often is the use of a performance budget.
18 |Just like a monetary budget, a performance budget places limits on your site, and as you develop features the budget keeps the site in check.
19 |20 | Performance budget metrics 21 | How to make a performance budget 22 |
23 | 24 | 25 |
26 |
28 |
29 | Types of budgets
27 |Time limits are a simple but effective metric that can be measured. Most any event can be listened for in the browser, and there are even whole Web APIs dedicated to performance timing.
30 |Requests are a simple thing to measure but might not always tell the whole story. For instance, you could place a limit of four CSS requests, but if one of them has 250K of inline base64 data added during development, it will not trigger a warning as long as you still only have four CSS files.
31 |File size of your page as a whole is always something good to keep in mind, especially since most mobile data plans have download limits. A heavy site costs your users money! WebPageTest includes a $ indicator on every results page letting you see an estimate of how much a single page load of your site costs in various countries.
32 |Milestones are specific to your website or app. For example, Twitter has a "time to first tweet" milestone, meaning the measure performance based on how soon the user can read content.
33 |
34 | Speed Index is a metric invented by WebPageTest.org, and combines many factors together which measure "visual completeness" and are able to factor in things like FOUT, giving better scores to sites that are progressively enhanced to be flexible and fault tolerant.
35 | Checking the Speed Index of various devices gives one of the most reliable indicators of real-world performance. It is also quick to reveal the performance impact of common sources of bloat, such as a slideshow at the top of a homepage. For that reason it can be a very effective bargaining tool during design or product discussions.
36 |
41 |
43 |
44 | Tools
42 |
45 | {% for tool in site.budgets %}
46 | {% if tool.type == 'tool' %}{% include list-tools.html %}{% endif %}
47 | {% endfor %}
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | Find More Tools
You can see a large collection of curated tools, articles, and tutorials at perf-tooling.today
56 |
58 |
59 | {% include goals-codebase.html %}
60 |
61 | {% for activity in site.budgets %}
62 | {% if activity.type == 'activity' %}{% include list-tasks.html %}{% endif %}
63 | {% endfor %}
64 |
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 |
2 | # Require any additional compass plugins above this line.
3 |
4 | # Set this to the root of your project when deployed:
5 | http_path = "/"
6 | css_dir = "css"
7 | sass_dir = "_sass"
8 | images_dir = "img"
9 | javascripts_dir = "js"
10 | fonts_dir = "fonts"
11 |
12 | # You can select your preferred output style here (can be overridden via the command line):
13 | # output_style = :expanded or :nested or :compact or :compressed
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | # relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | line_comments = false
20 |
21 | # Disable cache busting on image assets
22 | asset_cache_buster :none
23 |
--------------------------------------------------------------------------------
/css/.gitkeep:
--------------------------------------------------------------------------------
1 | # Gulp will generate CSS in this directory
2 |
--------------------------------------------------------------------------------
/drupal.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Drupal modules
3 | ---
4 |
5 | Activities
57 |Drupal modules
Drupal offers a number of modules specifically designed to improve frontend performance. Combined with a well-made theme, these modules can help your Drupal sites fly!
8 | 9 |-
10 | {% for tool in site.drupal %}
11 | {% if tool.type == 'tool' %}{% include list-tools.html %}{% endif %}
12 | {% endfor %}
13 |
16 |
18 |
19 | {% include goals.html %}
20 |
21 | {% for activity in site.drupal %}
22 | {% if activity.type == 'activity' %}{% include list-tasks.html %}{% endif %}
23 | {% endfor %}
24 |
--------------------------------------------------------------------------------
/examples/critical/critical.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # This script is extremely small because we're looking to avoid the use of
4 | # particular features of CSS. So a successful test will mean that we see a
5 | # return value of 0. Since 0 is the standard exit status for a bash script,
6 | # all we have to do is return the number of results found from grep.
7 |
8 | # The commands look for 'face' or 'url' within the critical CSS. Both of these
9 | # properties will cause the browser to make an HTTP request, but since the
10 | # critical CSS is supposed to be small and inline, it should *always* avoid
11 | # making external calls. External calls completely defeat the purpose of
12 | # inlining CSS in your HTML.
13 |
14 | FACE=`grep -c 'font-face' _includes/critical.css`
15 | URL=`grep -c 'url' _includes/critical.css`
16 |
17 | if [ "$FACE" == "0" ] && [ "$URL" == "0" ]; then
18 | echo "Critical: ✔︎ Yay! The generated CSS makes zero external requests."
19 | exit 0
20 | else
21 | TOTAL=$(($FACE + $URL))
22 | echo "Critical: ✘ Rats! The generated CSS makes $TOTAL external requests."
23 | exit $TOTAL
24 | fi
25 |
--------------------------------------------------------------------------------
/examples/grunt-perfbudget/Gruntfile.js:
--------------------------------------------------------------------------------
1 | // The settings var includes your WebPageTest API Key. To use yours, first go to
2 | // the following URL and follow the instructions to get a key:
3 | //
4 | // @see http://www.webpagetest.org/forums/showthread.php?tid=466
5 | //
6 | // Now make a file called settings.json in the same dir as this
7 | // Gruntfile and include an object like this:
8 | //
9 | // {
10 | // "key": "your-web-page-test-api-key"
11 | // }
12 | var settings = require('./settings.json');
13 |
14 | // This is the normal Gruntfile
15 | module.exports = function(grunt) {
16 | grunt.initConfig({
17 | pkg: grunt.file.readJSON('package.json'),
18 |
19 | perfbudget: {
20 | default: {
21 | // See all options here:
22 | // https://github.com/tkadlec/grunt-perfbudget#options
23 | options: {
24 | url: 'https://fourkitchens.com',
25 | key: settings.key,
26 | budget: {
27 | render: 800,
28 | requests: 12
29 | }
30 | }
31 | }
32 | }
33 | });
34 |
35 | // Load the perfbudget plugin
36 | grunt.loadNpmTasks('grunt-perfbudget');
37 |
38 | // Run the perfbudget task by default
39 | grunt.registerTask('default', ['perfbudget']);
40 | };
41 |
--------------------------------------------------------------------------------
/examples/grunt-perfbudget/README.md:
--------------------------------------------------------------------------------
1 | # Example of grunt-perfbudget
2 |
3 | If you don't add a README then npm complains :)
4 |
--------------------------------------------------------------------------------
/examples/grunt-perfbudget/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "grunt_perfbudget_example",
3 | "description": "An example implementation of grunt-perfbudget.",
4 | "repository": "git@github.com:fourkitchens/frontend-perf.git",
5 | "devDependencies": {
6 | "grunt": "^0.4.5",
7 | "grunt-perfbudget": "^0.1.6"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/examples/phantomas/phantomas--assert-requests.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | LIMIT=5
3 |
4 | echo "Phantomas: limit HTTP requests to $LIMIT"
5 | phantomas --url http://localhost:4000 --assert-requests=$LIMIT >/dev/null
6 |
7 | if [ $? -eq 0 ]
8 | then
9 | echo "Phantomas: ✔︎ Yay! The site makes $LIMIT or fewer HTTP requests."
10 | exit 0
11 | else
12 | echo "Phantomas: ✘ Rats! The site makes more than $LIMIT HTTP requests."
13 | exit 1
14 | fi
15 |
--------------------------------------------------------------------------------
/foundation.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: "Performance: why and how?"
3 | ---
4 |
5 | Activities
17 |
6 |
8 |
9 | Performance: why and how?
7 |
10 |
12 |
13 | Why care about Performance?
11 |-
14 |
- Fast sites convert users better. 15 |
- Fast sites make impatient users happier. 16 |
- Fast sites are cheaper — for both hosting and mobile data plans. 17 |
- Fast sites serve more page loads, which can generate more ad revenue. 18 |
21 |
23 |
24 | Fundamentals of Performance
22 |
25 |
27 |
28 | Many facets of performance are improving over time. One such change is HTTP/2, and it will cause sweeping changes to how sites download and arrive onto your computer. Some of the current optimizations that are a good idea with HTTP/1.1 will actually hurt your site's performance using HTTP/2. We will mark any potential regressions so you can keep the future in mind.
26 |
29 |
31 |
32 | HTTP/1.1
30 |Concatenate, minify, compress, shard.33 | 34 |
35 | {% for tool in site.foundation %}
36 | {% include list-tools.html %}
37 | {% endfor %}
38 |
39 |
40 |
41 |
43 |
44 | HTTP/2
42 |Ignore all the above advice.45 | 46 |
47 |
55 |
56 |
48 |
50 | HTTP/2 not common yet
49 |
51 |
54 | While HTTP/2 is on the horizon, HTTP/1.1 will not be going away soon.
52 |Therefore, today's training covers HTTP/1.1 techniques. These techniques will help all sites today, while HTTP/2 requires server knowledge to properly handle both types of traffic simultaneously.
53 |HTTP/2 was created to address all of the performance workarounds described in the previous section about HTTP/1.1. So if your server is using the newer protocol, none of those workarounds are necessary.
57 |For exmple, with HTTP/2 the server and browser can more efficiently use the connection they create between each other, and multiple files can be sent using one single connection. Thus, the gains achieved by concatenating when using HTTP1.1 is now a restriction that the server has no choice but to obey when using HTTP2.
58 |If you're interested in reading about HTTP/2 in order to be prepared for the future, feel free to browse the official community site.
59 | 60 | Read about HTTP/2 61 | Watch a video about HTTP/2 62 | See a demo of HTTP/2 63 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // Gulp 2 | // 3 | // This is not a normal require, because our gulp-help tool (which provides the 4 | // nice task descriptions on the command-line) requires changing the function 5 | // signature of gulp tasks to include the task description. 6 | var gulp = require('gulp-help')(require('gulp')); 7 | 8 | // Gulp / Node utilities 9 | var u = require('gulp-util'); 10 | var log = u.log; 11 | var c = u.colors; 12 | var del = require('del'); 13 | var spawn = require('child_process').spawn; 14 | var sequence = require('run-sequence'); 15 | 16 | // Basic workflow plugins 17 | var prefix = require('gulp-autoprefixer'); 18 | var sass = require('gulp-sass'); 19 | var bs = require('browser-sync'); 20 | var reload = bs.reload; 21 | 22 | // Performance workflow plugins 23 | var concat = require('gulp-concat'); 24 | var mincss = require('gulp-minify-css'); 25 | var imagemin = require('gulp-imagemin'); 26 | var uncss = require('gulp-uncss'); 27 | var uglify = require('gulp-uglify'); 28 | var critical = require('critical').stream; 29 | 30 | // Performance testing plugins 31 | var psi = require('psi'); 32 | var wpt = require('webpagetest'); 33 | var ngrok = require('ngrok'); 34 | 35 | // ----------------------------------------------------------------------------- 36 | // Remove old CSS 37 | // 38 | // This task only deletes the files generated by the 'sass' and 'css' tasks. 39 | // The 'uncss' task is slow to run and less frequently needed, so we keep the 40 | // build process fast by preserving the results of uncss. 41 | // ----------------------------------------------------------------------------- 42 | gulp.task('clean-css', false, function() { 43 | return del(['css/{all,main}*'], function (err) { 44 | if (err) { log(c.red('clean-css'), err); } 45 | else { 46 | log( 47 | c.green('clean-css'), 48 | 'deleted old stylesheets' 49 | ); 50 | } 51 | }); 52 | }); 53 | 54 | // ----------------------------------------------------------------------------- 55 | // Sass Task 56 | // 57 | // Compiles Sass and runs the CSS through autoprefixer. A separate task will 58 | // combine the compiled CSS with vendor files and minify the aggregate. 59 | // ----------------------------------------------------------------------------- 60 | gulp.task('sass', 'Compiles Sass and uses autoprefixer', function() { 61 | return gulp.src('_sass/**/*.scss') 62 | .pipe(sass({ 63 | outputStyle: 'nested', 64 | onSuccess: function(css) { 65 | var dest = css.stats.entry.split('/'); 66 | log(c.green('sass'), 'compiled to', dest[dest.length - 1]); 67 | }, 68 | onError: function(err, res) { 69 | log(c.red('Sass failed to compile')); 70 | log(c.red('> ') + err.file.split('/')[err.file.split('/').length - 1] + ' ' + c.underline('line ' + err.line) + ': ' + err.message); 71 | } 72 | })) 73 | .pipe(prefix("last 2 versions", "> 1%")) 74 | .pipe(gulp.dest('css')); 75 | }); 76 | 77 | // ----------------------------------------------------------------------------- 78 | // Combine and Minify CSS 79 | // 80 | // This task minifies all the CSS found in the css/ directory, including the 81 | // uncss-ed copies of bootstrap. The end result is a minified aggregate, ready 82 | // to be served. 83 | // ----------------------------------------------------------------------------- 84 | gulp.task('css', 'Removes old CSS, compiles Sass, combines CSS, minifies CSS', ['clean-css', 'sass'], function() { 85 | bs.notify('Running: CSS task'); 86 | 87 | return gulp.src('css/*.css') 88 | .pipe(concat('all.min.css')) 89 | .pipe(mincss()) 90 | .pipe(gulp.dest('css')) 91 | .pipe(gulp.dest('_site/css')) 92 | .pipe(reload({stream: true})); 93 | }); 94 | 95 | 96 | // ----------------------------------------------------------------------------- 97 | // UnCSS Task 98 | // 99 | // Checks the site's usage of Bootstrap and strips unused styles out. Outputs 100 | // the resulting files in the css/ directory where they will be combined and 101 | // minified by a separate task. 102 | // 103 | // Note: this task requires a local server to be running because it references 104 | // the actual compiled site to calculate the unused styles. 105 | // ----------------------------------------------------------------------------- 106 | gulp.task('uncss', 'Removes unused CSS from frameworks', function() { 107 | return gulp.src([ 108 | 'node_modules/bootstrap/dist/css/bootstrap.css', 109 | 'node_modules/bootstrap/dist/css/bootstrap-theme.css' 110 | ]) 111 | .pipe(uncss({ 112 | html: [ 113 | 'http://localhost:3000/', 114 | 'http://localhost:3000/audit/', 115 | 'http://localhost:3000/foundation/', 116 | 'http://localhost:3000/budgets/' 117 | ] 118 | })) 119 | .pipe(gulp.dest('css/')); 120 | }); 121 | 122 | // ----------------------------------------------------------------------------- 123 | // Combine and Minify JS 124 | // 125 | // Just like the CSS task, the end result of this task is a minified aggregate 126 | // of JS ready to be served. 127 | // ----------------------------------------------------------------------------- 128 | gulp.task('js', 'Combines and minifies JS', function() { 129 | return gulp.src('_js/**/*.js') 130 | .pipe(concat('all.min.js')) 131 | .pipe(uglify()) 132 | .pipe(gulp.dest('js')) 133 | .pipe(gulp.dest('_site/js')) 134 | .pipe(reload({stream: true})); 135 | }); 136 | 137 | // ----------------------------------------------------------------------------- 138 | // Generate critical-path CSS 139 | // 140 | // This task generates a small, minimal amount of your CSS based on which rules 141 | // are visible (aka "above the fold") during a page load. We will use a Jekyll 142 | // template command to inline the CSS when the site is generated. 143 | // 144 | // All styles should be directly applying to an element visible when your 145 | // website renders. If the user has to scroll even a small amount, it's not 146 | // critical CSS. 147 | // ----------------------------------------------------------------------------- 148 | gulp.task('critical', 'Generates critical CSS for the example site', function () { 149 | return gulp.src('_site/index.html') 150 | .pipe(critical({ 151 | dest: '_includes/critical.css', 152 | css: ['css/all.min.css'], 153 | dimensions: [{ 154 | width: 320, 155 | height: 480 156 | },{ 157 | width: 768, 158 | height: 1024 159 | },{ 160 | width: 1280, 161 | height: 960 162 | }], 163 | minify: true, 164 | extract: false 165 | })); 166 | }); 167 | 168 | // ----------------------------------------------------------------------------- 169 | // Minify SVGs and compress images 170 | // 171 | // It's good to maintain high-quality, uncompressed assets in your codebase. 172 | // However, it's not always appropriate to serve such high-bandwidth assets to 173 | // users, in order to reduce mobile data plan usage. 174 | // ----------------------------------------------------------------------------- 175 | gulp.task('imagemin', 'Minifies and compresses images on the example site', function() { 176 | return gulp.src('_img/**/*') 177 | .pipe(imagemin({ 178 | progressive: true, 179 | svgoPlugins: [{removeViewBox: false}] 180 | })) 181 | .pipe(gulp.dest('img')); 182 | }); 183 | 184 | // ----------------------------------------------------------------------------- 185 | // Jekyll 186 | // 187 | // Regenerate the Jekyll site when files are touched. The --watch flag is not 188 | // used because the bs/watch tasks will handle the "watching" of the files. 189 | // ----------------------------------------------------------------------------- 190 | gulp.task('jekyll', 'Development task: generate the Jekyll server', function() { 191 | bs.notify('Running: Jekyll task'); 192 | 193 | return spawn('bundle', ['exec', 'jekyll', 'build', '--config=_config.yml'], {stdio: 'inherit'}) 194 | .on('close', reload); 195 | }); 196 | 197 | // ----------------------------------------------------------------------------- 198 | // Jekyll Serve 199 | // 200 | // This command is used exclusively by Travis to start Jekyll in the background 201 | // then run tests against it. 202 | // ----------------------------------------------------------------------------- 203 | gulp.task('jekyll-serve', false, function(callback) { 204 | spawn('bundle', ['exec', 'jekyll', 'serve', '--detach', '--no-watch', '--config=_config.yml'], {stdio: 'inherit'}) 205 | .on('close', callback) 206 | }); 207 | 208 | // ----------------------------------------------------------------------------- 209 | // Browser Sync 210 | // 211 | // Makes web development better by eliminating the need to refresh. Essential 212 | // for CSS development and multi-device testing. 213 | // ----------------------------------------------------------------------------- 214 | gulp.task('browser-sync', false, function() { 215 | bs({ 216 | server: './_site/' 217 | }); 218 | }); 219 | 220 | // ----------------------------------------------------------------------------- 221 | // Browser Sync using Proxy server 222 | // 223 | // This is a second (unused) example to demonstrate how you'd connect to a local 224 | // server that runs itself. Examples would be a PHP site such as Wordpress or a 225 | // Drupal site, or a node.js site like Express. 226 | // 227 | // Usage: gulp browser-sync-proxy --port 8080 228 | // ----------------------------------------------------------------------------- 229 | gulp.task('browser-sync-proxy', false, function () { 230 | bs({ 231 | // Point this to your pre-existing server. 232 | proxy: 'my-local-site.dev' + (u.env.port ? ':' + u.env.port : ''), 233 | // This tells BrowserSync to auto-open a tab once it boots. 234 | open: true 235 | }, function(err, bs) { 236 | if (err) { 237 | console.log(bs.options); 238 | } 239 | }); 240 | }); 241 | 242 | 243 | // ----------------------------------------------------------------------------- 244 | // Watch tasks 245 | // 246 | // These tasks are run whenever a file is saved. Don't confuse the files being 247 | // watched (gulp.watch blobs in this task) with the files actually operated on 248 | // by the gulp.src blobs in each individual task. 249 | // 250 | // A few of the performance-related tasks are excluded because they can take a 251 | // bit of time to run and don't need to happen on every file change. If you want 252 | // to run those tasks more frequently, set up a new watch task here. 253 | // ----------------------------------------------------------------------------- 254 | gulp.task('watch', 'Watch for changes to various files and process them', function() { 255 | gulp.watch('_sass/**/*.scss', ['css']); 256 | gulp.watch('_js/**/*.js', ['js']); 257 | gulp.watch('_img/**/*', ['imagemin']); 258 | gulp.watch(['./**/*.{md,html}', '!./_site/**/*.*', '!./node_modules/**/*.*'], ['jekyll']); 259 | }); 260 | 261 | // ----------------------------------------------------------------------------- 262 | // Convenience task for development. 263 | // 264 | // This is the command you run to warm the site up for development. It will do 265 | // a full build, open BrowserSync, and start listening for changes. 266 | // ----------------------------------------------------------------------------- 267 | gulp.task('bs', 'Main development task:', ['css', 'js', /*'imagemin',*/ 'jekyll', 'browser-sync', 'watch']); 268 | 269 | // ----------------------------------------------------------------------------- 270 | // Performance test: Phantomas 271 | // 272 | // Phantomas can be used to test granular performance metrics. This example 273 | // ensures that the site never exceeds a specific number of HTTP requests. 274 | // ----------------------------------------------------------------------------- 275 | gulp.task('phantomas', 'Performance: measure a URL using Phantomas', function() { 276 | var limit = 5; 277 | var phantomas = spawn('./node_modules/.bin/phantomas', ['--url', 'http://localhost:4000', '--assert-requests=' + limit]); 278 | 279 | // Uncomment this block to see the full Phantomas output. 280 | // phantomas.stdout.on('data', function (data) { 281 | // data = data.toString().slice(0, -1); 282 | // log('Phantomas:', data); 283 | // }); 284 | 285 | // Catch any errors. 286 | phantomas.on('error', function (err) { 287 | log(err); 288 | }); 289 | 290 | // Log results to console. 291 | phantomas.on('close', function (code) { 292 | // Exit status of 0 means success! 293 | if (code === 0) { 294 | log('Phantomas:', c.green('✔︎ Yay! The site makes ' + limit + ' or fewer HTTP requests.')); 295 | } 296 | 297 | // Exit status of 1 means the site failed the test. 298 | else if (code === 1) { 299 | log('Phantomas:', c.red('✘ Rats! The site makes more than ' + limit + ' HTTP requests.')); 300 | process.exit(code); 301 | } 302 | 303 | // Other exit codes indicate problems with the test itself, not a failed test. 304 | else { 305 | log('Phantomas:', c.bgRed('', c.black('Something went wrong. Exit code'), code, '')); 306 | process.exit(code); 307 | } 308 | }); 309 | }); 310 | 311 | // ----------------------------------------------------------------------------- 312 | // Performance test: PageSpeed Insights 313 | // 314 | // Initializes a public tunnel so the PageSpeed service can access your local 315 | // site, then it tests the site. This task outputs the standard PageSpeed results. 316 | // 317 | // The task will output a standard exit code based on the result of the PSI test 318 | // results. 0 is success and any other number is a failure. To learn more about 319 | // bash-compatible exit status codes read this page: 320 | // 321 | // http://tldp.org/LDP/abs/html/exit-status.html 322 | // ----------------------------------------------------------------------------- 323 | gulp.task('psi', 'Performance: PageSpeed Insights', function() { 324 | // Set up a public tunnel so PageSpeed can see the local site. 325 | return ngrok.connect(4000, function (err_ngrok, url) { 326 | log(c.cyan('ngrok'), '- serving your site from', c.yellow(url)); 327 | 328 | // Run PageSpeed once the tunnel is up. 329 | psi.output(url, { 330 | strategy: 'mobile', 331 | threshold: 80 332 | }, function (err_psi, data) { 333 | // Log any potential errors and return a FAILURE. 334 | if (err_psi) { 335 | log(err_psi); 336 | process.exit(1); 337 | } 338 | 339 | // Kill the ngrok tunnel and return SUCCESS. 340 | process.exit(0); 341 | }); 342 | }); 343 | }); 344 | 345 | // ----------------------------------------------------------------------------- 346 | // Performance test: Critical CSS 347 | // 348 | // This test checks our generated critical CSS to make sure there are no external 349 | // requests which would block rendering. Having external calls defeats the entire 350 | // purpose of inlining the CSS, since the external call blocks rendering. 351 | // ----------------------------------------------------------------------------- 352 | gulp.task('critical-test', 'Performance: check the contents of critical CSS', function () { 353 | // Spawn our critical CSS test and suppress all output. 354 | var critical = spawn('./examples/critical/critical.sh', ['>/dev/null']); 355 | 356 | // Catch any errors. 357 | critical.on('error', function (err) { 358 | log(err); 359 | }); 360 | 361 | // Log results to console. 362 | critical.on('close', function (code) { 363 | // Exit status of 0 means success! 364 | if (code === 0) { 365 | log('Critical:', c.green('✔︎ Yay! The generated CSS makes zero external requests.')); 366 | } 367 | 368 | // Exit status of anything else means the test failed. 369 | else { 370 | log('Critical:', c.red('✘ Rats! The generated CSS makes ' + code + ' external requests.')); 371 | process.exit(code); 372 | } 373 | }); 374 | }); 375 | 376 | // ----------------------------------------------------------------------------- 377 | // Performance test: WebPageTest.org 378 | // 379 | // Initializes a public tunnel so the PageSpeed service can access your local 380 | // site, then it tests the site. This task outputs the standard PageSpeed results. 381 | // ----------------------------------------------------------------------------- 382 | gulp.task('wpt', 'Performance: WebPageTest.org', function () { 383 | var wpt_test = wpt('www.webpagetest.org', process.env.wptkey); 384 | 385 | // Set up a public tunnel so WebPageTest can see the local site. 386 | return ngrok.connect(4000, function (err_ngrok, url) { 387 | log(c.cyan('ngrok'), '- serving your site from', c.yellow(url)); 388 | 389 | // The `url` variable was supplied by ngrok. 390 | wpt_test.runTest(url, function(err_wpt, data_wpt) { 391 | // Log any potential errors and return a FAILURE. 392 | if (err_wpt) { 393 | log(err_wpt); 394 | process.exit(1); 395 | } 396 | 397 | // Open window to results. 398 | var wpt_results = 'http://www.webpagetest.org/result/' + data_wpt.data.testId; 399 | log(c.green('✔︎ Opening results page:', wpt_results)); 400 | spawn('open', [wpt_results]); 401 | 402 | // Note to developer. 403 | log(c.yellow('⚠️ Please keep this process running until WPT is finished.')); 404 | log(c.yellow('⚠️ Once the results load, hit Control + C to kill this process.')); 405 | }); 406 | }); 407 | }); 408 | 409 | // ----------------------------------------------------------------------------- 410 | // Performance test: run everything at once 411 | // 412 | // Having a task that simply runs other tasks is nice for Travis or other CI 413 | // solutions, because you only have to specify one command, and gulp handles 414 | // the rest. 415 | // ----------------------------------------------------------------------------- 416 | gulp.task('test', 'Run all tests', function (callback) { 417 | sequence( 418 | 'jekyll-serve', 419 | 'critical-test', 420 | 'phantomas', 421 | 'psi', 422 | 'wpt', 423 | callback 424 | ); 425 | }); 426 | 427 | // ----------------------------------------------------------------------------- 428 | // Default: load task listing 429 | // 430 | // Instead of launching some unspecified build process when someone innocently 431 | // types `gulp` into the command line, we provide a task listing so they know 432 | // what options they have without digging into the file. 433 | // ----------------------------------------------------------------------------- 434 | gulp.task('default', false, ['help']); 435 | -------------------------------------------------------------------------------- /img/.gitkeep: -------------------------------------------------------------------------------- 1 | # Gulp will generate minified/compressed images in this directory. 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome 3 | --- 4 | 5 |
6 |
8 |
9 | Frontend Performance Training
7 |
10 |
13 |
14 | Wifi: Drupal
Pass: nola2016
15 |
17 |
18 | GitHub: https://github.com/fourkitchens/frontend-perf
19 | 20 |
21 |
23 |
24 | Meet the Trainers
22 |
25 |
34 |
--------------------------------------------------------------------------------
/js/.gitkeep:
--------------------------------------------------------------------------------
1 | # Gulp will generate JS in this directory
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "frontend-perf-training",
3 | "repository": "git@github.com:fourkitchens/frontend-perf.git",
4 | "license": "MIT",
5 | "dependencies": {
6 | "fontfaceobserver": "^1.7.1"
7 | },
8 | "devDependencies": {
9 | "bootstrap": "^3.3.4",
10 | "browser-sync": "^2.6.9",
11 | "critical": "^0.7.2",
12 | "del": "^1.1.1",
13 | "ghooks": "^0.3.2",
14 | "gulp": "^3.9.0",
15 | "gulp-autoprefixer": "^2.1.0",
16 | "gulp-concat": "^2.5.2",
17 | "gulp-exit": "0.0.2",
18 | "gulp-help": "^1.6.1",
19 | "gulp-imagemin": "^2.3.0",
20 | "gulp-minify-css": "^1.0.0",
21 | "gulp-sass": "^1.3.3",
22 | "gulp-uglify": "^1.2.0",
23 | "gulp-uncss": "^1.0.1",
24 | "gulp-util": "^3.0.4",
25 | "ngrok": "^2.1.8",
26 | "phantomas": "^1.10.0",
27 | "psi": "^1.0.6",
28 | "run-sequence": "^1.1.0",
29 | "webpagetest": "^0.3.3"
30 | },
31 | "config": {
32 | "ghooks": {
33 | "pre-push": "node_modules/.bin/gulp test"
34 | }
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/workflow.html:
--------------------------------------------------------------------------------
1 | ---
2 | title: Workflow Automation
3 | ---
4 |
5 |
26 | 
Taylor Smith is a graphic designer and frontend developer with a passion for the clean code, strong typography, great design, and other curiosities.
28 |
29 | Taylor Smith
27 | Taylor Smith is a graphic designer and frontend developer with a passion for the clean code, strong typography, great design, and other curiosities.
30 | 
Luke is a Javascript developer who recently leveled up his Sass/Frontend Drupal skills. He enjoys learning new concepts and skills and then applying them. He does not enjoy writing bios.
32 |
33 | Luke Herrington
31 | Luke is a Javascript developer who recently leveled up his Sass/Frontend Drupal skills. He enjoys learning new concepts and skills and then applying them. He does not enjoy writing bios.
Workflow Automation
8 |
15 |
16 |
9 |
11 | Using within Drupal
10 |
12 |
14 | Many people place these tools in the primary theme folder of their site. However, it is often more useful to put them in the root of your repo, so that both custom modules and themes can share the same workflow, coding standards, and so forth.
13 |Sometimes installing a few modules won't cut it, and you'll need to rely on additional tools to improve your theme's output. A theme is often the source of many images, scripts, and other things that slow the frontend down.
17 |Using a consistent process to make sure all of your assets are always lean is a good way to control the page weight of a site.
18 | 19 |Automation tools
20 | 21 |With these tools you will be able to capture repetitive tasks and run them automatically whenever you need them. It might be as frequent as a file save, or only once per deploy. But either way, having an automated workflow is less error-prone and more reliable than manually remembering and executing the tasks.
22 | 23 |
24 | {% for tool in site.automation %}
25 | {% if tool.type == 'tool' %}{% include list-tools.html %}{% endif %}
26 | {% endfor %}
27 |
28 |
29 | Optimization tools
30 | 31 |Here is a list of tools we frequently use in our frontend workflow:
32 | 33 |
34 | {% for tool in site.workflow %}
35 | {% if tool.type == 'tool' %}{% include list-tools.html %}{% endif %}
36 | {% endfor %}
37 |
38 |
39 |
40 |
42 |
43 | {% include goals-codebase.html %}
44 |
45 | {% for activity in site.workflow %}
46 | {% if activity.type == 'activity' %}{% include list-tasks.html %}{% endif %}
47 | {% endfor %}
48 |
--------------------------------------------------------------------------------