Mobile Sites

Question 1

True or false: A/B testing allows you to test two or more elements on the site to understand their effects on each other

Answer 1

False.

An A/B test, sometimes called an A/B/n test, is a randomized experiment using two or more variants of the same web page (A and B). Variant A is the original. Variants B through n each contain one or more elements that are modified from the original. For example, a different colored call-to-action button. In some experiments, variant B may be a completely different version of a web page.

Each variant is served at similar times so that its performance can be observed and measured independent of other external factors. You can also limit your experiment to a specific audience using the targeting feature. Optimize captures the performance data for each variant against an objective and identifies the leader.

Question 2

For each font on your website you should

Answer 2

Minimize the number of used variants.

Audit and monitor your font use: don’t use too many fonts on your pages, and, for each font, minimize the number of used variants. This helps produce a more consistent and a faster experience for your users.

Question 3

What is a tool that you can use to emulate and simulate a site that’s experiencing poor or unreliable connectivity?

Answer 3

Webpagetest.org

WebPagetest is an online service that enables a set of performance tests to be run for your site using a variety of networks and host locations. For example, you can try out your site from a server in India on a 2G network, or over cable from a city in the US.

Question 4

When using Chrome devtools, what should you limit the connectivity to

Answer 4

Regular 3G.

DevTools throttles the network connection to simulate a regular 3G experience. This is how mobile users experience your site in places with poor connections.

Question 5

Which of the following is NOT true about site search experience on mobile sites?

Answer 5

Comprehensive search results are better than concise results.

Question 6

If you’re in an animation like scrolling, you should ideally be looking to keep your JavaScript to something in the region of

Answer 6

3ms – 4ms.

Question 7

Which describes how a Service Worker operates?

Answer 7

It runs a programmable network proxy.

Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.

Question 8

Image information such as location and camera description can often be deleted to reduce image sizes. This type of information is called

Answer 8

Metadata.

Remove unnecessary image metadata: many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.

Question 9

Which allows for efficient font reuse between pages

Answer 9

Revalidation token.

Specify revalidation and optimal caching policies: fonts are static resources that are infrequently updated. Make sure that your servers provide a long-lived max-age timestamp and a revalidation token to allow for efficient font reuse between different pages.

Question 10

rue or false: Images should never change when rotating a device screen or between different device sizes

Answer 10

False.

Design your mobile site so that users won’t ever need to change the size. Some mobile sites even disable pinch-to-zoom on their screens; if your site is designed correctly, users will never notice it’s gone.

Question 11

The App shell helps with

Answer 11

Making transitions between pages faster.

An application shell is the minimal HTML, CSS, and JavaScript powering a user interface. The application shell should:

Load fast
Be cached
Dynamically display content

Question 12

To discover and prioritize landing pages for potential improvements to the user design, you should check the:

Answer 12

Landing Pages Report focusing on Bounce Rate metric.

Prioritize landing pages for UX improvements: By looking at the Bounce Rate (the percentage of single-page sessions i.e. sessions in which the person left your site from the entrance page without interacting with the page) you can see how relevant or engaging your site is to users. If you have a high bounce rate for some of your entrance (or landing) pages, you consider redesigning and optimizing them so they correlate better with the search terms that bring users to your site, with ads you’re running, or with keywords you’ve purchased.

Question 13

Which of the following reports in Google Analytics helps you to identify leakages from the conversion funnel?

Answer 13

Checkout Behavior Analysis Report.

Identify leakages in the site experience and by analysing shopping behaviour: Enhanced Ecommerce reports in Google Analytics give you insight into shopping activity. The Shopping Behaviour Analysis report lets you evaluate the strengths and weaknesses of your purchase funnel. Where the funnel indicates abandonment (a red arrow at the bottom of a step), those users did not complete any additional steps of the funnel during the same session.

Question 14

Mobile sites:

Answer 14

Have specific functionality for mobile devices.

When we talk about mobile sites, we’re referring to Internet-enabled properties that have specific Internet-based functionality for mobile devices.

They’re accessed through the mobile device’s web browser (Safari, Chrome, etc.)
They don’t need to be downloaded or installed to a device
The term ‘mobile sites (mSites)’ can be used interchangeably with ‘mWeb’ in this conversation

Question 15

Which most accurately describes the purpose of compression?

Answer 15

Minimizing file size

Question 16

