MOBILE WEB OPTIMIZATION

Size: px

Start display at page:

Download "MOBILE WEB OPTIMIZATION"

Bryan Floyd
6 years ago
Views:

1 March 2017 MOBILE WEB OPTIMIZATION

2 Introduction Introduction You built a mobile website. That s great! But, chances are good that your job is far from done. Implementing targeted mobile web optimizations, aimed at bringing down content load and ad load speeds, can deliver enormous benefits both for your mobile sites and across the entire web ecosystem. Publishers who invest in these optimizations see lower bounce rates, higher viewability scores, and most importantly, more engaged (and happy!) users. Studies continue to show that people across the world are increasingly consuming content on their mobile devices. Many developing markets often have audiences with only mobile devices linking them to the web. People expect to be able to access any content on their phones and tablets. They have little patience for slow page loads. In response to this growing market, we have seen an increasingly close relationship between mobile web and mobile applications, with companies like Facebook (Instant Articles), Google (AMP), Twitter and Slack blurring the boundaries. Meanwhile, most publishers still struggle to fully access this massive potential, because the quality and load times of mobile ads have not kept pace with user expectations and technological advancements. The mobile web environment has become a magnet for intrusive, low quality, heavy and slow ads that end up turning off users and increasing the adoption of ad blockers. Ads are a major contributing factor to overall mobile web latency. For example, Google AMP pages load lightning fast except for the slow loading ads. Publishers who invest in these optimizations see lower bounce rates, higher viewability scores, and most importantly, more engaged (and happy!) users. To avoid alienating users, it is important for mobile ads to respect touch-dependent environments and account for the smaller amount of real estate available on mobile screens. Publishers must begin the process of assessing current site load speeds, diagnosing problem areas, determining whether optimizations are ad related/content related (or both), outlining priority optimizations and quick hit items, developing a road map with phases for optimizations, integrating new product initiatives into the optimization strategy where possible, and creating an internal team for running post-optimization analysis at the end of each phase. 1

3 Forming and Executing an Optimization Strategy Assessment & Diagnostics Outside Site Auditing and Analysis Tools: The recommended approach is to use a combination of outside site auditing and analysis tools, along with conditional checks across browsers and devices to get a well-rounded read of potential areas for optimization. Site Auditing: Outside site auditing and analysis tools allow the user to test various browsers and platforms from a single webpage. These tools allow for spoofing to simulate other browsers and connection speeds, etc., but are not 100% reliable. Conditional Checks: Conditional checks are checks that are made within everyday conditions, in different browsers and platforms that are typically interacted with. These checks can reveal issues that are impacted by other device conditions and behaviors that simulations might not encounter. The downside is that results are typically less clearly defined than some of the outside services. Everyday Environments: Use everyday environments for conditional checks, from at least two separate locations (example: one check at the office, one check at home, or checks across more than one office location). 2

com/ powered by Google s PageSpeed Using the tool is incredibly simple, drop the test

4 Forming and Executing an Optimization Strategy Site Auditing & Analysis Tools Test My Site powered by Google s PageSpeed Using the tool is incredibly simple, drop the test url into the URL field, and click the Test Now button. The test is quick, and produces a results page with an option to get a free report. 3

Site Auditing & Analysis Tools WebPageTest https://www.webpagetest.

5 Site Auditing & Analysis Tools WebPageTest WebPageTest provides a robust testing suite for targeted simulations, with additional controls for testing different connection speeds, browsers, visual comparisons, batch testing and other common settings. Test results are comprehensive, and include letter-grade ratings, charts, and export options Important: It s advised to refrain from using the HTTP Basic Authentication feature, available under Analytical Review > Advanced Settings > Auth > HTTP Basic Authentication. Even if a test account is used, there are potential risks that can be avoided by using different methods of authentication testing. Please do not use any accounts associated with DFP Networks with this feature. 4

6 PageSpeed Insights Page Speed Insights is a tool, built by Google, which measures the network-independent aspects of page performance: the server configuration, the HTML structure of a page, and its use of external resources such as images, JavaScript, and CSS. It fetches the url twice; once with a mobile user-agent, and once with a desktop-user agent. It then scores the page on a scale ranging from 0 to 100 points (a score of 85 or above indicates that the page is performing well), and provides potential areas for improvement. PageSpeed Insights measures how the page can improve its performance on: Time to above-the-fold load (content above the fold is rendered by the browser) Time to full page load (the page is fully rendered by the browser) 5

friend in many ways: Testing with browser

7 Site Auditing & Analysis Tools Conditional Testing The browser is your friend in many ways: Testing with browser preferences. Using the browser as a diagnostic tool. Taking advantage of most of the server-side services that are actually built directly into some of the browser developer tools, which can be accessed directly via Android and Safari remote USB debugging, or spoofed from the desktop browser dev tools. 6

8 1 Content? Ads? Both? 2 Google s AMP Project Determine whether the majority of latency and experience issues are due to the content or the ads. Once the causes are diagnosed, work with the content and ad teams to resolve major issues. The AMP (Accelerated Mobile Pages) Project was introduced in early 2016 as an open source effort by Google to proactively address and improve the mobile web experience. AMP tackles latency head on, using a combination of a stricter version of HTML (AMPhtml), minified JavaScript, and hardened requirements that boost runtime efficiency with additional measures to prevent some of the more common malvertising methods from entering the space. With AMP, Google caches many of the common components to improve load time. <amp-ad> tags are HTML-based. 7

9 3 GPT Light 4 Facebook Instant Article Ads 5 Additional opportunities GPT Light is a lightweight ad tag which prioritizes performance over customization. GPT Light intentionally has a minimal API surface and primarily utilizes a declarative API. Note: GPT Light is currently in Beta and is currently only supported as a passback tag. Consider optimizing for viewability as a part of the strategy: Viewability is impacted by latency in scrolling environments. New channels include some viewable optimization options. Recent developments for ad delivery in the mobile space have helped result in increased efficiency and performance for mobile ads. 8

10 Technical Considerations & Suggestions Resources Google Principles of Mobile Site Design: Delight Users and Drive Conversions AMP Project GPT Light Facebook Instant Articles 9

How to get a perfect 100 in Google PageSpeed Insights

How to get a perfect 100 in Google PageSpeed Insights And what might happen if you don't Follow Along http://goo.gl/fqfwyj @mcarper @NickWilde1990 Your site just went live after being under construction