Two weeks ago, web chef emeritus Ian Carrico and myself had the pleasure of of both training and speaking about frontend performance at DrupalCon LA. I’d like to describe our free, open source training materials a bit to entice you to try them, and perhaps start building a culture of performance within your team.
The materials are presented as a mini-website. When you clone the repository, the website is not optimized, giving you a great starting point for trying out all the tools. Just follow the setup instructions and you’ll be on your way to optimizing in no time. All sections of the training have small, discrete activities included. It has a built-in progress saver so you can skip between sections and come back later with all your completed tasks marked for you.
Auditing
There are many tools for auditing, the first step which involves collecting data in order to identify performance problems. This might sound familiar since it’s basically how you identify any computing problem, but it’s especially important when you want to speed up a site because you might only be afforded time to make a few key fixes, so it’s important to identify the major problems and prioritize those.
Materials include activities focusing on Chrome’s DevTools (Opera, Firefox and IE11 have very similar options), WebPageTest.org, YSlow, and Google PageSpeed Insights. Each tool has its strengths and weaknesses depending on how much setup you want to do, how realistic you want the test’s internet connection to be, or how frequently you can run the test during development. During the course of my daily work I use all of them for various reasons.
Drupal tools
Since this was a training tailored especially for DrupalCon, we included a section for modules that can help speed up your Drupal site. We highly recommend AdvAgg amongst a couple other modules. AdvAgg allows you to tweak your aggregates, minify JS (a capability not included in Drupal 7 core), and pre-compress files in case your IT setup doesn’t easily facilitate that sort of thing.
The repo is not a Drupal site; it’s Jekyll. It makes getting started with the other sections much more simple. But if you’d like to quickly get started with a Drupal site in need of optimization I’d recommend setting up a free account at Pantheon and creating an Open Atrium 2 site. There will be plenty of problems to fix! For theming tools, check out the next section:
Workflow tools
While there are many options for frontend workflow today, the kit uses gulp. I like gulp because of its speed and flexibility in chaining actions together. I think these two factors really make or break a workflow.
The idea behind a good workflow is to turn high-fidelity, uncompressed, well-commented files into lean, compressed, and optimized assets. With that in mind we included the following tools to help you develop quickly while still shipping very optimized files:
- BrowserSync, the most amazing way to develop real-time on multiple devices.
- libsass (much faster than Ruby Sass or Compass)
- CSS reduction (strips out cruft from libraries like Bootstrap)
- CSS autoprefixing (never worry about vendor prefixes again!)
- CSS minification
- JS minification
- Image compression/minification
- Generation of critical CSS
Testing tools
As with many automated processes, sometimes our workflow tools will do something we didn’t expect. In order to keep things in check, we supplied a few tests that you can run. These tests make sure that you’re shipping the best possible work. Combined with git hooks, these tests automatically run when you try to push your code (before you create a pull request, for instance). That way you don’t get distracted while working, but you do have to check your tests before sharing your code. The kit includes the following tests:
- Test to check for render-blocking critical CSS
- Google PageSpeed Insights test
- Phantomas test for total number of HTTP requests
- grunt-perfbudget example
Finally, tests are only good when you consistently run them. To help with that, a Travis CI file is included, which allows you to have a robot run all the tests for you during the code review process. Travis is available for free to open-source projects, so if you’d like to experiment and see it in action, simply open a pull request to our training kit and you’ll be able to see the whole process yourself.
Additional reading
Since publishing, I’ve started writing individual blog posts about each task within the kit. If you’d like to dive deeper into a particular task just find the article in this list, or send me a tweet to request an additional article.
- Use Gulp and UnCSS to slim down your CSS framework
- Use Gulp to automate your critical path CSS
- Use Grunt and AdvAgg to inline critical CSS within a Drupal 7 theme
- Use AdvAgg Information tab to optimize CSS/JS aggregates
- Use WPT or PSI on local development environments with ngrok
If you’d rather just tinker around with the source, have at it. Contributions welcome!
Frontend performance training kit
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!