Sep 17, 2020
Initially I had this site organized with just the app module (which every Angular project has) and a Blog module that was set up by the Scully schematics. Every other page was a component in the app module. By default, Angular loads all the data for these components as soon as someone visits the site, which increases the initial load size. Right now for me it is not too much, but every example of an Angular/Scully project that I've seen has each page set apart in its own module, and each module is lazy loaded. This means that Angular only loads the data for that module when that page is navigated to. From the Angular website:
By default, NgModules are eagerly loaded, which means that as soon as the app loads, so do all the NgModules, whether or not they are immediately necessary. For large apps with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.
I find that Angular documentation is hit-or-miss, but the link above on lazy loading is actually quite good. Even though my site is small, it took a couple hours to move everything over to being lazy loaded.
Let's compare performance before and after implementing lazy loading. I've actually worked on the website since then, but this is where the Github/Netlify publishing workflow really shines. Github keeps track of every change made to every file in your repository, and Netlify keeps track of every time it publishes your site to the web and allows you to publish any old version of your site on the Netlify domain at any time! Here are the Lighthouse Mobile and Network numbers (which vary a bit from test to test):
Before lazy loading
After lazy loading
Something to keep an eye on as the site grows!