TechPrufer
Get started
Google
Google logoGoogle · Feature trail

Mobile Web Performance and Optimization

34 posts · Mar 2009 – Aug 2019

What this trail covers

This feature thread tracks Google's efforts to improve the performance and user experience of its web applications, particularly on mobile devices. Early efforts focused on reducing startup latency for mobile web applications like Gmail. Subsequent developments have explored optimizing web applications for various screen types and user contexts, including TVs, and addressing broader mobile web performance challenges and strategies to ensure faster loading times and a smoother user experience across devices.

All Google trails
  1. The Speed Benefit of AMP Prerendering- Google Developers BlogThis post details the technical benefits of AMP Prerendering, explaining how it works by prerendering AMP pages in the background, reducing the time to interactive. It highlights that prerendering can lead to a 10x speed improvement for AMP pages by making them instantly interactive.
  2. AMP Compression Update- Google Developers BlogThis post announces an update to AMP Compression, detailing how it has been improved to reduce the size of AMP documents by an additional 10-15%. This is achieved through a new compression algorithm that is more efficient for the types of text and markup found in AMP pages. The update aims to further improve mobile web performance by reducing data transfer and speeding up page load times.
  3. Mobile web and machine learning solutions: Case studies from Launchpad Accelerator- Google Developers BlogThis post presents case studies from the Launchpad Accelerator program, highlighting how mobile web and machine learning solutions were developed. It focuses on the practical application of these technologies by startups, demonstrating their implementation and potential impact.
  4. How Twitter used Doze in Android 6.0 Marshmallow to Improve Notification Performance- Google Developers BlogThis post details how Twitter integrated with Android 6.0 Marshmallow's Doze mode to improve notification performance. It explains how Doze mode restricts background activity and how Twitter adapted its notification delivery to work within these constraints, specifically by using the new AlarmManager.setExactAndAllowWhileIdle API to schedule notifications even when the device is in Doze mode. This allowed for more timely delivery of notifications without significantly impacting battery life.
  5. Optimizing for Bandwidth on Apache and Nginx- Google Developers BlogThis post provides technical guidance on optimizing bandwidth usage for web servers (Apache and Nginx) by detailing techniques such as enabling Gzip compression, leveraging browser caching with appropriate HTTP headers, and optimizing image delivery. It also touches upon the importance of efficient JavaScript and CSS delivery.
  7. Optimizing the Critical Rendering Path for fast mobile websites- Google Developers BlogThis post introduces techniques for optimizing the critical rendering path of mobile websites. It covers strategies such as inlining critical CSS, deferring non-critical JavaScript, and optimizing image loading to improve perceived performance and user experience on mobile devices.
  8. Crawling the infinite scroll- Google Developers BlogIntroduces techniques for efficiently handling infinite scroll on mobile web pages, including lazy loading of content and optimization of scroll event listeners to improve performance and user experience.
  9. Measuring network performance with Resource Timing API- Google Developers BlogIntroduces the Resource Timing API as a tool for developers to measure network performance, providing detailed timing information about resource loading (e.g., DNS lookup, connection time, SSL handshake, request/response times) to identify bottlenecks and optimize web page performance.
  10. Our checklist for improving mobile websites- Google Developers BlogIntroduces a checklist for improving mobile websites, covering image optimization, caching, mobile-friendliness, and JavaScript execution.
  11. CSS: fast to load, easy to maintain- Google Developers BlogThis post introduces techniques for optimizing CSS loading and maintenance to improve web performance. It discusses strategies for making CSS files smaller and more efficient, such as removing unused rules, using shorthand properties, and optimizing selectors. It also covers techniques for efficient CSS loading, including inlining critical CSS and using `rel=preload` for non-critical stylesheets. The post emphasizes the importance of a well-structured and maintainable CSS codebase for long-term performance.
  12. Introducing Page Speed mobile analysis, on Google Chrome for Android- Google Developers BlogIntroduced Page Speed mobile analysis for Google Chrome on Android, enabling developers to inspect and optimize the performance of their mobile web pages directly within the browser. This tool provides insights into various performance metrics, helping developers identify and address bottlenecks.
  13. Mobile Web performance challenges and strategies- Google Developers BlogThis post details challenges and strategies for mobile web performance, including reducing startup latency for mobile web applications like Gmail, optimizing for various screen types and user contexts (including TVs), and addressing broader mobile web performance challenges to ensure faster loading times and a smoother user experience across devices.
  14. GQueues Mobile: a case for the HTML5 web app- Google Developers BlogThis post introduces GQueues Mobile, an HTML5 web application designed for mobile devices. It details the technical considerations and benefits of building a mobile-first web application, emphasizing performance, user experience, and the use of HTML5 technologies to achieve these goals. The article serves as a case study for adopting HTML5 web apps for mobile access.
  15. Page Speed for Chrome, and in 40 languages!- Google Developers BlogIntroduced the Page Speed for Chrome tool, which analyzes and reports on the speed of web pages. Highlighted its availability in 40 languages to improve web performance globally.
  16. Your Web, Half a Second Sooner- Google Developers BlogThis post details techniques to reduce web page load times by approximately half a second. It highlights the significant impact of JavaScript execution on performance and introduces strategies to mitigate this, such as optimizing JavaScript code and deferring non-critical scripts. The post also touches upon the importance of efficient resource loading and the benefits of reducing the number of HTTP requests.
  17. Optimizing your site for TV is now easier- Google Developers BlogThis post details how to optimize web applications for TV screens, focusing on aspects like layout, navigation, and input methods. It introduces strategies for adapting web content to the unique characteristics of the TV environment, ensuring a better user experience on this platform.
  18. Go Daddy Makes The Web Faster by enabling mod_pagespeed- Google Developers BlogThis post details how Go Daddy integrated and utilized mod_pagespeed (now known as PageSpeed Module) to significantly improve their website's performance. It highlights specific optimizations achieved, such as reducing the number of HTTP requests, optimizing CSS and JavaScript, and enabling image compression, leading to a substantial decrease in page load times. The post emphasizes the technical benefits and practical implementation of mod_pagespeed for web developers.
  19. CSS3 Transitions and Transforms in Gmail for the iPad- Google Developers BlogThis post details the implementation of CSS3 Transitions and Transforms within Gmail for the iPad. It highlights how these CSS features were used to create smoother animations and visual feedback for user interactions, such as opening and closing conversations, and navigating between different views. The technical details include the specific CSS properties used and the performance considerations for achieving a fluid user experience on the iPad's browser.
  20. Introducing Google Browser Size- Google Developers BlogIntroduced Google Browser Size, a tool to help developers visualize and test their web pages across various browser viewport sizes. This tool aids in optimizing web applications for different screen resolutions and devices, contributing to improved mobile web performance and user experience.
  21. Use compression to make the web faster- Google Developers BlogThis post introduces the concept of using compression techniques to make the web faster. It discusses how compression can reduce the size of web content, leading to faster download times and improved user experience. The post highlights the benefits of compression for both users and developers, and encourages adoption of these techniques.
  22. Introducing the Website Optimizer Experiment Management API- Google Developers BlogThis post introduces the Website Optimizer Experiment Management API, enabling developers to programmatically manage A/B tests and optimize website performance. This directly contributes to the goal of improving mobile web performance and user experience by providing tools for experimentation and optimization.
  23. Let's make the mobile web faster- Google Developers BlogThis post details specific techniques for improving mobile web performance, including the use of techniques like "deferring JavaScript" and "optimizing images" to reduce page load times and enhance user engagement.
  24. Gmail for Mobile HTML5 Series: CSS Transforms and Floaty Bars- Google Developers BlogThis post details the implementation of CSS Transforms and Floaty Bars within the Gmail mobile web application, demonstrating techniques for improving the user experience and visual presentation on mobile devices. It highlights the use of these CSS features to create dynamic and responsive UI elements, contributing to the broader effort of optimizing mobile web performance.
  25. Introducing Google Chrome Frame- Google Developers BlogThis post introduces Google Chrome Frame, a plugin that allows older versions of Internet Explorer to use the Google Chrome rendering engine. This directly contributes to improving web application performance and user experience by enabling access to modern web technologies and faster rendering, especially for users on legacy browsers.
  26. Gmail for Mobile HTML5 Series: Reducing Startup Latency- Google Developers BlogThis post details specific techniques used to reduce the startup latency of Gmail for mobile HTML5. It focuses on optimizing JavaScript execution, reducing the amount of code loaded initially, and improving the efficiency of rendering the initial view. Techniques discussed include code splitting, lazy loading of modules, and optimizing DOM manipulation.
  27. Gmail for Mobile HTML5 Series: Autogrowing Textareas- Google Developers BlogIntroduced autogrowing textareas using HTML5 for Gmail on mobile, improving the user experience for text input by dynamically adjusting the textarea size based on content.
  28. Gmail for Mobile HTML5 Series: Using Timers Effectively- Google Developers BlogThis post details how Gmail for Mobile leverages HTML5 timers (setTimeout and setInterval) to manage asynchronous operations and improve the user experience. It explains how timers are used for tasks like polling for new mail, updating UI elements, and handling user interactions, contributing to a more responsive and efficient mobile web application.
  29. Gmail for Mobile HTML5 Series: Suggestions for Better Performance- Google Developers BlogThis post provides specific technical suggestions for improving the performance of Gmail's mobile web application, focusing on HTML5 best practices. It details techniques for optimizing JavaScript execution, managing DOM manipulation, and leveraging caching mechanisms to reduce load times and enhance responsiveness on mobile devices.
  30. Steve Souders: Life's Too Short, Write Fast Code (part 2)- Google Developers BlogThis post, part 2 of Steve Souders' series, delves into practical strategies for writing fast code, focusing on minimizing HTTP requests by combining files, using CSS sprites, and reducing the number of external scripts. It also discusses optimizing JavaScript execution by deferring non-critical scripts and the importance of browser caching for static assets. The core message is that performance is a critical aspect of user experience and business success, and developers should prioritize writing efficient code.