PAGE LOADING SPEED VIA HTML – GOOGLE RANKING FACTOR?

An optimized web page not only provides for a more responsive site for your visitors but also reduces the load on your web servers and internet connection. An optimized web page can be crucial for high volume sites or sites which have a spike in traffic due to unusual circumstances such as breaking news stories.

HTML provides multiple ways to convey description semantics, whether inline or as structured glossaries. Here you’ll cover how to properly mark up keywords when you’re defining them.

Reducing each web page “weight” through the elimination of unnecessary whitespace and comments, commonly known as minimization. Also move inline script and CSS into external files, can improve download performance with minimal need for other changes in the page structure.

HTML Tidy can automatically strip leading whitespace and extra blank lines from valid HTML source. Some tools can “compress” JavaScript by reformatting the source or by obfuscating the source and replacing long identifiers with shorter versions.

Minimize the number of files referenced in a web page lowers the number of HTTP connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received.

Use a Content Delivery Network (CDN) which is a geographically distributed network of servers that work together to shorten the distance between the user and your website. CDNs store cached copies of your website and serve them to visitors via the network web server closest to the user, thereby reducing the page load time.

Optimally order the components of the page by downloading the page content first, along with any CSS or JavaScript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading. This initial content is typically text, and can, therefore, benefit from text compression in transit, thus providing an even quicker response to the user.

Reduce the number of inline scripts can improve overall page loading. Use modern AJAX methods to manipulate page content for modern browsers.

Use modern CSS and valid markup to reduce the need for (spacer) images, in terms of layout, and can very often replace images of stylized text — that take much more time than the equivalent text-and-CSS.

Tables for layouts are a legacy method that should not be used anymore. Layouts utilizing floats, positioning, flexbox, or grids should be used instead. Tables are still valid markup but should be used for displaying tabular data. To render your page quicker, you should avoid nesting your tables.

Minify and compress SVG assets as they often contains unnecessary metadata which can be removed. Configure your web server to apply gzip compression for SVG assets.

Minify and compress your images and convert all images to the webP format for highest compression while maintaining high image quality.

Be sure to specify sizes for images and tables. When the browser can immediately determine the height and/or width of your images and tables, it will display a web page without having to reflow the content. This speeds the display of the page and prevents annoying changes in a page’s layout when the page completes loading.

Use lazy loading for images. Lazy loading waits to load images only when they will be visible to the user. This speeds up the page open time for user and reduces the demand on your web server. To identify an image t be lazy loaded, specify its loading attribute with a value of lazy. With this set, the image will only be loaded when it’s needed.

Use async and defer, if possible for JavaScript scripts that are compatible with both the async and the defer attributes, and use async whenever possible, especially if you have multiple script elements.