Google’s web.dev: Helping You Create a Roadmap for Modern SEO

For those working in the search engine marketing industry, change is both frequent and unexpected.

Moz’s Google Algorithm Update History notes that there have been 12 major Google algorithm updates in the past 12 months . . . and if you’ve worked in the industry for more than a month, you have probably seen the forum discussions, articles, and chatter around several other unconfirmed updates.

With so much happening in the industry, no one can blame you if you’re feeling anxious about what’s to come our way in the balance of 2020 and beyond.

Years ago, the industry developed a critical view of Google’s updates. Scrutinizing changes and trying to interpret Google’s motivations can certainly be time-consuming. While some folks have been able to accurately predict Google’s next big move, the aggregated industries of search engine optimization, content marketing, web design, and web development are almost always relegated to be reactionary to these changes.

While Google has invested in updating its search marketing platforms and technology in 2019, it has also made significant updates to their web.dev platform—a resource for digital marketers to “learn to build for the modern web.”

As digital marketing professionals, let’s take a deep dive into what web.dev provides us today and discuss how these resources can help us to be more successful in our ongoing optimization efforts.

Introduction to web.dev

In November 2018, at its Chrome Dev Summit in San Francisco, Google launched web.dev. At the time web.dev was introduced, the Google developer team had this to say about the resource:

web.dev is the ultimate resource for developers of all backgrounds to learn, create, and solve on the web. It’s meant to not only educate developers, but help them apply what they’ve learned to any site they work on, be it personal or business. Web.dev was borne of a belief that if we make high-quality experiences easy to build, it will enable more meaningful engagement on the web—for users and developers alike. Simply put, we realized the only way the web gets better is if we help the people building it succeed.

Since its introduction 16 months ago, web.dev has served as a platform to assist web developers by providing tools capable of evaluating, auditing, and remediating critical factors for building a better web.

web.dev Is Not the Same as Google Lighthouse

A prevailing belief is that web.dev is Google Lighthouse.

For those unfamiliar with Google Lighthouse . . .

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module . . . You can also use Lighthouse CI to prevent regressions on your sites.

(Source)

While the Google Lighthouse tool is incredibly useful—and indeed accessible through web.dev—let’s not be too quick to make sweeping assumptions.

There’s a lot more to web.dev that could help your organization build better web experiences.

After all, if you’re focused on getting the most impact from Lighthouse, you may need to abandon the web-based UI version (which is what is linked to from within web.dev) and make use of the command line, module, and CI integration variants of the tool.

Meet web.dev Learn: A Collection of 227 Additional Resources

Google Lighthouse will audit a URL and provide you with results and recommendations that are, by nature, applicable to the specific URL you choose to audit.

Of course, most websites consist of multiple pages.

Unless you’re able to commit the time and resources to audit and improve each individual URL on a given site, Google Lighthouse can only be so helpful.

That’s where the added value of web.dev comes into play. “Learn” is a category of content accessible through web.dev that (at the time of writing) encompasses 227 different topics.

web.dev Learn breaks these resources down into three primary categories.

  1. Realize what the web can be focuses on principles of web development in modern-day internet applications. In a world dominated by mobile use and accessibility, these resources focus on providing a fast, reliable, accessible, and measurable web experience for your visitors.Realize what the web can be includes the following collection of resources by topic:
    1. Fast load times: 40 resources
    2. Accessible to all: 8 resources
    3. Network reliability: 7 resources
    4. Safe and secure: 5 resources
    5. Easily discoverable: 2 resources
    6. Progressive web apps: 7 resources
    7. Metrics: 8 resources
  2. Frameworks is a collection of resources aimed to assist with the development of two of the most popular JavaScript based web frameworks, React and Angular.
    1. React: 11 resources
    2. Angular: 9 resources
  3. Lighthouse is a deep collection of resources that provide detail and comprehension on specific audits that are represented in the Google Lighthouse toolset. If you’re tired of chasing individual issues on a per-page basis, these resources can easily be shared with content marketers, developers, and designers as you continue to chase improved scores from the Lighthouse toolset.
    1. Performance audits: 33 resources
    2. PWA audits: 16 resources
    3. Best Practice audits: 15 resources
    4. Accessibility audits: 50 resources
    5. SEO audits: 13 resources

Using web.dev Learn to Tackle SEO Issues and Opportunities

Making use of the resources made available through web.dev Learn, readers can improve an organizational understanding of several important SEO factors. To help with that effort, what follows is a breakdown of these factors and some specific links that we here at Vizion have found to be the most helpful in our work.

