Google Hackathon on AIR - Web Performance Tools

TL;DR

Discussion on web performance tools and their importance in 2018.

Transcript

DOMINIK HEYBERG: Hi, everyone, and welcome to our first Hackathon on Air in 2018. I hope you had a good Christmas break. Today, we want to talk about web performance tools. There is a wide variety of tools. And with a few announcements that you probably are aware of that we published recently web performance tools are even more important in 2018 th... Read More

Key Insights

• Web performance tools are crucial in 2018 as page speed becomes a ranking signal for mobile queries starting July 2018.
• Test My Site is a conversation starter tool focusing on mobile site performance, providing loading time insights and optimization recommendations.
• WebPagetest is a comprehensive tool for diagnosing site performance, offering various settings for detailed analysis.
• PageSpeed Insights now includes real-world performance data from the Chrome User Experience Report, offering insights on First Contentful Paint and DOMContentLoaded.
• Lighthouse is an open-source tool that audits web pages for performance, accessibility, best practices, SEO, and progressive web apps.
• The Chrome User Experience Report uses real user monitoring data, providing a more accurate reflection of site performance in the wild.
• Lighthouse Performance audit evaluates multiple metrics like First Paint, First Meaningful Paint, Time To Interactive, and Input Latency.
• Optimizing above-the-fold content is crucial as it directly impacts the user's first impression and likelihood to engage with the site.

Questions & Answers

Q: What is the significance of web performance tools in 2018?

Web performance tools are significant in 2018 because page speed becomes a ranking signal for mobile queries starting July 2018. This means that the speed at which a site loads on mobile devices will directly impact its search engine ranking, making it crucial for developers to optimize their sites using these tools.

Q: How does Test My Site help improve mobile site performance?

Test My Site helps improve mobile site performance by providing insights into a site's loading time on a 3G network. It calculates the potential business impact of the loading time and offers optimization recommendations. This tool is particularly useful for marketeers as it doesn't require a technical background and serves as a conversation starter between marketing and development teams.

Q: What makes WebPagetest different from other performance tools?

WebPagetest differs from other performance tools by offering a comprehensive analysis with various settings for detailed site performance diagnosis. It allows users to choose different connections, browsers, and test locations, providing a more tailored analysis. Additionally, it offers video creation of site rendering, which is useful for visualizing performance issues and sharing them with stakeholders.

Q: What new feature does PageSpeed Insights offer with its update?

The updated PageSpeed Insights now includes real-world performance data from the Chrome User Experience Report. This feature provides insights into First Contentful Paint and DOMContentLoaded metrics, offering a more accurate reflection of how a page performs compared to others in the dataset. This update enhances the tool's ability to provide actionable insights for improving site performance.

Q: How does Lighthouse contribute to web page quality improvement?

Lighthouse contributes to web page quality improvement by offering automated audits across several categories, including performance, accessibility, best practices, SEO, and progressive web apps. It provides detailed reports with scores and recommendations, enabling developers to identify and address various issues that affect the overall quality and user experience of their web pages.

Q: What is the Chrome User Experience Report and its significance?

The Chrome User Experience Report is a dataset that uses real user monitoring data to provide insights into how websites perform in the real world. Unlike synthetic measurements, this report reflects actual user experiences, offering a more accurate assessment of site performance. It is significant because it helps developers understand how their sites perform under real-world conditions, guiding them in making informed optimization decisions.

Q: What are the key metrics evaluated in Lighthouse's Performance audit?

Lighthouse's Performance audit evaluates key metrics such as First Paint, First Contentful Paint, First Meaningful Paint, Time To Interactive, Consistently Interactive, and Input Latency. These metrics collectively provide a comprehensive view of a site's loading experience, helping developers identify areas for improvement to enhance user experience by reducing load times and ensuring smooth interactivity.

Q: Why is it important to focus on above-the-fold content optimization?

Focusing on above-the-fold content optimization is important because it directly impacts the user's first impression of the site. Above-the-fold content is what users see immediately upon loading a page, and a fast, visually complete display can reduce bounce rates and encourage further interaction. Optimizing this content ensures that users have a positive initial experience, which is crucial for retaining their attention and engagement.

Summary & Key Takeaways

• The session emphasizes the importance of web performance tools in 2018, especially with page speed becoming a ranking factor for mobile queries. It introduces various tools like Test My Site, WebPagetest, and PageSpeed Insights, each serving different purposes and offering unique insights.

• Test My Site is highlighted as a tool for marketeers to start conversations about site performance, focusing on loading times and business impact. WebPagetest offers more technical analysis options, suitable for developers looking to dive deeper into site performance issues.

• Lighthouse is presented as a comprehensive auditing tool, offering insights into performance, accessibility, best practices, SEO, and progressive web apps. It provides detailed metrics to help developers optimize their sites holistically, ensuring a smooth user experience across different devices and connections.