According to a Google poll, what is the top frustration when users browse the web on their mobile device?

Answer 16

Waiting for slow pages to load.

In a recent Google poll, almost half of the respondents said their top frustration when browsing the web on their mobile device was waiting for slow pages to load (view on Google+ and Twitter).

60% of mobile users expect mobile websites to load within 3 seconds. And on average, 75% of people will abandon a mobile website if it takes any longer than 5 seconds to load.

Question 17

A Progressive Web App:

Answer 17

works even with unreliable network through service worker.

Progressive Web Apps are user experiences that have the reach of the web, and are:

Reliable – Load instantly and never show the downasaur, even in uncertain network conditions.
Fast – Respond quickly to user interactions with silky smooth animations and don’t use poor quality scrolling.
Engaging – Feel like a natural app on the device, with an immersive user experience.

Question 18

Before introducing mobile site design best practices to your clients, you should examine their

Answer 18

Existing mobile sites.

Question 19

Which of the following is NOT a best practice to optimize forms on mobile?

Answer 19

Showing labels inside form fields for convenience.

Putting labels inside fields caused problems if they disappeared when information was entered, leaving participants without guidance. Once information is entered, validate it for errors in real-time prior to submission to prevent users from having to resubmit.

Question 20

Which is a benefit of a mobile site over an app for businesses

Answer 20

Shorter development timelines.

Mobile sites allow for easy updating (for example, users don’t need to accept or install your updates.

Question 21

Why are push notifications important for advertisers?

Answer 21

All of the answer options are correct.

Web push notifications allow users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, relevant content.A precise notification is one that has specific information that can be acted on immediately.

Question 22

Which of the following describes the Payment Request API correctly?

Answer 22

It bypasses the checkout form.

The Payment Request API is an open and cross-browser standard that replaces traditional checkout flows by allowing merchants to request and accept any payment in a single API call.

It vastly improves user workflow during the purchase process, providing a more consistent user experience and enabling web merchants to easily leverage disparate payment methods. The Payment Request API is not a new payment method, nor does it integrate directly with payment processors.

Question 23

At a minimum, what page weight should you be aiming for?

Answer 23

Less than 1MB.

Page Weight – All the resources that are necessary to build out a page should not be larger than 1 mb. If you find that the site is larger than this goal, you should consider removing resources or compressing where possible.

Question 24

Which of the following is NOT a best practice for a financial company to keep users from dropping out of the funnel?

Answer 24

Asking for registration to use the site.

Participants appreciated the option to call a financial-services company to complete an action over the phone, rather than fill out complicated forms on their mobile devices.

Question 25

At a minimum, what Speed index score should you be aiming for?

Answer 25

Less than 5000.

Useable Time: Customers want to see visible content that is “above-the-fold” as soon as possible. Load important content first and make sure that the site is usable in 3 seconds. Webpage test generates the speed index – the time to visual complete above the fold. Our goal is to ensure that the score is below 3000.

Question 26

When referring to the critical rendering path in site performance, a critical resource is:

Answer 26

A resource that could block initial display of the page.

A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.

Question 27

How many times per second do most devices refresh their screens?

Answer 27

60.

Most devices today refresh their screens 60 times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes.

Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms). In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms. When you fail to meet this budget the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user’s experience.

Question 28

Which of the following statements is true about the mobile experience of users?

Answer 28

it’s important to use call-to-action buttons to keep users in the same browser window.

Question 29

In which of the following situations can a high bounce rate be interpreted as a good metric?

Answer 29

Campaign landing page brings the user to a page where the company promotes their phone number to receive calls.

Question 30

Which changes to “geometric properties” affect the layout?

Answer 30

All of the above. (Heights, widths, top)

Question 31

The render tree contains:

Answer 31

visible content.

The CSSOM and DOM trees are combined into a render tree, which is then used to compute the layout of each visible element and serves as an input to the paint process that renders the pixels to screen.

Question 32

Why did Facebook create “2G Tuesdays”?

Answer 32

To understand how people on 2G use their product.

Facebook even instituted 2G Tuesdays to help understand how people on 2G use their product. On Tuesdays, employees get a pop-up that gives them the option to simulate a 2G connection.

Question 33

Which can be sacrificed to reduce the file size of an image?

Answer 33

Quality.

Finding the optimal settings for your image requires careful analysis along many dimensions: format capabilities, content of encoded data, quality, pixel dimensions, and more.

