Use Google Chrome Developer Tools for Conversion Rate Optimization

How to use Google Developer Tools for conversion rate optimization. Google Developers Tool is a great application that allows you analyze the code structure of your website. However, there are a of underutilized functions that are great for conversion rate optimization. Here a my favorite ways maximize the benefit of this tool.

Testing Web Performance.

Instead of migrating out the website that you are evaluating you can run a web performance test. This is of course the same test based on the Google Page Speed Insights test. You can do this by using the Audit section.

Use the Audit

  1. Click Audit
  2. Select Web Page Performance or Network
  3. Choose Reload Page and Audit on Load
  4. Once the audit is loaded, you can click the arrows to reveal the results of the audit.
  5. Optionally, you can use the Network Utilization audit.

Chrome Developer Tools for Audit

snippet-for-audit

 

Emulate Specific Devices

Ensuring that your website, is visually appealing and loading properly in all devices is paramount. If your analytics points to high bounces in a particular device, you should see how your website is displayed in that particular device. Responsive websites are great but they can kill conversion if they don’t load properly on a specific device.

  1. Open the Developer Console and click device section above your website.If you have a responsive website, click (Responsive).
  2. Choose the device that you would like to view.
  3. You can also add custom devices not listed by click Edit.
  4. In the Emulate Device, menu choose from a set of additional devices.
  5. Alternatively, you can add a custom device layout by specific dimension.

Adding custom devices in Google Chrome Developer Tools

 

You should tactically evaluate your above the fold content on various screen.

Perform Title Mock ups On-Page and Off Page

Using the Chrome Developers tools you have the ability of changing the titles in the search engine results and on the website in questions. This not permanent of course. When doing mockups for title change options, there several image altering apps out there. However, you can do this directly in Google Developer Consoles.

  1. Altering Page Titles.
  2. Load the Page. Right Click the page title that you would like to change.
    Click Inspect Element.
  3. Look in the top right section of the developer console under the top heading. You will see the code section with the information. For example text is in cased by quotations, or by heading tags.

Adding to the text on a page with Google Developer Tools

BEFORE

before_

AFTER

after

Changing Titles in Google Search Engine

Again this is just for mock-up purposes. However, seeing how your Page Title and Descriptions are structured does wonders for client meetings and conversations. You can follow the same method above.

Simply Google a search term and right click the listing. For example what would be the CTR if we told the truth about Coca Cola.  You alter the text to do mock-ups.

 Here is how to alter the search engine results.

BEFORE

after-2

change_the_serp

AFTER

fullofsugar

  • January 23, 2017
  • Blog

About the Author

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz