Frontend Performance Training

The best website is a fast website. Users are proven to be happier and more willing to spend time and money on your site when it loads fast and responds quickly to their actions. Adding performance to the ever-growing list of development responsibilities can seem daunting, but it doesn't have to be.

In this full-day training we'll cover development best practices to make your Drupal site fast, making the frontend as performant as possible. We will discuss how to set and maintain a performance budget, which helps prioritize site performance over the life of a project. We will cover the basics of workflow automation, which helps a team stick to a performance budget during development, and serves as a warning system when heavy, slow features are added to a site. Finally, we will demonstrate how many of these tools can be glued together as part of your continuous integration system, allowing performance to be tested at every step of the process, from development to deployment.
 

Learning Objectives

Syllabus

• Learn about the current and future state of frontend performance practices.
• Use contributed modules to tune the frontend of a Drupal site.
• Learn about automated workflow tools that keep your theme's assets lean.
• Discuss and implement a simple performance budget on a sample site.
• Combine GitHub and Travis CI to set up automated tests that are run on every pull request you create for a project.
   

Who will gain the most from this course?

• Frontend developers that want to improve the frontend performance of their projects. If you are new to frontend development, this will be too much for you to learn in one day.
• Technical leads that want to consistently deliver performant sites while managing multiple teams and projects. This course will expose you to tools that can be implemented on a single project, or deployed company-wide.
   

Prerequisites for this course

Hardware 

We prefer users have a Mac, Linux, or another Unix-based computer, but it is not required. All examples provided are tested on OS X and Ubuntu 14.04.

Software

Please try installing the following tools and repositories before the class to avoid spending so much time with setup during the training. We are happy to help you get set up, but it takes time away from training. If possible, please consult with a colleague beforehand so we can maximize the amount of time spent on our specific training materials.

• A text editor of your choice. We recommend Sublime, Atom, or a command-line tool like vim
• git and node.js — we normally install these with homebrew
• Our training materials: https://github.com/fourkitchens/frontend-perf
• Drupal development will occur on a hosted platform (or you can use your own local installation if you prefer)

Skills

• Familiarity with the command-line interface is essential.
• Familiarity with the text-editor of your choice is essential.
• Familiarity with the browser DevTools of your choice is essential.
• Knowledge of Sass/Compass would be helpful, but not required. We will NOT cover this in the training.
• Knowledge of task runners (grunt / gulp) would be helpful, but not required. We will cover this in the training.

Course Information