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

The Inspect Element And Audits tab in Google Developers Chrome DevTools allows you to view websites under the hood
and assess real-time page rendering, including network utilization and web page
performance. It also includes options to audit the present state or reload the page
and audit on load. 

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.)

Figure A

See an enlarged view of the image.

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.

Figure B

See an enlarged view of the image.

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. 

Figure C

See an enlarged view of the image.

2. Enter the CAPTCHA
image/phrase you see on the next page and click the Continue button (Figure D).

Figure D

See an enlarged view of the image.

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.
  • Object Size Totals include HTML, HTML images,
    CSS images, JavaScript, CSS, Multimedia, and other.
  • 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).

Figure E

See an enlarged view of the image.

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).

Figure F

See an enlarged view of the image.

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.

Figure G

See an enlarged view of the image.

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.

Figure H

See an enlarged view of the image.

The Performance Grade results are displayed in Figure I.

Figure I

See an enlarged view of the image.

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.

Figure J

See an enlarged view of the image.

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.

Figure K

See an enlarged view of the image.

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.

Summary

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.