Comparison of the “Alarm Site” and Google PageSpeed insights (LightHouse project)
Services Google PageSpeed insights and Lighthouse are identical products with slightly different interfaces. The code itself that checks the page is free and available at https://github.com/GoogleChrome/lighthouse .
Next, we will compare the functionality of the “Alarm Site” and Google PageSpeed insights. Comparison method:
- For ease of comparison, we have listed the points of the report in the wording that is presented in Google PageSpeed insights.
- We have listed all our unique features that Google PageSpeed insights lacks at the beginning of the tables.
- Sometimes Google PageSpeed insights makes useless, redundant or very specific checks. We give comments on such checks.
This page will be constantly updated as updates to the Site Alarm service are released.
Content
General
| Alarm site | PageSpeed insights | |||
|---|---|---|---|---|
Functionality | ||||
| Support for SSL certificates of the Ministry of Digital Services | ||||
| Calculation of the estimated time to fix the problem. | ||||
| Calculation of the increase in key metrics from fixing the problem. | ||||
| Technical information on each inspection. | ||||
| DDOS protection system activation check | ||||
| Checking for redirects, which causes the scan to be incorrect | ||||
Devices | ||||
| Full HD Computer monitor | ||||
| Computer HD monitor | ||||
| Ultra HD 4k Computer monitor | ||||
| The tablet is vertical | ||||
| The tablet is horizontal | ||||
| Smartphone vertically | ||||
| Smartphone horizontal | ||||
Performance or Download speed
| Alarm site | PageSpeed insights | |||
|---|---|---|---|---|
Our report | ||||
| Server delay when loading a file | ||||
| Presence of the Keep Alive header | ||||
| Data optimization:Image URL | ||||
| SVG image optimization, including sprites | ||||
| Many font files | ||||
| A large number of downloadable icons | ||||
| Availability of end-to-end CSS and JavaScript files | ||||
| Using monochrome fonts | ||||
| Monochrome font optimization | ||||
| Splitting large font files into parts | + We provide a font optimization tool | |||
| Premature file upload | ||||
| Testing the server under load | ||||
PSI report | ||||
| Enable text compression | ||||
| The time to receive the first byte from the server is allowed | ||||
| The width and height attributes are not explicitly set for images. | +Check on 6 screens | - It is an error to specify the width and height attributes, since the image sizes differ on different screens. | ||
| Set rules for efficient cache usage for static objects | ||||
| Avoid a lot of redirects | ||||
| Use video formats for animated content | ||||
| Use a pre-connection to the required domains | ||||
| Use modern image formats | ||||
| Adjust the appropriate image size | +Check on 6 screens + Check background images +Check data:image URL | |||
| Set up the display of the entire text while loading web fonts | ||||
| Configure preloading of key queries | ||||
| Configure effective image encoding | ||||
| Don’t send outdated JavaScript code to modern browsers | + We show all unused code, and not just define individual libraries. | |||
| Delay loading hidden images | ||||
| Switch to HTTP/2 protocol | ||||
| Try to reduce the number of requests and the size of the transmitted data | ||||
| Preventing excessive network load | ||||
| There is a meta tag <meta name="viewport"> with the width or initial-scale property | ||||
| Delete unused CSS code | + Showing which lines of code to delete in the tool CSS code cleaner | Useless check, as there is no specifics, which lines should be deleted. | ||
| Delete unused JavaScript code | + Showing which lines of code to delete in the tool JS code cleaner | Useless check, as there is no specifics, which lines should be deleted | ||
| Remove duplicate modules from JavaScript packages | ||||
| Reduce the size of the CSS code | ||||
| Reduce the size of the JavaScript code | ||||
| Eliminate resources that block the display | + we report a list of blocked resources | |||
| Facade objects of third-party resources for deferred loading | ||||
| Minimize work in the main stream | ||||
| Avoid non-combined animations | Useless check. Performance problems in this regard may arise for games and large business applications. And they use specialized programs for such tasks. | |||
| The image that is displayed when drawing the largest content is loaded without delay | Redundant check. It’s enough just to check the availability of delayed download technology. | |||
| Avoid lengthy tasks in the main thread | Useless check. Based on the information provided, it is impossible to determine which piece of code needs to be accelerated. Moreover, false positive positives are frequent. | |||
| User timestamps and time intervals | Unnecessary verification. The use of the User Timing API is relevant only during development and testing and only on the programmer’s computer. | |||
| The document.write() method is not used | document.write() - an ancient and forgotten method. This check only unnecessarily inflates the size of the report. | |||
| Recovery from the return cache was prevented on the page | It takes time with its false positive positives on social media widgets and various iframes. The problem is absent for most CMS systems, and on non-standard projects it requires serious creative thinking, which is not available to the machine. | |||
| Passive event listeners are used to improve scrolling performance | Redundant validation. Gives a meager increase in JavaScript speed. Performance problems in this regard may arise for games and large business applications. And they use specialized programs for such tasks. | |||
| Preload the image for the “Drawing the largest content” element | An extra check. The image at the beginning of the page (for example, a banner) will load first because it is located at the very beginning of the code, immediately after connecting the CSS files. In addition, the preload technology does not know how to load the desired image for the screen being used. Thus, both the monitor and the mobile device will have the same file. | |||
| Reduce JavaScript code execution time | Too generalized analytical data that is useless when searching for a problem area. | |||
| Reducing the size of the DOM structure | A misleading recommendation. The page can slow down for dozens of different reasons and rarely because of the size of the DOM. Most often, inexperienced programmers blindly follow this recommendation and rewrite the layout in vain, having created a lot of problems. | |||
| Try to prevent the creation of chains of critical requests | Redundant and uninformative check. The only case when a deep chain of requests delays the loading of a page is the underutilization of browser loading streams. There are 8 of them for browsers on desktop computers and 6 on mobile. The situation is rare and only on complex sites. And to identify a possible problem, we need more professional and informative tools like a browser profiler. | |||
| Reduce the impact of third-party code | Useless, since the result consists of web system files-analytics and CDN services. That is, all positives are false positive. | |||
| Eliminate large layout offsets | Useless check. Performance problems in this regard may arise for games and large business applications. And they use specialized programs for such tasks. | |||
| The "Drawing the largest content" | Excessive splitting of stages page loads. Not a useful metric. | |||
Special features
| Alarm site | PageSpeed insights | |
|---|---|---|
| Attribute [user-scalable=”no”] not used in the <meta name="viewport"> element, and the value of the [maximum-scale] attribute is greater than or equal to 5 | ||
| The [id] attributes of active elements are unique | ||
| The document does not use the meta tag | ||
| The element has a valid value of the [lang] attribute | ||
| The document contains the | ||
| Image elements have the [alt] attribute | ||
| Background and foreground colors are not contrasting enough | ||
| The element contains the [lang] attribute | ||
| Elements <input type="image"> contain the [alt] attribute | ||
| [accesskey]: values are unique | Extra check. The function has been used for a very long time and is extremely rare. |
Recommendations
| Alarm site | PageSpeed insights | |||
|---|---|---|---|---|
Our report | ||||
| Responsive interface | ||||
| Background flickering on hover | ||||
| Errors in CSS code | ||||
| Broken links | + Including links to external resources. | |||
| Beautiful 404 page | ||||
| [id] attributes are correct | ||||
| Checking the pairing of HTML tags | ||||
| Setting up DNS for mail | ||||
| Setting up reverse DNS record | ||||
| Verification browserconfig.xml | ||||
| Presence of large favicons | ||||
| Availability of favicons for Apple | ||||
| IPv6 addresses work | ||||
| Clickable phone numbers and email | ||||
| The presence of headers Strict Https | ||||
| Automatic HTTP redirection to HTTPS | ||||
| Access to system files from the public part of the site | ||||
| Sufficient line spacing | ||||
PSI report | ||||
| Images are displayed in low resolution | +Check on 6 screens | |||
| The HTTPS protocol is used | + Additionally checks the IPv6 address | |||
| The page uses outdated APIs | ||||
| Missing images with incorrect aspect ratio | + Check on 6 screens | |||
| Browser errors are logged in the console log | ||||
| Errors were recorded in the Issues panel in the Chrome Developer Tools | ||||
| The correct character set | ||||
| Location permission is not requested when loading the page | ||||
| Permission to send notifications is not requested when the page loads | ||||
| Page type (DOCTYPE): HTML | ||||
| Make sure that the CSP policy is effective against XSS attacks | ||||
| JavaScript libraries and known vulnerabilities | + We find 450 vulnerabilities, not 130. | |||
| The page has the correct source code maps | Verification is useful only for developers and only for their development environment, which is usually located locally and is not available for verification by external services. | |||
| Detected JavaScript libraries | Little useful background information. | |||
| A listener is registered for the unload event | Tested, the return cache works even if this event is scheduled. | |||
| Fonts with the font-display:optional property are preloaded | This method of loading fonts is not recommended at all. | |||
Search Engine optimization
| Alarm site | PageSpeed insights | |||
|---|---|---|---|---|
Our report | ||||
| CNC links and files | ||||
| Cyclic links | ||||
| Home page link | ||||
| Correct URL | ||||
| Whether large blocks of text have formatting | ||||
| Using spam words in the header | ||||
| Meta tags for social networks | ||||
| Checking the correctness of images specified in meta tags for social networks | ||||
| Grammatical errors in meta tags and title | ||||
| Check the markup | + Check the markup Yandex | |||
| Site map check | ||||
| Headers H1-H6. Their location and contents. | ||||
PSI report | ||||
| The document contains a meta description | ||||
| The document uses fonts of the optimal size, 100% of the text can be easily read | ||||
| There are no plugins in the document | ||||
| A valid hreflang attribute is specified for the document | ||||
| The document has a valid attribute rel=canonical | ||||
| The document contains the | ||||
| The HTTP status code is valid | ||||
| There is a meta tag <meta name="viewport"> with the width or initial-scale property | ||||
| The size of interactive elements is optimal | ||||
| Links have descriptions | ||||
| Image elements have the [alt] attribute | ||||
| File robots.txt valid | ||||
| Links can be scanned | A strange test. You can only make a link not scanned intentionally. | |||
| The page is available for indexing | If a person has closed the page from indexing, then check here nothing. | |||
PWA
| Alarm site | PageSpeed insights | |
|---|---|---|
| The web application manifest or service worker file meets the conditions required for installation | ||
| The manifest does not contain a maskable icon | ||
| Does not change the color of the address bar in accordance with the theme Failures: No manifest was fetched, No` | ||
| There is a meta tag <meta name="viewport"> with the width or initial-scale property | ||
| The content size corresponds to the viewport | We check on 6 screens | |
| Custom screensaver is not configured | + Check the size of the favicons + Check their minification | |
| The Service Worker that manages the page and start_url are not registered | PWA is an optional technology. Its use is justified when developing PWA applications for smartphones or some specific products where offline functionality is needed. In all other cases, you may only need the function of sending push notifications. Google PSI checks only the fact of using some features of PWA technology without any useful recommendations. |
Optimization for people with physiological limitations
| Alarm site | PageSpeed insights | ||
|---|---|---|---|
| Attributes [aria-*] are valid and written without errors | |||
| Attributes [aria-*] correspond to their roles | |||
| The lists contain only <li> and script support elements (<script> and <template>) | |||
| There are no fields with multiple labels in the form | |||
| Elements <th> and elements with the attribute [role="columnheader"/"rowheader"] have data cells described by them | |||
| Elements with the ARIA [role] role contain all required child elements that must contain a specific [role] element. | |||
| The | |||
| ARIA IDs are unique | |||
| Button names are not available for screen readers | |||
| Invalid [aria-*] attribute values are missing | |||
| Invalid [lang] attribute values are missing | |||
| Invalid values of the [role] attributes are missing | |||
| No elements with the [tabindex] attribute value higher than 0 | |||
| Check to see if the controls in your application are distinguishable for screen readers. | |||
| The page contains a title, a link to skip content, or an indication of the region | |||
| The link text is indistinguishable for screen readers | |||
| ARIA switches have available names | |||
| ARIA input fields have available names | |||
| The [role] elements have all the necessary attributes [aria-*] | |||
| The | |||
| The button, link, and menuitem elements have names available to screen readers | |||
| Meter ARIA elements have names available to screen readers | |||
| Progressbar ARIA elements have names available to screen readers | |||
| Tooltip ARIA elements have names available to screen readers | |||
| treeitem ARIA elements have names available to screen readers | |||
| The <body> element in the document does not contain the attribute [aria-hidden="true"] | |||
| The corresponding labels are assigned to the form elements | |||
| The <dl> elements contain only correctly placed <dt> and <dd> groups and <script>, <template> or <div> elements. | |||
| The <video> elements contain the <track> element with the [kind="captions"] | |||
| The header elements are arranged sequentially in descending order | |||
| Elements with the [role] attribute are contained in their parent elements | |||
| The list items (<li>) are located inside the parent elements <ul>, <ol> or<menu> | |||
| The elements of the definition lists are located inside the elements <dl> | |||
| Elements with the [aria-hidden=”true”] attribute do not contain active child elements | |||
| Cells inside the x
|