Site Speed and Load Times
While you may be familiar with mobile-first indexation, delivering a strong web experience to mobile users starts by producing a fast-loading web experience. To improve page speed and site performance, we recommend that you start with Performance Budgets 101.

Once you have the basics of budgeting down, we recommend working with your development team to prioritize the integration of Google Lighthouse into your development environments. To learn more about how you can tap into Lighthouse v5 from a development perspective, start with Use Lighthouse for performance budgets and work your way toward Using Lighthouse Bot to set a performance budget.

The development focus includes tons of tips and methodologies for three areas of performance that we’ve found to be the most helpful. Work here should, at a minimum, include the minification of CSS and JS resources, efficiently loading third-party resources, and the optimization of image and media assets.

Keep in mind that while developers can work to introduce lazy loading and responsive images throughout your site, designers and content publishers should have a strong understanding of image optimization so they’re electing to use the appropriate images and file types in their line work.

User Accessibility

Many organizations overlook the necessity of addressing and maintaining web accessibility standards. In addition to alienating your targeted audiences, failure to incorporate conventions of accessibility can lead to serious legal ramifications.

Did you know that some of the world’s most recognizable brands and institutions—including Fox News, Beyoncé, CVS Pharmacy, Harvard, and Nike—have all faced lawsuits because of a failure to meet web accessibility standards?

Thankfully, web.dev tackles these considerations head on with their introductory resource: What is accessibility? From there, we encourage our clients to become more familiar with keyboard access and tab ordering and later incorporate a larger awareness for semantics and screen readers—particularly while working in responsive web formats.

Network Reliability

Ever wonder why you can spend anywhere from $0.99 to $10,000+ per month for web hosting? The answer typically lies in a combination of network performance and web hosting hardware. Sadly, even the most robust (and expensive) hosting provider cannot ensure that your users have a consistent and reliable point of access to your website.

In order to adequately serve content in a fast and efficient manner to all users across all devices, you need to learn more about network reliability and how it can be measured. Once you (and your DEV team) have a solid understanding of the network resources your site uses, you should invest in deepening your application of HTTP caching technologies—many of which are covered in this area of web.dev Learn.

User Safety and Information Security

Just like our computers are prone to viruses, malware, and other types of nefarious attacks, so too are websites. To help protect the data and integrity of your site and any information you collect on your users, web.dev has a couple of resources here to help you better understand security. Once you have the basics down, the resources will help you to understand how your site can work with web browsers like Chrome, Safari, and Firefox to help mitigate against attacks.

Content Discoverability
Admittedly, this is one area of web.dev that could be built out further to help non-SEOs to understand factors of discoverability. This web.dev resource takes a high-level approach to SEO, but we feel like there’s lot more to strong discoverability than knowing how search works or how you can measure SEO with Google Lighthouse.

Progressive Web Apps
Each year, I tend to find others expecting progressive web apps to become more of a focus for SEO. Aleyda Solis has helped me to keep PWAs for search as a top consideration when working on annual campaign objectives—and thankfully, web.dev helps folks like me to understand a bit more about PWAs and their relationship to search.


Measuring Performance and User Experience

Metrics and acronyms lurk around every corner of SEO—so I hope you’re not scared by the fact that Google Lighthouse places a strong emphasis on additional acronyms that you may not already be familiar with. These metrics, audited and scored within the Lighthouse, focus on user-centric performance.

While performance is almost always a relative measure, it can pay significant dividends by helping you understand when users can first see any of your on-page elements (First Contentful Paint (FCP)), or when your site first appears to be interactive (Time to Interactive (TTI)).

When it comes web.dev Learn, five specific metrics are highlighted, along with the ability to define your own custom metrics. We’d recommend starting with the five metrics to ensure you’re addressing the most important details before moving on to anything more customized.

Takeaways

As has been the case for years now, successful search engine optimization efforts require a variety of disciplines and applications.

While web.dev cannot always serve as a de-facto resource for all things SEO, the platform itself provides far more information, guidance and recommendations than Google often gets credit for. Since it has been introduced, web.dev has also introduced a blog and several posts that all roll up into the collections described above. To that end, we expect to see more helpful content added in the future—and we make it a point to refer ourselves and our clients to this growing resource when addressing SEO campaigns.

With this in mind, we hope that the next time you’re tasked with building or optimizing a web experience, you can use the web.dev resource as a roadmap for ensuring that you’re doing your part to build a better web.