Html Optimization for SEO
1 like327 views
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.
Html Optimization for SEO
- 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.
- 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.
- 21. Sprite Images With Similar Color Palettes: Spriting images with more than 256 colors can cause the resulting sprite to use the PNG true color type instead of the palette type, which can increase the size of the resulting sprite. To generate optimal sprites, combine images that share the same 256 color palette. If there is some flexibility in the colors of your images, consider reducing the resulting sprite's color palette to 256 colors.9
- 22. Optimize Order of Style and ScriptInline Scripts:Issue: In the event that an inline script is blocked by a stylesheet, all other resources will also be blocked.
- 23. Recommendation: Put inline scripts after other resources if possible: Putting inline scripts after all other resources prevents blocking of other downloads, and it also enables progressive rendering. CSS:Issue: If CSS is not at the top of code, the page will not render progressively.
- 24. Recommendation: Put stylesheets in the document head.JavaScript:Issue: The problem caused by scripts is that they block parallel downloads. While a script is downloading, the browser won't start any other downloads, even on different hostnames.
- 25. Recommendation: Put external scripts after external stylesheets if possible. Browsers execute stylesheets and scripts in the order in which they appear in the document. RedesignIssue: Old content will likely have already been cached if not by a previous user visit to the page, then through proxy caching. New content however will not have this advantage.
- 26. Recommendation: As new content is added it should be placed towards the top of the code so it can be cached. 10
- 27. Minimize Request SizeIssue: Ideally, an HTTP request should not go beyond 1 packet (typically 1500 bytes). Recommendation:Minimize Cookies and Request Headers
- 28. Cookie Size: For resources that must be sent with cookies, keep the cookie sizes to a bare minimum. No one cookie served off any domain should be more than 1000 bytes. The recommended average size of cookies served off any domain is less than 400 bytes according to Google.
- 29. Store Only a Unique Identifier in the Cookie: The ID data should be stored in the server with a specified expiry date/time on the cookie.
- 30. Remove Unused or Duplicated Cookie Fields: If you are serving different applications on different URL paths, but have a field that applies to all applications on a domain — like language preference — include that field in the cookie set at the top-level domain; don't duplicate it. Conversely, if a field only applies to a particular subpath — like a UI setting — don't include that field in the top-level cookie where the data will be passed to all other applications needlessly.11
- 31. Enable CompressionIssue: Compression reduces response times by reducing the size of the HTTP response. Recommendations: This can be achieved by implementing the Accept-Encoding header in the HTTP request or by setting the Cache-Control header to private. However, Cache-Control disables proxy caching altogether for these resources so if user locality is needed, this work-around should not be implemented.Do not gzip image and PDF files since they are already compressed. Zipping them can actually increase file size.
- 32. Even if you gzip your scripts and styles, minifying them will still reduce the size by 5% or more.12
- 33. Minimize DNS LookupsIssue: The Domain Name System (DNS) maps hostnames to IP addresses and the browser can't download anything from this hostname until the DNS lookup is completed. Reducing DNS lookups cuts response times but is also reduces parallel downloads which may increase response times. Recommendation:Best practice is to split these components across at least two but no more than four hostnames. This results in a good compromise between reducing DNS lookups and allowing a high degree of parallel downloads.
- 34. Use URL paths instead of hostnames wherever possible. If you host multiple properties on the same domain, assign those properties to URL paths rather than separate hostnames.13
- 35. Optimize ImagesIssue: For inline images the data: URL scheme is used to embed small data items into the actual page as if they were external files. This can reduce HTTP requests, but it increases the size of your HTML document. Recommendations:Placing the data: URL scheme into your style sheets is a way to reduce HTTP requests and avoid increasing the size of your pages.Additional Recommendations:PNGs over GIFS: Use GIFs for only for very small or simple graphics (e.g. less than 10x10 pixels, or a color palette of less than 3 colors) and for images which contain animation.
- 36. Use JPGs for Photographic Style Images.
- 37. Do not use BMPs or TIFFs.14
- 38. Remove Query String from Static ResourcesIssue: Enabling public caching in the HTTP header enables static resources to be cached on public proxy servers. This means that even first-time users to your site can benefit from caching since once a static resource has been requested by one user through the proxy, that resource is available for all other users whose requests go through that same proxy. However, most proxies do not cache resources with a "?" in their URL even if public caching is enabled in the HTTP header.Recommendation: Remove query strings from references to static resources, and instead encode the parameters into the file names themselves. 15
- 39. Specify a Character Set EarlyIssue: The browser uses the character information to convert the stream of bytes into characters on-page. Therefore, most browsers need to read a certain number of bytes before rendering the page. (A notable exception is Internet Explorer versions 6, 7, and 8.) Recommendations: To avoid these delays, you should always specify the character encoding as early as possible. Specify Content Type: Before browsers can begin to check for a character set, they must first determine the content type of the document being processed so this should be specified in the HTTP header or the HTML meta tag.
- 40. Correct Character Encoding: It's important that the character set you specify in an HTTP header or HTML meta tag match the character encoding actually used in the HTML documents. If the browser detects an incorrect or mismatched encoding, it will render the page incorrectly.16
- 41. Remove Unused CSSIssue: CSS should be placed at the top of code in order for the page to render progressively. Because all the stylesheets need to be downloaded and parsed before the page renders, it is crucial to remove or defer any unnecessary CSS.Recommendations: Defer: If certain stylesheets are not needed to render the page, put them in a separate .css file and defer their loading until the onload event begins. The onload event is used to execute the JavaScript code only after the page has loaded.
- 42. Remove: If you use JavaScript to generate styles, be sure that those styles are not included in the JavaScript calls of pages that don’t use them.17
- 43. Use a Content Development NetworkIssue: The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective. Recommendation: Use a CDN service provider, such as Akamai Technologies, EdgeCast, or level3. 18
- 44. 19Copyright ® 2010, iProspect.com, Inc. | Confidential + Proprietary | All Rights Reserved | Linked by IsobarNext Steps