Think with Google: Understanding Browsers, Improving Performance, Optimising Technology

Improving performance is a process that starts with minimizing, or at least, optimizing the data that users download. Understanding how a browser renders those resources is a prerequisite for improving code efficiency. After improving it, you need a way to test it.

Overview

We have all seen apps whose displays tend to jump raggedly during animations, scrolling, or other user interactions. This visible inconsistency is a performance issue commonly called jank or judder and is an annoying distraction for users; it interrupts their flow of thought while using the app and it makes the app look less polished and professional.

If the browser takes too long to make and display a frame, it gets skipped and you don’t see the frame at all. Instead, you see the next one (or the one after that), and the object jumps across the gap instead of smoothly moving through it.

The jank phenomenon can be avoided by ensuring that an app runs at a consistent sixty frames per second (60fps). Many factors contribute to an app’s frame rate, and there are various ways to code JavaScript and CSS to reduce or eliminate jank and achieve the desired rate.

Optimizing Content Efficiency

To deliver great performance you need to optimize delivery of each and every byte of your site.

Overallweb applications continue to grow in their scope, ambition, and functionality — that’s a good thing. However, the relentless march toward a richer web is driving another trend: the amount of data downloaded by each application continues to increase at a steady pace. To deliver great performance we need to optimize delivery of each and every byte!

What does a modern web application look like? HTTP Archive can help us answer this question. The project tracks how the web is built by periodically crawling the most popular sites (300,000+ from the Alexa Top 1M list) and recording and aggregating analytics on the number of resources, content types, and other metadata for each individual destination.

Critical Rendering Path

Do you understand what happens in the intermediate steps between receiving HTML, CSS, and JavaScript and the processing to turn them into rendered pixels?

Rendering Performance

To write high performing sites and apps you need to understand how HTML, JavaScript and CSS are handled by the browser, and ensure that the code you write (and third-party code you include) runs as efficiently as possible.

Understanding Low Bandwidth and High Latency

It’s important to understand what using your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help.

The PRPL Pattern

PRPL (push, render, pre-cache and lazy-load) is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch.

What you should know before you start?

Critical rendering path: You should understand the rendering pipeline and how JavaScript and CSS affect it. Learn more here: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ and here: Udacity course on Website Performance Optimization: The Critical Rendering Path.

Frames and frame rate: You should know how the browser constructs frames and why the 60fps rate is important for a smooth display. Learn more here: https://developers.google.com/web/fundamentals/performance/rendering/ and here: Udacity course on Browser Rendering Optimization: Building 60 FPS Web Apps.

Application life cycle: You should understand the Response, Animation, Idle, and Load parts of a running app and recognize the windows of opportunity that each part presents. Learn more here: The RAIL Performance Model

Chrome DevTools: You should have a basic understanding of DevTools and how to use them to analyze a web app, especially the Timeline tool. Learn more here: Analyze Runtime Performance.

Think with Google?

Compelling data. Big ideas. Creative juice. Put Google research and insight behind your thinking.

Digital innovation continues to propel the marketing industry forward, and the pace is mind-blowing. Marketers mostly rely on data, analysis and insights to stay informed and inspired. Think with Google is Google’s way to share all of this and more with any of you. Think of Think with Google as your resource for everything from high-level insights to deck-ready stats to useful tools. At Think with Google you will find the data we’re exploring and the trends Google’s tracking along with forward-looking perspectives and behind-the-scenes looks at digital campaigns —across industries, platforms and audiences. Think with Google definitely hopes you find it helpful and visit them often. Well, often enough ..

Perform a professional Website Audit?

CONNECT SEO Website Optimisation Audit delivers professional performance optimisation and security scan, SEO, search results audit and competition comparison, content management and social networking audit. It boosts the websites’ online presence, improves brand recognition, adds value and increases sales. We provide three available Auditing Levels: Free Website Audit (1 Optimisation Report), Audit + Basic Optimisation (1 Optimisation report + Basic SEO + Basic optimisation), Audit + Advanced Optimisation (1 Optimisation + 1 SEO Report + Basic SEO + Advanced optimisation).

Read more about CONNECT WEBSITE SEO AUDIT HERE >>