Tool to determine what webpages and images may be causing loading issues

[Gavo]

We are looking to optimize our website so that the loading speed is reduced and won't cause any problems for SEO.

Is there a suitable free tool anyone can recommend that will allow us to easily see which webpages need reduction and can prescribe which images or other web elements on webpages may need to be better optimized?

[DirkC]

You can use Screaming Frog to identify the pages with highest load times as well as the heaviest images. Also check speed reports in Analytics (Behavior > Site Speed).

Once you identified the slowest / heaviest pages you can do more detailed testing using Google Pagespeed Insights (can be called directly from the Site Speed report in Analytics) and webpagetest.org.

You don't need to check all the pages on your site - checking a few different templates should be sufficient to identify the most urgent issues.

Dirk

[Mobilio]

Just as Dirk says you can use Analytics. But... dependent on GA version (classic/universal) you can add this in tracking code:
_gaq.push(['_setSampleRate', '100']);
_gaq.push(['_setSiteSpeedSampleRate', 100]);

and for UA code is:
ga('create', 'UA-XXXX-Y', {'sampleRate': 100});

Please note - for classic you can put code after initialization and before track page view. For UA you need to change way of initialization to include this sampleRate. Then you can go in GA -> Behavior -> SiteSpeed and will get speed data for about 100% of visits.

Later - use PageSpeed Insights to track speed of pages. If you're in WordPress you can use plugin:
http://mattkeys.me/products/google-pagespeed-insights/
and check score of all pages/posts. There is free version, just scroll to bottom.

After you can use Pingdom Tools, GTMetrix and WebPageTest to see how your site is loading on different geolocations, browsers and connection speed. All of tools give some scores and suggest improvements, just follow their suggestions for better performance.

And if you are willing to get even higher speed improvements you need to read least two books:

• Ilya Grigorik - High Performance Browser Network; http://shop.oreilly.com/product/0636920028048.do you can read it for free http://chimera.labs.oreilly.com/books/1230000000545

• Lara Callender Hogan - Designing for Performance;http://shop.oreilly.com/product/0636920033578.do you can read it for free here http://larahogan.me/design/

So both books are amazing and completing each other. First explaining server performance, network performance, some specific improvements about browser core, etc. Second book is explaining how to clean up actual site for better performance - minimizing and cleaning CSS, selecting best images, JS improvements, HTML tricks, etc.

After you reading that books and using tools you can optimize site slashing minimum 50% of it's footprint.

[DirkC]

Great suggestion about the books! Tx Peter.

[TimHolmes]

Two great responses from Dirk and Peter.

Once you have identified the pages that are loading particularly slowly you can utilise the tools to determine the order that elements are loaded on the page, you may find that shuffling the order in which items loads also helps to speed things up by removing render blocking elements to load later etc.

I quite often use tools.pingdom.com and GTMetrix for my site speed sampling and further analysis. The waterfall diagrams will really help you to visually see what are the slower items.

GZip Compression and delivery of images via CDN's may also offer you a speed boost.