The screenshot shows the network traffic resulting from a Google search. To make sure you’re doing the right thing, take a network snapshot by going to the Network tool and pressing record. Mobile devices are often on slower connections than our desktop and laptop computers. Network performance is import, and it’s even more important on the mobile web. The Elements tool can also be used to toggle styles on and off, which will come in handy when we attempt to investigate paint times. Using Chrome DevTools on my desktop I hovered over a div in the Elements tool and, just like it is on the desktop, the div is visually highlighted on my Android device. Under the hood, the same data is collected and the same functionality is available.Īs an example, I visited on my phone. The only difference isthat your Android device is only responsible for the page, while your desktop is responsible for DevTools. The most important thing to understand about remote Chrome DevTools is that they are the same DevTools you’re using today on your desktop. Pick your page from the list of ‘Inspectable pages’.Īnd you will be taken to Chrome DevTools for that page.Īww… that familiar Chrome DevTools toolbar is right there. You will be taken to a list of open tabs on your Android device. In desktop Chrome, navigate to and on your Android device, open up your site. With your Android device tethered to your computer. If this is the first time you’ve used Chrome DevTools for Android check out the getting started guide at the bottom of the article.
Google chrome for android developee tools how to#
Now that you’re caught up, let’s see how to accelerate your mobile site with DevTools. If you’re already familiar with Chrome DevTools, great! If not, check these great tutorials: This article teaches you how to use these tools to profile your mobile site. Managing Performance #Ĭhrome ships with a great set of developer tools.
The fastest site will get the most engagement. Mobile users expect to be able to get in and out quickly. We said okay, therefore scrolling matters. In an A/B test, we slowed down scrolling from 60fps down to 30fps. Performance is there to increase the metric that matters most to you. When the browser paints an element, the CPU and GPU usage spikes, which also drains battery. When you fetch a resource, the WiFi or cell radio must be on, which drains battery. Minimize network traffic and reduce paints to reduce battery drain. A sub-optimal site will drain a battery much quicker than needed.
Users of mobile devices want that battery to last as long as possible. Mobile devices are exclusively battery powered. It’s safe to assume that your page runs 5 to 10 times slower on a mobile device. In more concrete terms, loading network resources takes longer, unpacking images takes longer, painting the page takes longer, executing scripts takes longer. Despite the drumbeat of progress, mobile devices are underpowered when compared to our computers. Mobile devices are getting faster CPUs, more RAM, faster GPUs, and faster network access as we transition from 2G and 3G to 4G.
Why is Optimizing for the Mobile Web so Important? # Performance # Read on and learn how to optimize your site for the mobile browser using Chrome DevTools and an Android device. Today, the most important thing you can do for your site is make sure it performs well when visited from a phone or tablet. Creating a DevTools connection to your Android device Verify that your device is properly connected
0 kommentar(er)
