Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Optimize Page Speed to Meet Google’s Latest Update

DZone's Guide to

How to Optimize Page Speed to Meet Google’s Latest Update

Loading speed will now be a ranking factor for Google mobile searches. Learn how to optimize your page's load speed accordingly.

· Performance Zone ·
Free Resource

Sensu is an open source monitoring event pipeline. Try it today.

" Most business models have focused on self-interest instead of user experience."  - Tim Cook, CEO at Apple

Fancy layouts, rich features, and an informative content are important attributes to garner a great user experience provided your website has a fast loading speed. Yes, the loading speed of your website is the ultimate determining factor for the success (or otherwise) of your business. This has been confirmed by none other than Google in its recent update. According to the update, a webpage’s loading speed will now be a ranking factor for mobile searches.

Google had hitherto confined the usage of page loading speed to desktop searches only. However, the global trend of a growing mobile usage has prompted Google to alter its strategy. Does the latest announcement from Google ring an alarm bell? It is time your website’s loading speed was further increased to better your mobile search rankings. Sounds difficult? Not quite!

Steps to Optimize Your Website to Reduce Its Loading Time


#1 — Minification of HTML, CSS, and JS Using GruntJS

When coding is done by using HTML, CSS, and JS, web developers typically use elements like enter, tab, and spaces to enhance the readability of the code. They make annotations (in places) alongside the code to explain the latter’s function or objective as well. However, these entries end up increasing the size of the web page and slow down its loading speed. To counter this, a task runner named GruntJS can be used to achieve minification of the code. The task runner can remove elements like spaces, tabs, enter, and annotations present in the codes to minimize the size of the web page. Furthermore, the task runner can compress images to make them leaner.

#2 — Bundling Multiple CSS and JS in a Single File

Optimizing a website means writing a vast amount of code, especially in CSS and JS. This code is typically saved in multiple CSS and JS files, which increases the number of HTTP requests. The task runner GruntJS can bundle multiple CSS and JS files in respective single files. This helps to reduce the number of HTTP requests, facilitating the quicker loading of code for your web pages.

#3 — Loading CSS and JS in the Footer Section

In the highly competitive digital landscape, customers want quick access to information. This means the website should display the information (text-based) first and not wait for the loading of the heavier fancy layouts/animations. This can be achieved by loading the CSS and JS in the footer section. Consequently, when the user types the website’s URL on the browser, the text-based content is displayed quickly and the heavier layout/animation surrounding the text pops up a little later. This enhances the user experience a great deal.

#4 — Loading of JS

During the loading of an HTML webpage, if the browser encounters external JS links, it suspends HTML loading until the JS code is fetched. This hinders the seamless loading of HTML and ultimately delays the loading of the content. To prevent this scenario, there are two processes:

#4a — Loading Asynchronously

Here, an attribute called Async, when added to JS, creates separate threads for both HTML and JS code. These threads help the browser to fetch the code asynchronously, thereby hastening the loading of the webpage.

#4b — Lazy Loading Using Defer

Here, the attribute "Defer," when added to JS, delays (read, defers) the loading of JS until the process of HTML loading is completed.

#5 — Reducing the Number of HTTP Calls to Within 30

To reduce the loading time of a webpage, the number of HTTP calls (by the server) should be optimized to within 30. This aspect has been validated by the website grader.com as well.

#6 — Lazy Loading of Images

The quick loading of a webpage is a pre-requisite to achieving a better UX. To ensure this, the images that are present above the fold area are loaded first. For example, if a webpage contains around 100 images, then, instead of loading the entire 100 images in a single swoop, only the ones that fit above the fold (the scroll area) — say, around 25 — are loaded. The remaining images are loaded "lazily" (slowly) depending on the scrolling pattern of the user.

Conclusion

The above tools and methodologies can help in optimizing your website and increasing its loading speed. This optimization exercise will help your business a great deal by improving its mobile search rankings and reaching out to your target customers.

Sensu: workflow automation for monitoring. Learn more—download the whitepaper.

Topics:
performance ,web performance ,performance optimization ,google ,seo

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}