Google launches web.dev: evaluate your website’s performance and learn how to design effective websites
Google launches a new online service that web developers will appreciate: web.dev. Learning and measuring are the main sections of this guideline The first one contains precise tutorials to learn how to build efficient websites; the second one is a performance analysis tool to test your website.
Test the performance of your website for free
The website performance testing tool is based on Lighthouse data. 5 factors are used to evaluate sites in production (online): speed, PWA, accessibility, best practices, and SEO. Each item is rated from 0 to 100 and the loading speeds are specified (First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, Estimated Input Latency).
Google then lists all the problems found on your site. They are classified according to their potential impact on your site’s performance. The category is indicated, the problem is described and you can (in most cases) access documentation to solve it.
A link to download all this data. This is a Lighthouse report, it is recommended to study it in detail to better understand the problems identified by the tool developed by Google.
Learn how to create effective websites
The guides proposed by Google to help you fix performance issues gather under the Learn tab. 6 categories of guides designed to speed up your website, make it more resilient to network problems, secure your website, improve its SEO, facilitate the integration of your website on the mobile home screen and optimize its accessibility. The guides are written in English, but they are extremely precise, with the best practices explained in detail, with pictures and step-by-step instructions. Although these materials are geared toward developers, they will be beneficial to anyone who designs and maintains websites. All these guides (and the test tool) are available on web.dev.
Learn to Use Chrome’s Developer Tools
Besides building your own websites, there is a techie tool that’s also helpful if you’re going into digital marketing: Google Chrome’s Developer Tools (or “DevTools”).
You can access the Developer Tools by clicking the three dots in the top right-hand corner of the Chrome browser, then selecting “More Tools” about 3/4 of the way down the menu, then selecting “Developer Tools” from the bottom of the next menu. The developer tools are a window that pops out from the right-hand side of the screen, and they’ll let you do all sorts of awesome stuff, including seeing in real-time in a real browser what would happen if you made certain edits, without ever changing the real source code. You can do this with not only your own website but with other peoples’ sites, even those which are way more complicated than yours.
Here’s a nice tutorial to get you started with Google DevTools.
These tools are very useful for the beginner web developer or digital marketer because they’ll let you toy around with massive, complex sites without having to build those sites from the ground up yourself. I tend to just open the DevTools on random websites and play around with making changes to see what they do. It’s not a systematic process, but it’ll improve your web development skills, and it’ll also be fun. Who said work couldn’t also be play?