Experiment with optimal quality settings for raster formats: don’t be afraid to dial down the “quality” settings, the results are often very good and byte savings are significant.

Question 34

Why can an intermittently available mobile network result in a poor experience?

Answer 34

Some assets might not be loaded.

Your browser behaves as if it has connectivity when, for whatever reason, it doesn’t.

Misinterpreted connectivity can result in a poor experience as the browser (or JavaScript) persists in trying to retrieve resources rather than giving up and choosing a sensible fallback. Lie-fi can actually be worse than offline; at least if a device is definitely offline, your JavaScript can take appropriate evasive action.

Question 35

The first step to optimize the critical rendering path is to:

Answer 35

analyze and characterize your critical path: number of resources, bytes, length.

The general sequence of steps to optimize the critical rendering path is:

• Analyze and characterize your critical path: number of resources, bytes, length.
• Minimize number of critical resources: eliminate them, defer their download, mark them as async, and so on.
• Optimize the number of critical bytes to reduce the download time (number of roundtrips).
• Optimize the order in which the remaining critical resources are loaded: download all critical assets as early as possible to shorten the critical path length.

Question 36

True or false: Using a mix of desktop and mobile-optimized pages on mobile sites improves the user experience since some users are more familiar with the desktop version of the site.

Answer 36

False.

Unsurprisingly, participants had a much easier time navigating mobile-optimized sites than trying to navigate desktop sites on mobile devices. Sites that included a mix of desktop and mobile-optimized pages were actually harder for participants to use than all-desktop sites.

Question 37

Which components often account for most of the downloaded bytes on a web page?

Answer 37

Images.

Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space.

Question 38

True or false: JavaScript can block DOM construction unless explicitly declared as async.

Answer 38

True.

JavaScript is powerful, it can modify just about every aspect of the page, but it can also block DOM construction and delay page rendering (see also Adding interactivity with JavaScript). To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript.

Question 39

Currently, Google Optimize does NOT currently allow you to:

Answer 39

Do heatmap analysis to better understand to user behaviour on your site.

You can test new website designs, layouts and content with a subset of your visitors. Optimize leverages the power of Analytics by measuring all experiments natively with Analytics, allowing you to use your existing goals and metrics as experiment objectives. What’s more, you can serve experiments to specific groups of users that you’ve defined as Audiences in Analytics.

Question 40

True or false: Mobile pages that load 1 second faster see up to a 27% increase in conversion rate.

Answer 40

True.

Question 41

Which of these are NOT part of AMP:

Answer 41

Inline CSS.

Question 42

Which is an example of an unnecessary resource negatively impacting the user experience?

Answer 42

a photo carousel on the homepage that allows the visitor to preview multiple photos with a quick click.

Too often, pages contain resources that are unnecessary, or worse, that hinder page performance without delivering much value to the visitor or to the site they’re hosted on. This applies equally to first-party and third-party resources and widgets:

Question 43

True or False: You can experiment with google Analytics features by using the Google Merchandise Store demo account.

Answer 43

True.

The Google Analytics demo account is a fully functional Google Analytics account that any Google user can access. It’s a great way to look at real business data and experiment with Google Analytics features.

Question 44

Which of the following describes an App shell?

Answer 44

It provides a fast first impression gracefully transitioning to a fully loaded page.

An application shell is the minimal HTML, CSS, and JavaScript powering a user interface. The application shell should:

• Load fast
• Be cached
• Dynamically display content

Question 45

To optimize for speed, you shouldn’t use too many webfonts and you should minimize the number of _____.

Answer 45

Variants.

Audit and monitor your font use: don’t use too many fonts on your pages, and, for each font, minimize the number of used variants. This helps produce a more consistent and a faster experience for your users.

Question 46

Before the browser can render the page, it needs to construct the:

Answer 46

DOM and CSSOM trees.

Before the browser can render the page, it needs to construct the DOM and CSSOM trees. As a result, we need to ensure that we deliver both the HTML and CSS to the browser as quickly as possible.

Question 47

Which format is preferred for the multi-device and high-resolution icons?

Answer 47

Vector (SVG).

Vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.

Question 48

What does “Variant A” in A/B Testing usually represent?

Answer 48

Original version of the web page.

Variant A is the original. Variants B through n each contain one or more elements that are modified from the original.

Question 49

Which is NOT true about Responsive Sites?

