Update Learn/HTML/Howto/Author_fast-loading_HTML_pages (#4947)

- use "elements" instead of "tags" if they are suitable
- replace \ s with normal spaces

files/en-us/learn/html/howto/author_fast-loading_html_pages/index.html

@@ -34,11 +34,11 @@ <h3 id="Minimize_the_number_of_files">Minimize the number of files</h3>
 
 <p>If you use background images a lot in your CSS, you can reduce the number of HTTP lookups needed by combining the images into one, known as an image sprite. Then you just apply the same image each time you need it for a background and adjust the x/y coordinates appropriately. This technique works best with elements that will have limited dimensions, and will not work for every use of a background image. However, the fewer HTTP requests and single image caching can help reduce page-load time.</p>
 
-<h3 id="Use_a_Content_Delivery_Network_CDN">Use a Content Delivery Network (CDN)</h3>
+<h3 id="Use_a_Content_Delivery_Network_CDN">Use a Content Delivery Network (CDN)</h3>
 
-<p>For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.</p>
+<p>For the purposes of this article, a CDN is a means to reduce the physical distance between your server and your visitor. As the distance between your server origin and visitor increases, the load times will increase. Suppose your website server is located in the United States and it has a visitor from India; the page load time will be much higher for the Indian visitor compared to a visitor from the US.</p>
 
-<p>A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p>
+<p>A CDN is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached versions of your website and serve them to visitors via the network node closest to the user, thereby reducing <a href="http://www.webperformancetoday.com/2012/04/02/latency-101-what-is-latency-and-why-is-it-such-a-big-deal/">latency</a>.</p>
 
 <p>Further reading:</p>
 
@@ -91,7 +91,7 @@ <h3 id="Chunk_your_content">Chunk your content</h3>
 
 <p>Tables for layouts are a legacy method that should not be used anymore. Layouts utilizing <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, or <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids</a> should be used instead.</p>
 
-<p>Tables are still considered valid markup but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.</p>
+<p>Tables are still considered valid markup but should be used for displaying tabular data. To help the browser render your page quicker, you should avoid nesting your tables.</p>
 
 <p>Rather than deeply nesting tables as in:</p>
 
@@ -129,17 +129,17 @@ <h3 id="Specify_sizes_for_images_and_tables">Specify sizes for images and tables
 <pre>  table-layout: fixed;
 </pre>
 
-<p>and should specify widths of columns using the <code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> and the <code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code> elements.</p>
+<p>and should specify widths of columns using the <code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code> and the <code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code> elements.</p>
 
 <h3 id="Use_lazy_loading_for_images">Use lazy loading for images</h3>
 
-<p>By default, images are loaded <strong>eagerly</strong>; that is, the image is fetched and rendered as soon as it's processed in the HTML. All eagerly loaded images are rendered before the document's {{domxref("Document.load_event", "load")}} event is sent. Switching to lazy loading of images tells the browser to hold off on loading images until they're about to be needed to draw the {{Glossary("visual viewport")}}.</p>
+<p>By default, images are loaded <strong>eagerly</strong>; that is, the image is fetched and rendered as soon as it's processed in the HTML. All eagerly loaded images are rendered before the document's {{domxref("Document.load_event", "load")}} event is sent. Switching to lazy loading of images tells the browser to hold off on loading images until they're about to be needed to draw the {{Glossary("visual viewport")}}.</p>
 
-<p>To mark an image for lazy loading, specify its {{htmlattrxref("loading", "img")}} attribute with a value of <code>lazy</code>. With this set, the image will only be loaded when it's needed.</p>
+<p>To mark an image for lazy loading, specify its {{htmlattrxref("loading", "img")}} attribute with a value of <code>lazy</code>. With this set, the image will only be loaded when it's needed.</p>
 
 <pre class="brush: html">&lt;img href="./images/footerlogo.jpg" loading="lazy"&gt;</pre>
 
-<p>Note that lazily-loaded images may not be available when the <code>load</code> event is fired. You can determine if a given image is loaded by checking to see if the value of its Boolean {{domxref("HTMLImageElement.complete", "complete")}} property is <code>true</code>.</p>
+<p>Note that lazily-loaded images may not be available when the <code>load</code> event is fired. You can determine if a given image is loaded by checking to see if the value of its Boolean {{domxref("HTMLImageElement.complete", "complete")}} property is <code>true</code>.</p>
 
 <h3 id="Choose_your_user-agent_requirements_wisely">Choose your user-agent requirements wisely</h3>
 
@@ -151,9 +151,9 @@ <h3 id="Choose_your_user-agent_requirements_wisely">Choose your user-agent requi
 
 <h3 id="Use_async_and_defer_if_possible">Use async and defer, if possible</h3>
 
-<p>Make the JavaScript scripts such that they are compatible with both the <a href="/en-US/docs/Web/HTML/Element/script#attributes">async</a> and the <a href="/en-US/docs/Web/HTML/Element/script#attributes">defer</a> attributes, and use <a href="/en-US/docs/Web/HTML/Element/script#attributes">async</a> whenever possible, especially if you have multiple script tags.<br>
+<p>Make the JavaScript scripts such that they are compatible with both the <a href="/en-US/docs/Web/HTML/Element/script#attributes">async</a> and the <a href="/en-US/docs/Web/HTML/Element/script#attributes">defer</a> attributes, and use <a href="/en-US/docs/Web/HTML/Element/script#attributes">async</a> whenever possible, especially if you have multiple script elements.<br>
  <br>
- With that, the page can stop rendering while JavaScript is still loading. Otherwise, the browser will not render anything that is after the script tags that do not have these attributes.</p>
+ With that, the page can stop rendering while JavaScript is still loading. Otherwise, the browser will not render anything that is after the script elements that do not have these attributes.</p>
 
 <p>Note: Even though these attributes do help a lot the first time a page is loaded, you should use them but not assume they will work in all browsers. If you already follow all JavaScript best practices, there is no need to change your code.</p>