Install and Enable the Advanced CSS/JS Aggregation Module
1. Install the Advanced CSS/JS Aggregation module on your server. (See Chapter 1 for more instructions on installing modules.)
2. Go to the Extend page: Click Manage > Extend (Coffee: “extend”) or visit http://yourDrupal8site.dev/admin/modules in your browser.
3. Select the checkboxes next to:
A. AdvAgg Bundler
B. AdvAgg CDN
C. AdvAgg CSS/JS Validator
D. AdvAgg External Minification
E. AdvAgg Minify CSS
G. AdvAgg Modifier
H. Advanced CSS/JS Aggregation
4. Click the Install button at the bottom of the page.
Configure the Advanced CSS/JS Aggregation module
1. Go to the Advanced CSS/JS Aggregation module admin page by clicking Manage > Configuration > Development > Performance > AdvAgg (Coffee: “advagg”) or visit http://yourDrupal8site.dev//config/development/performance/a dvagg in your browser.
2. To start out, don’t change anything! The default settings for this module are pretty spot-on for error-free performance.
3. Test your site. Make sure all of your pages are loading properly.
2. There are 3 built-in options. Select JSqueeze.
3. Click the Save configuration button at the bottom of the page. 4. Test! Make sure your site is working properly. Be sure to check all of your contact forms. Take a post-installation benchmark with Google’s PageSpeed Insights tool (https://developers.google.com/speed/pagespeed/insights/) and WebPageTest.org (http://www.webpagetest.org/). These tools will help you determine if more aggressive caching will improve your site’s speed.
Controlling Image Bandwidth with Image Styles
Drupal 8 Core can resize images and serve the right image for any situation. It can scale them, crop them, and much more. Consistent image sizes reduce the bandwidth required and decrease load time.
Configure Image Styles
1. Go to the Image Styles admin page by clicking Manage > Configuration > Media > Image styles (Coffee: “image styles”) or visit http://yourDrupal8site.dev/admin/config/media/image-styles in your browser.
2. Click the +Add image style button.
3. Enter a name for your new style and click the Create new style button.
4. Under Effect, select Scale from the drop-down and click the Add button.
5. Enter the maximum allowable dimensions for the image. In this case, we’ll use 1200 x 630. Leave “allow upscaling” unchecked.
6. Click the Add effect button.
Applying the new image style to your blog
Now that you’ve created a great new style let’s apply it to your blog.
1. Go to the Blog posting admin page by clicking Manage > Structure > Content Types and click the Manage fields button (Coffee: “blog postings”) or visit http://yourDrupal8site.dev/admin/structure/types/manage/blog _posting in your browser.
2. Click the Manage display tab.
3. Click the gear icon next to the Image field.
4. For Image style, select the new image style you just created.
5. Click the Update button.
6. Click the Save button.
To verify that it worked, go to any blog post. Right-click on the main image and select “Inspect”.
You’ll see that the scaled image is displayed. You can do the same with each Content-Type, user photos, etc.
Third-Party Speed Options There are a few third-party tools that you can use with Drupal to speed up your website. I mention them here to show you the possibilities.
Set up a CDN
A CDN, or “Content Distribution Network” stores a cache of your website on servers across the globe. CDN companies own data centers on every continent and in every region. Think of it as taking your server cache and making copies of it to servers that are a lot closer to your visitors—in both a physical and network sense. If the HTML does not need to be recreated by Drupal, then it is served directly from the CDN, significantly reducing the load times involved. Example companies include (my personal favorite) CloudFlare, Level3, Amazon, and Akamai. The CDN module for Drupal can be downloaded at https://www.drupal.org/project/cdn. There are also service-specific modules for CloudFlare - https://www.drupal.org/project/cloudflare and Akamai - https://www.drupal.org/project/akamai.