Answer 49

Responsive Sites usually have faster load times vs Separate (m.dot) Sites

Question 50

Which metric is affected by slow pagespeed?

Answer 50

Conversion rate

Optimizing the critical rendering path allows the browser to paint the page as quickly as possible: faster pages translate into higher engagement, more pages viewed, and improved conversion.

Question 51

To deliver the fastest possible time to first render, you should minimize the number of:

Answer 51

critical resources.

To deliver the fastest possible time to first render, we need to minimize three variables:

• The number of critical resources.
• The critical path length.
• The number of critical bytes.

A critical resource is a resource that could block initial rendering of the page. The fewer of these resources, the less work for the browser, the CPU, and other resources.

Question 52

How can you make the job a lot simpler for the browser?

Answer 52

Change the selector to a class.

Question 53

Which of these features is part of a Progressive Web App?

Answer 53

Add to home screen.

Worthy of being on the home screen When the Progressive Web App criteria are met, Chrome prompts users to add the Progressive Web Apps to their home screen.

Question 54

Which is true about calls-to-action usage on mobile homepages?

Answer 54

Calls-to-action should be prominent on the visible area of the mobile homepage.

It can be easy for mobile users to miss menu items, so your clients should always put their key calls-to-action where users will see them. Study participants had an easier time completing tasks on sites that clearly displayed primary calls-to-action in the main body of the site, with secondary tasks available through menus or below the fold.

Question 55

What is a valid event for a Service Worker to emit when it’s registered?

Answer 55

Install.

To install a service worker for your site, you need to register it, which you do in your page’s JavaScript. Registering a service worker will cause the browser to start the service worker install step in the background.

Question 56

Why do CSS @imports harm performance?

Answer 56

@import loads files less efficiently than .

Question 57

How do you prioritize optimization of the mobile site for browser versions or screen resolutions:

Answer 57

Look for the highest number of sessions and lowest conversion rates (or highest bounce rates)

Understand if users’ experience differs on different browsers or screen resolutions: Prioritize optimization of the mobile site for browser versions or screen resolutions with the highest number of sessions and lowest conversion rates (or highest bounce rates). For example, if you observe low conversion rates for some browser versions or screen resolutions, make sure your CTA buttons stay in natural (easy-to-reach) areas and make sure they are functioning.

Question 58

True or false: Constructing the Document Object Model (DOM) requires style information.

Answer 58

False.

DOM construction: Finally, because the HTML markup defines relationships between different tags (some tags are contained within other tags) the created objects are linked in a tree data structure that also captures the parent-child relationships defined in the original markup: the HTML object is a parent of the body object, the body is a parent of the paragraph object, and so on.

Question 59

What’s the fastest and best-optimized resource?

Answer 59

The one not sent.

The fastest and best-optimized resource is a resource not sent. You should eliminate unnecessary resources from your application. It’s a good practice to question, and periodically revisit, the implicit and explicit assumptions with your team.

Question 60

AMP ______ the page ______ waiting for resources to download:

Answer 60

lays out; without.

External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.

Question 61

Some users aren’t comfortable converting on their mobile device. What could be an action you can take to improve their experience?

Answer 61

Offering secondary call-to-action buttons, like social sharing.

Mobile visitors may be researching to convert later, so offer a simple way to resume their journey on another device via social sharing, email, or save-to-cart functionality.

Not all participants were comfortable converting on their mobile device. Offer an easy way to save or share information across devices to keep users in your funnel.

Question 62

Research shows that mobile users expect to:

Answer 62

tap the logo at the top of a mobile page to take them back to the homepage.

When mobile users navigate through a site, they want an easy way to get back to the homepage. In the study, participants usually expected tapping the logo at the top of a page to take them back to the homepage, and became frustrated if it didn’t work.

Question 63

How does AMP work?

Answer 63

All of the above.

• AMP doesn’t let extension mechanisms block page rendering. AMP supports extensions for things like lightboxes, instagram embeds, tweets, etc.
• To keep JavaScript from delaying page rendering, AMP allows only asynchronous JavaScript.
• It keeps all third-party JavaScript out of the critical path

Question 64

True or false: To instruct the browser to use the default device width, you would use .

Answer 64

False.

Using the meta viewport value [width=device-width] instructs the page to match the screen’s width in device independent pixels. This allows the page to reflow content to match different screen sizes.