docs: recommend best practice for providers

aio/content/tutorial/toh-pt4.md

@@ -78,16 +78,19 @@ Add a `getHeroes` method to return the _mock heroes_.
 
 You must _provide_ the `HeroService` in the _dependency injection system_
 before Angular can _inject_ it into the `HeroesComponent`, 
-as you will do [below](#inject).
+as you will do [below](#inject). A provider is something that can create or deliver a service; in this case, it instaniates the `HeroService` class to provide the service.  
 
-There are several ways to provide the `HeroService`: 
-in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`.
-Each option has pros and cons. 
+You can register the `HeroService` as the provider of this service at different levels: 
+in the `HeroesComponent`, in the `AppComponent`, in the `AppModule`. This tutorial chooses to provide it in the `AppModule`, which makes it available everywhere. 
 
-This tutorial chooses to provide it in the `AppModule`.
+<div class="alert is-helpful">
+  In a more complicated app, you will want to add the provider at the component level. This has the advantage that if a component ends up not actually using the service, the compiler can optimize the app by excluding the unused code from that component. 
+
+  Learn more about _providers_ in the [Providers](guide/providers) guide.
+
+</div>
 
-That's such a popular choice that you could have told the CLI to provide it there automatically
-by appending `--module=app`.
+You could have told the CLI to provide the service at the module level automatically by appending `--module=app`.
 
 <code-example language="sh" class="code-shell">
   ng generate service hero --module=app
@@ -111,11 +114,6 @@ This is a interim code sample that will allow you to provide and use the `HeroSe
 
 </div>
 
-<div class="alert is-helpful">
-
-  Learn more about _providers_ in the [Providers](guide/providers) guide.
-
-</div>
 
 ## Update `HeroesComponent`