Optimized websites score well across hundreds of Google ranking factors. As a result, they rank higher and always have a competitive advantage. .
One factor that Google utilizes to determine website rankings is the website’s loading time. Websites that have longer loading times receive weaker rankings than equivalent websites that load quickly.
Google offers Google’s PageSpeed Insights as an online tool that webpage admins can use to learn how Google determines their websites’ loading speeds. Users enter the target URL, and Google generates a report that displays an optimization percentage and specific suggestions that can improve the website’s loading time.
The closer to 100% a website earns, the more likely that Google will favor the website in search result rankings.
Websites that appear on the first page of search results receive far more web traffic than search results on subsequent pages. Since Google factors loading times into their search rankings, focusing on lightweight, quick-loading webpages will increase the chances of a webpage landing on the first page of search results.
Sites that consistently appear on the first page of search results had common characteristics:
Impatient users may leave a website that does not load within 400 milliseconds. And 1 in 4 users will abandon a website that does not load within 4 seconds, with 46% of users refusing to revisit a website that they consider slow-loading.
According to recent reports from Google, most business websites have average load times ranging from 7.9 seconds to 11.3 seconds. This leaves a critical opening for competitors that can optimize their websites and divert potential customers to their websites with superior performance.
Google provides online tools that specify how it measures a website’s performance. This is a valuable service for two reasons: it gives you direct insight into how Google will treat your website’s ranking. It provides a level playing field that nullifies problems that arise when multiple users have varying internet speeds and hardware power.
Reaching 100% might not always be possible, but it should be your goal so your website remains competitive with similarly-themed websites.
Be sure to test how the mobile version of your website performs as well. Rarely will a website appear the same way on a mobile device and a desktop or laptop device, so scanning each format is vital to reaching 100% optimization.
Reaching 100% optimization will not be easy. However, the improved Google rankings and the increased revenue will make the effort worthwhile. Conversely, settling for a lower percentage will give an opening to a competitor that reaches for – or achieves – a score of 100%.
Compressing images can reduce their sizes by up to 50%, and many common tools – and free in many cases – can reduce image sizes without sacrificing the image’s quality.
For the novice we recommend WP Smush Image Compression and Optimization. WP Smush is free to use, and it has many appealing features that can make image size reduction simple and swift:
Crush.pics is an alternate tool for Shopify users. Compress JPEG and Optimizilla are two of several free online tools that perform image reduction services. As a last resort, Windows users with limited resources can open Microsoft Paint and use the resize functionality to reduce image sizes by percentages.
In addition to shrinking images, knowing which image file format is most appropriate for its purpose can mean the difference between kilobytes and megabytes. When adding images to your website, consider the following rules of thumb:
HTML coders should note that scaling down an image by defining height and width variables in the IMG tag does not change the image’s size. Scaling down images will also trigger warnings pertaining to HTML minification (which will be covered in the third optimization task).
The web browser sends multiple requests to the web site’s host, querying about and verifying every single element on the web page. This can lead to double-digit-second loading times, especially when the destination page has significant multimedia files such as images and audio files. Browser caching stores local copies of elements such as text and images, preventing having to reload said elements when there is no change between the cached version and the current version on the website. Only elements that have changed will need to be reloaded. Fewer requests means less communication between the client and server, which directly leads to shorter loading times.
WordPress users can reduce load times further by disabling or reducing websites’ revision histories. The more stored revisions the server has, the more loading time the site will take to display. Unless you have a compelling reason to maintain an extensive revision history, cut the number of stored revisions to the bone – or consider storing revisions on an offline or off-site location.
If you have control over the web host, check the “expires” header. The less frequently your webpage is updated, the lower the “expires” value should be. If you can set your “expires” value to one year or longer, you can reduce the amount of fetching that returning users’ web browsers will perform.
In addition to utilizing browser caching, reducing the number of redirects on your website can reduce loading times as well. When your webpage has two or more redirects, you are costing your users valuable time and yourself revenue and search result rankings. If you can eliminate redirects completely, do so; otherwise, eliminate as many redirect chains as possible.
With regards to fetching resources, an excessive amount of plugins on your website can slow loading times to a crawl. Even a simple-looking plugin such as the Google+ button box can add two seconds of loading time. Note, however, that one plugin that performs multiple complex operations can be worse for load times than several smaller plugins that perform a single task. When in doubt, look for reasons to remove plugins. A general rule of thumb is to limit your web page to 10 or fewer small, simple, single-function plugins.
“Code optimization” is a simple way of describing minification. Minified code removes functional redundancies and white-space to reduce the size of the code file.
WordPress users should download and use HTML Minify to make the process much easier. The plugin is simple to install and configure, and the minification results are both quick and impressive.
If you do not use WordPress, you may be able to perform your own HTML Minification if you have sufficient experience and comfortability with modifying HTML code. However, manual minification should be considered as a last resort due to the effort involved and the potential for accidentally deleting vital code – especially for large web pages. This will make the code harder for developers to read, so you may want to save two copies of the HTML code: a readable version and a minified version. Common ways to minify HTML code include:
A web search for “HTML Minification” will return several web pages that will allow to copy-and-paste your HTML code into the web page’s form and perform automatic minification with the click of a button. However, you should take precautions to ensure that you are not dumping your code onto a spoofed site lest a hacker copy your code.
Many web hosts will allow you to “minify” entire code files as well. By using a compression tool such as GZip, you can reduce the size of code files such as HTML and CSS files, then upload the zipped file to the host. You will need to coordinate with the web host to ensure that the host can read the compressed code, but this can reduce web page loading speeds when the code files are larger than 150 bytes. Note, however, that attempting to compress image files with file-compressing software is not recommended; continue to use image-reducing tools for GIFs, JPGs, PNGs, and similar image files.
AMP is an acronym for Accelerated Mobile Pages.
The purpose of AMP is to apply code optimizations that specifically benefit performance on mobile devices. The emphases are on removing or reducing the number of elements that are either completely incompatible with mobile devices or are more unwieldy on a mobile device than on a laptop or desktop computer. Google prioritizes AMP-optimized mobile sites by designating them as “Top Stories.”
AMP’s online tutorial can help code-savvy web admins manually apply AMP principles to optimize their mobile sites and increase the chances of the site being identified as AMP-optimized.
WordPress plugins such as AMP for WP are an alternative for users who are not tech-savvy.
The purpose of a website should strongly dictate its form and function. The main goals of a business website are to draw in new customers, to keep current customers engaged, and to increase the company’s pre-tax income through sales. Those reasons alone justify focusing on quick loading times, but Google’s ranking algorithms favoring fast-loading websites with low bounce provides additional incentive for webmasters to increase their websites’ performance.
Scoring 100% optimization may not always be possible – especially with sites that require significant multimedia or complex operations – but striving for 100% should always be a goal.
Ryan is the VP of Operations for DEV.co. He brings over a decade of experience in managing custom website and software development projects for clients small and large, managing internal and external teams on meeting and exceeding client expectations–delivering projects on-time and within budget requirements. Ryan is based in El Paso, Texas.