1. The document provides recommendations for optimizing HTML templates for speed and SEO, including combining external JavaScript and CSS, leveraging browser caching for static resources, minifying files, parallelizing downloads, and optimizing image usage. 2. It recommends techniques to improve page loading speed such as minimizing HTTP requests, compressing content, reducing payload sizes, specifying dimensions for images, and optimizing the order of stylesheets and scripts. 3. Caching, compression, minification, optimizing images, and using a content delivery network can all help reduce page load times and improve the user experience.

1. 1HTML Template RecommendationsFor SEOPresented by: Ernest Paul

2. Combine External JavaScript and CSSIssue: Using external files produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. Recommendation: Place JavaScript and CSS in external files and reference them as needed. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. If the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.2

3. Combine External JavaScript and CSSExternal CachingWhen to Use External Caching: If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

4. When to Avoid External Caching: For home pages that have fewer page views per session, inlining JavaScript and CSS results in faster end-user response times.

5. Work-Around: To optimize the homepage or other front pages that are typically the first of many pages views, use inline JavaScript and CSS in the front page, but dynamically download the external files after the page has finished loading. Subsequent pages will reference the external files that will then already be in the browser's cache.3

6. Leverage Browser Caching4Issue: A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views.

7. Recommendation:

8. Set Expires to a minimum of one month, and preferably up to one year, in the future.

9. Set the Last-Modified or ETag date to the last time the resource was changed because if the last-modified date is too far in the past, the browser won’t re-fetch it.Minify CSS, JavaScript, and HTMLCSS and JavaScriptIssue:Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.

10. Recommendations:

11. Combined Files: A way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet.

12. Remove Duplicate Scripts: In addition to generating wasteful HTTP requests, time is wasted evaluating the script multiple times. One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. HTMLIssue: Like minifying JavaScript and CSS, minifying HTML can reduce bytes of data and make it easier for the page to load and to be crawled.

13. Recommendation: Implement minifications suggest by Google Page Speed HTML Compactor.5

14. Parallelize Downloads Issue: Serving resources from two different hostnames increases parallelization of downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. Recommendations:Balance parallelizable resources across hostnames: For example, if you have 40 resources, and 4 hosts, each host should serve ideally 10 resources; in the worst case, no host should serve more than 15.

15. Prevent external JS from blocking parallel downloads: When downloading external JavaScript, many browsers block downloads of all other types of files. To prevent JS downloads from blocking other downloads, minimize external JavaScript files.

16. Use <Link> Instead of @import: Using CSS @import allows stylesheets to import other stylesheets which are the unable to download in parallel. This adds additional load time.6

17. Serve Static Content from a Cookieless DomainIssue: Static content, such as images, JS and CSS files, don't need to be accompanied by cookies, as there is no user interaction with these resources.Recommendation:If you host your static files using a CDN, your CDN may support serving these resources from another domain. If not, reserve a cookieless domain for serving static content. Configure your web server to serve static resources from the new domain, and do not allow any cookies to be set anywhere on this domain. In your web pages, reference the domain name in the URLs for the static resources.

18. Enable proxy caching: For resources that rarely change, set caching headers for browsers and proxies. Because cookies will not be sent for these resources, there is no risk that proxy caches will cache user-specific content.7

19. Specify Image DimensionsIssue: When the browser lays out the page, it can begin to render a page even before images are downloaded, provided that it knows the dimensions of the image. If the dimensions specified don't match those of the actual images, the browser will to lay out the page again once the images are loaded. Recommendation:Scale Images: Sometimes you may want to display the same image in various sizes, so you will serve a single image resource and use HTML or CSS in the containing page to scale it. This makes sense if the actual image size matches the largest occurrences of the image on the page, but if you serve an image that is larger than the dimensions in the markup of the page, it sends unnecessary bytes. Use an image editor to scale images to match the largest size needed in your page, and make sure that those dimensions are specified in the page as well. 8

20. Combine Images into CSS SpritesIssue: In order to display an image, the browser must decompress and decode the image. Undisplayed pixels increases the memory usage of your page which can make it load slower. Recommendations:Sprite Images: Combine images that are loaded on the same page and that are always loaded together. For instance, a set of icons that are loaded on every page should be sprited. Dynamic images that change with each page view may not be good candidates for spriting.