Clicking on a website link seems like such a simple thing. But behind the scenes, hundreds of requests are instantly pinged around the world to bring you the images and text in a human readable layout. There’s a lot going on in those few short seconds, and there’s a lot that can go wrong. This guide will show you what tools to use to identify and resolve those issues.
Google Developers Chrome DevTools, Web Page Analyzer – 0.98, and Pingdom Website Speed Test are free online tools I recommend for identifying and diagnosing web page and URL performance issues — in particular, the offending items, objects, and elements that cause sites to hang and slow down. These issues give users the perceived notion of website slowness and unresponsiveness. In this article, I explain how to use these diagnostics.
Three caveats about using these tools
1: You will not be able to use these tools for any Intranet or internal websites that are behind firewalls or networks that don’t allow outside monitoring.
2: If any of these tools discover problems or network utilization glitches, it doesn’t mean the tested or audited web page is doomed to fail. Many of the issues reported are common to the majority of websites, and the audited items or “red flags” typically are a reflection of results based on overall best practices for optimizing network utilization and web page performance.
3: These tools will give you a single glimpse of the tested URL from a distinct instance in time. As a rule, it’s best to run these tests multiple times over a series of days or weeks to obtain a broader understanding of how the URLs are performing during various hours of the day and/or days of the week. How long and how often you run these tools depends on how deep you want to get into analyzing your site’s performance. Over an extended time, you can obtain a good representation of how your website responds by conducting regular tests at given intervals.
Google Developers Chrome DevTools
Follow these steps to use the Inspect Element And Audits tab.
1. In Google Chrome right-click anywhere in the page, click Inspect Element, and then click the Audits tab.
2. Select the audits you wish to run from these options: Select All, Network Utilization, Web Page Performance (Figure A). (I prefer to choose Select All.)
3. Decide if you want to Audit Present State or Reload Page And Audit On Load (Figure A). (In most cases, I run both options on two separate audits, so I can get a good overall review of how the page responds during and after page load.)
4. Click the Run button to start Audit Present State (assuming you choose that option). When the audit completes after a couple of seconds, the results will be displayed and separated by Network Utilization and Web Page Performance. Issues will be recorded and presented in the results window; errors are represented with a red dot, and warnings are represented with a yellow dot. Figure B shows the results for the demo page.
The audit in this demo exposes several network utilization and web page performance issues and gives suggestions for improvements, including errors and warnings for cookie size, specifying image dimensions, optimizing the order of styles and script files, putting CSS in the document head, and removing unused CSS rules. Clicking the arrow next to each result will display the offending files (if any) and an explanation of how the weakness is affecting the website.
Web Page Analyzer – 0.98
Provided for free from Website Optimization, Web Page Analyzer – 0.98 allows you to enter a URL and submit it; then a script runs a diagnostic, which may take up to two minutes (it depends on the URL’s size and contents). When it completes, the tool returns a report that calculates page size, composition, and download time. The tool also reports on the size of individual elements and each type of web component using best practices from Website Optimization’s web performance optimization standards.
Follow these steps to use Web Page Analyzer – 0.98.
1. From the Web Page Analyzer page, enter the URL to be diagnosed and then click the Submit button (Figure C). In this case, I’m using the Chrome DevTools page for analysis.
2. Enter the CAPTCHA image/phrase you see on the next page and click the Continue button (Figure D).
After a minute or so, the report displays and shows the relevant diagnostic information, as well as general information such as the URL tested, the title, and the report date. The diagnostics will include the following information.
- Global Statistics include HTTP Requests and Total File Size.
- External Objects include total HTML, total HTML images, total CSS images, total images, total scripts, CSS imports, frames, and iframes.
- Download Times include connection rate and download times for various network connections.
- Page Objects include a list of all page objects, their size, type, URL, and comments.
- Analysis and Recommendations provide detailed comments, including congratulatory notes for items that meet the criteria, cautions for items that may require attention, and warnings for items that require immediate attention (Figure E).
Pingdom Website Speed Test
Pingdom Tools offers a full page Website Speed Test that allows you to enter a URL and test the load time of the page URL; it then provides analysis that reveals common bottlenecks that hinder page load performance. Settings allow you to save the test and make it public, as well as choose from Pingdom servers in three locations (two are in the USA and one is in the Netherlands).
To use Pingdom Website Speed Test, enter the URL into the Form field and click the Test Now button (Figure F).
The resulting page displays a results summary, including a performance grade in percentile range, total number of requests, load time in seconds, and total page size in kB. Figure G displays the summary results for the test URL.
The detailed report is divided into four reports: a Waterfall Chart, a Performance Grade, a Page Analysis, and a History Timeline. A Waterfall Chart displays the file/path, the size, and the waterfall chart of state colors that indicate stages of the individual item requests, including DNS, SSL, Connect, Send, Wait, and Receive. Figure H displays a portion of a Waterfall Chart.
The Performance Grade results are displayed in Figure I.
Page Analysis includes results for server response code, load time analysis for time spent per State, time spent for Content Type, time spent per Domain, Size Analysis per Content Type and Size per Domain, and Request Analysis per Content Type and per Domain. Figure J displays a portion of the Page Analysis results.
These tools take a snapshot of the tested URL, and since things can change over time or during different periods of the day, week, or month, it’s wise to take multiple snapshots of your URLs over time and then consolidate the reports to see how they compare over a set time period. With that in mind, the last tab of the Pingdom Speed Test displays a History of recent tests; it also gives you a timeline of all previous tests for the given URL, including load times, page size, number of requests, and page speed. Figure K displays the historical results of the demo URL.
Pingdom offers a free signup that submits regular checks for one URL and then provides you with a dashboard to set page test intervals and review overall results, including uptime results, response time reports, test results log, alert log, and options to set up a public status page, report banners, and email reports.
Upgrades offer more power, and subscription options are available in three tiers (Personal, Pro, and Team) and range in cost from $9.95 per month to $199.00 per month.
When you use these tools, you can identify the obstacles and bottlenecks that add up to web page slowness and performance issues. Then, you need to make the changes that will help to prevent these common errors, warnings, and cautions when running diagnostics in the future. In my next article, I will explain how to increase your website performance by fixing many of the issues that these diagnostic tools expose.