Thanks to the introduction of advanced technology for visualizing data, tags, filtering and snapshots, speed for a Google site provides a comprehensive solution for any webmaster who wants to increase the efficiency of his site, search engine ranking and the number of visitors. If the site page loads slowly, identifying the problem is not always easy. Fortunately, there is a free tool that the user can use to find out exactly what slows down the page loading.
Google PageSpeed Insights is a tool that allows you to quickly and easily test page speed. To check, just enter the URL and click “Analyze” to quickly get a detailed report on the site’s speed from Google about the reasons for slowing down this page based on two parameters with recommendations for its elimination.
Perfect website score
According to Google, the system checks the pages for the mobile and desktop versions by retrieving the URL once using the mobile agent and the second using the desktop desktop agent. PageSpeed score ranges from 0 to 100 points. A higher score, of course, is better, and a score of 85 or more is an excellent indicator of site speed from Google.
If the owner sees in his report a lot of red and yellow colors, this is due to the fact that the page has serious loading problems. The tool will notify you of these issues, although error messages may be a little difficult to understand. Here is what a developer can get in a service message:
- You must avoid landing page redirects to ensure Google’s test site speed. If the page was not designed quickly, the result may be several redirects to pages optimized for different devices.
- Enable compression. Today's browsers are equipped with a feature to serve a smaller alternative version of the page for Internet users. With gzip-compressor turned on, these pages can be reduced by 90%.
- Minimization of CSS, HTML, JavaScript. This refers to the removal of unnecessary data. Bad encoding can cause a website to work poorly and can be fixed in several different ways.
- Priority of the above content. The speed of opening a page depends not only on how quickly the page loads. This also applies to "perceived performance." If the code is structured incorrectly, the result may be a decrease in perceived performance in the user's mind, even if the site loading speed is normal.
- Speed up server response time. This time, which the server needs to start loading page content for the user, can be slowed down by a number of factors, as required by Google. If you want the site to be lightning fast and provide good speed, it is better to pay for a decent web hosting.
- Eliminate JavaScript with rendering blocking. Java allows you to use some powerful third-party tools and interactive page elements. The problem is that Java also stops parsing HTML code.
- Caching the browser after checking the speed of the Google Page Speed site. It is recommended to perform caching with a period of not more than seven days, and for immutable elements one year.
- Image optimization. On a Google blog, testers specifically warn about the threat of images to site speed.
Faster page loading
Checking the speed of the Google site is voluntary. According to Google, a website can lose up to half of its visitors when it loads. This means that they want the download time to be short and enjoyable in order to maximize the user interface. However, MachMetrics reports show that page loading time is still too slow. This is valuable information, but then the site owner should focus on improving the rating.
In this case, you need to pay attention to the list of offers that Google has. After reviewing these tips and seeing how the page load time changes, you can generally get a faster site. To check the speed of loading the Google Speed site, use the PageSpeed Insights function, which works with the established list of speed and usability rules. Performance suggestions will be based on Google’s regularly updated policies to keep you up-to-date on site best practices. This means that improving grades today may not guarantee a high score in six months or a year.
Do not make unnecessary changes for mobile or desktop computers if the problem is single. The Google user interface for this system is fantastically simple. It has the sections “Possible optimizations” and “Found optimizations”.
Checking the speed of the Google Speed site’s loading in the “Found Optimization” category is easy, as the page being checked already fulfills Google’s requirements, although this can change over time. In the meantime, you need to focus only on optimization options.
You can find short sentences on Google’s list, such as “minimize HTML” or “prioritize visible content”. Most interface developers understand what this means and know how to fix the problem right away. If inexperienced site owners do not know this, they can simply click on the text message “Show how to fix” in each optimization proposed to expand their knowledge and learn all the basic steps to fix the problem. And you need to do this with each optimization so that the developers can really maximize the capabilities of PageSpeed Insights.
Measurement process
Measure page load time. After evaluating the speed of the site, Google performs the optimization recommended by the Google PSI.
Measure the page load time again. If this makes the site faster, save the changes. Otherwise, cancel them. Repeat until all that the PSI offers is complete.
This trial and error process is cumbersome, but if there is speed monitoring, then it eliminates half of the problems. Google uses the PageSpeed Insights value to be zero for parameters that are likely to cause a delay in loading. When fixing these specific problems, the developer will also have a website with faster loading. Again, the assessment is not omniscient. “Best practices” simply mean that PageSpeed Insights focuses on what is likely to change the situation, and it is widely used to increase productivity. Analysis may vary. Ultimately, using PageSpeed Insights recommendations is better than just leaving the site free to navigate on the Internet.
Landing page redirects
After checking the loading speed of the page on the Google site, the PageSpeed Insights function detects that the site has more than one redirect from the given URL to the final destination page.
An example is the redirect chain as follows:
example.com → https://example.com → https://www.example.com.
Instead, the correct version should be like this:
example.com → https://www.example.com.
Often there is a multiple redirection chain, because there are two parts of the code, each of which processes its own part of redirects. Let's say one code file handles https redirection, and the other handles redirection manually from old page URLs to new ones. In order to fix the failure, redirects are collected in one "function".
Often sites contain these types of redirects:
- Protocol (HTTP → HTTPS).
- Domain (youtu.be → youtube.com).
- Subdomain (youtube.com → www.youtube.com).
- Page (youtube.com/old-url → youtube.com/new-url).
If the site runs on a mobile version — in another domain, subdomain, or subfolder — this will cause unnecessary redirection for all mobile users.
General example:
example.com → m.example.com.
Even worse example:
example.com → www.example.com → m.example.com.
Google recommends creating a responsive website, so exactly the same content is displayed for all devices - it simply scales and looks differently depending on the width of the device’s screen. The tool that can be used in this case is the status.io service, where you can easily enter one or more URLs to check how they will be redirected.
Image optimization
If the Google site’s download speed test contains the minimum number of points, the developer, in order to achieve high results, must adhere to the following recommendations:
- Images are the most common cause of low PageSpeed rates.
- On most sites, images make up more than 50% of the downloaded content, so you can significantly improve the situation by optimizing your images.
- Typically, most images on a website should be less than 100KB. Full-size backgrounds are often larger, so optimization is needed. Here, Google has thought of everything. It makes it possible to load already optimized images at the bottom of the PageSpeed report. Then all you have to do is download them.
- If WordPress is used, then WP Smush is a great plugin for this purpose. It also includes the ability to automatically resize images and compress them.
Internal and external resources
There are two types of resources that a page can load. Internal - these are resources on the site that are controlled by the developer. External - these are resources that are downloaded by the developer from other sources on the Internet and are not controlled by him. The latter are most often displayed in the “Exclude” block.
Here's what you can do to render blocking resources if Google’s site speed analysis is unsatisfactory:
- Internal resources that can often be combined into one by simply loading optimized JavaScript and CSS files at the bottom of the PageSpeed report. Or if there is a CMS, for example, WordPress, use the Autoptimize plugin to handle combined elements.
- When merging some resources, they may stop working, so make sure that the changes are reversible.
- External resources that can be made internal. If you download fonts from the Internet, it is better to do this from your server.
- Some internal resources that can be removed from a download. Themes or plugins on the site can load resources that they really do not need, because they do not use this function. Thus, you can add code to your site to specifically prohibit the download of these resources.
- Some resources that can be replaced with something else, which require less time to download.
- In some external resources, developers can not do anything, then it gets stuck.
- To cache the browser, add the code to the .htaccess file or contact your hosting company to enable browser caching for internal resources.
- If the developer can do nothing with external resources and browser caching, it is better to turn to specialists for help.
Minimize HTML and CSS
To increase the speed of the site after Google testing, minimize HTML and CSS. This is done by deleting additional files on the site. This additional material is usually tabs, spaces and newlines - all that allows a person to read, and it is really important for a computer.
There are three main types of data that can be made smaller:
Most sites have many files that are uploaded. But you can combine several together to make them smaller, and you can almost always remove excess material.
If a developer uses WordPress, Autoptimize is a very good plugin for this. Most sites can use HTML and CSS without any problems. Regardless of whether JS minify works, the speed of the site depends on which plugins and themes are used.
It is known that a compressed file takes up less space than the original. The same principle applies on the Internet: compressed data takes up less space. Thus, the main thing is that compression on the web server is enabled, so that it can reduce the size of files, and then smaller files will be transferred faster on the site.
This means that people visiting the site get the information they need faster and feel comfortable. On most web servers, you can enable gzip compression with a little addition to the .htaccess file. Alternatively, you can turn to hosting support.
Perceived Content Performance
Visible content is a part of a web page that users see on their screen before scrolling further. Websites that seem very fast and crisp to load are often as large as slow. Users love pages that display content quickly. If a developer, when analyzing a site receives a message about the priority of visible content in Google format, you must use these mechanisms.
Google offers two basic strategies to achieve this, and they provide a pretty good plan for modifying pages. One of the fastest, easiest, and most common ways to improve a user's perception of a web page’s loading time is to ensure that HTML displays the content of the web page before it presents other data.
Here is an example for pages with a sidebar. If it is mentioned first in HTML, then it is loaded first before the main content area. A typical sidebar has advertising and social buttons and other content that depends on third parties. Therefore, if it is loaded to the main content, it actually makes the user wait to see the desired content, which is very bad.
This can be changed in one simple action - place the content section in front of the sidebar section, which will first introduce the main content to users, and further viewing the site is a matter of their choice.
JavaScript with rendering blocking
When measuring the speed of the Google PageSpeed Insights website, you can get a suggestion on how to remove blocking JavaScript and CSS code. Most websites contain a combination of HTML, CSS, Javascript, and PHP code that add content, formatting, and interactivity to the site. When rendering a web page, the browser first loads the scripts and CSS code, and then goes to HTML.
Delays in loading scripts and CSS will prevent users from seeing any content on the screen, hence the term “block visualization”. Although the delay can be as small as a millisecond, the site will look “slow” for the user. There are many methods for fixing WordPress blocking and CSS scripts that optimize page load time. The easiest way is to use the cache plugin.
Here are two more to try for developers: Fix Render-Blocking Scripts and CSS with auto-optimization.
Autoptimize is a popular choice for automatically optimizing WordPress page load times. This allows administrators to use advanced code optimization techniques without requiring expert knowledge. Admins can choose from the options menu to reduce page load time, discarding changes if unforeseen events occur:
- To get started, log in to your WordPress dashboard and choose Plugins> Add New.
- Find Autoptimize, then install and activate the plugin.
- Navigate to Settings> Autoptimize to view the plugin configuration.
- On the "Home" tab, select the "Optimize JavaScript code" and "Optimize CSS code" checkboxes, and then click "Save Changes."
- Recheck the site using the Google PageSpeed Insights tool and compare the results.
Tools to improve download times
There are several tools that you can use to improve page speed or just to see how the site works:
- Page speed is a classic. Gives developers all the keys and tips to improve page loading.
- Webpage Testing is a Google tool. Offers a free speed test containing page optimization graphs.
- YSlow - , , , .
- YUI - , JavaScript CSS.
- OnCrawl - , .
Chrome
- Google Chrome . HTML, CSS [removed]. Microsoft Windows Linux Ctrl + Shift + I. Apple Mac OS X Option + Command + I.
«» « » Chrome . , « » . , , .
Chrome :
- URL .
- HTTP (GET POST).
- .
- HTTP, .
- MIME .
- - , URL- .
- , ( , ).
- , DNS .
- - .
, :
- - DNS, SSL- .
- - .
- Waiting - includes the time when the server should display the content that will be served and start sending it to the browser.
- Reception - includes the time it takes to download content.
Sometimes the server starts sending content before it is created. For example, a PHP script might start sending HTML, although it still dynamically generates page content. This type of scenario can lead to incorrect latency measurements. The combination of latency and reception is the most important factor in determining the speed of a site.
Internet connection speed can also affect performance, which is why developers should always compare the time when the site’s performance criteria are evaluated. The bottom of the Network tab provides a summary of the page loading process. This summary includes the total number of requests, the size of the entire page, including its resources, and a breakdown of the time spent displaying the page in the browser. After analyzing the performance of loading a page on a site, the owner will have a better idea of where he can focus his efforts on speed optimization.