profile
viewpoint
Addy Osmani addyosmani Google Mountain View, California https://www.addyosmani.com Engineering Manager at Google working on Chrome & Web Platform

addyosmani/backbone-fundamentals 9499

:book: A creative-commons book on Backbone.js for beginners and advanced users alike

addyosmani/a11y 1627

Accessibility audit tooling for the web (beta)

addyosmani/backbone-boilerplates 494

Backbone.js stack boilerplates demonstrating integration with Express, Ruby, PHP, Grails and more.

aaronfrost/grunt-traceur 207

This is a grunt task for adding a grunt task to compiler ES6 JS into ES3 JS using Traceur Compiler

addyosmani/backbone-mobile-search 158

A Backbone.js + jQuery Mobile sample app using AMD for separation of modules, Require.js for dependency management + template externalisation and Underscore for templating

addyosmani/angular1-dribbble-pwa 101

Angular 1 Dribbble Progressive Web App demo

addyosmani/backbonejs-gallery 73

A Backbone, Underscore and jQuery Templates based image gallery (early early beta)

addyosmani/a11y-webapp 45

A11y WebApp built with Polymer (WIP)

addyosmani/backbone-koans-qunit 44

Backbone Koans for QUnit

addyosmani/backbone-aura 38

Backbone Aura

pull request commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

To share an update here:

We are most likely going to move ahead with the introduction of a higher order component (HOC) for React users with minimal changes to Quicklink's API surface to support this.

Work on this has taken longer than we originally anticipated, but we are trying to get it right with minimal steps required by the developer.

anton-karlovskiy

comment created time in 8 days

issue commentWICG/priority-hints

Bring back examples into the explainer

@yoavweiss would a 1:1 copy of them back to the explainer suffice? Happy to PR in this change. Should be minimal effort.

yoavweiss

comment created time in 9 days

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <+  const prefetchChunks = options.prefetchChunks;+  // ray test touch >++  // ray test touch <+  const prefetchHandler = urls => {+    prefetch(urls, options.priority).then(isDone).catch(err => {+      isDone(); if (options.onError) options.onError(err);+    });+  };

@anton-karlovskiy Looking at https://github.com/lukeed/route-manifest#usage, I feel we may still be missing why we can't achieve the same behavior as prefetchChunks() using Quicklink's current prefetch() utility.

Stepping back...

Step 4 in https://github.com/anton-karlovskiy/intersection-observer-react-quicklink-demo#how-to-setup asks developers to use a React HOC in order to get Quicklink working for routes.

What if prefetchChunks was just a part of the HOC code and re-used prefetch()?

const prefetchChunks = (entry) => {
  try {
    const chunkEntry = rmanifest(window.__rmanifest, entry.pathname);
    const chunkURLs = chunkEntry.files.map(file => file.href);
    if (chunkURLs.length) {
      prefetch(chunkURLs);
      return;
    }
  } catch (error) {
    console.log(error);
  }
  // also prefetch regular links in-viewport
  prefetch(entry.href);
};

That way we would just package https://glitch.com/edit/#!/anton-karlovskiy-intersection-observer-react-quicklink-demo?path=src/lib/quicklink.js:49:0, but could get everything working without expanding Quicklink's API surface.

Would that work? (i.e what we PR in to this repo is the HOC but not land this PR). Or am I missing something? :)

anton-karlovskiy

comment created time in 13 days

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <+  const prefetchChunks = options.prefetchChunks;+  // ray test touch >++  // ray test touch <+  const prefetchHandler = urls => {+    prefetch(urls, options.priority).then(isDone).catch(err => {+      isDone(); if (options.onError) options.onError(err);+    });+  };

@lukeed if you have time to do a second round of reviews, that would be super appreciated. Going to take another look at the latest commits now too.

anton-karlovskiy

comment created time in 13 days

push eventGoogleChromeLabs/webpack-libs-optimizations

Gilmore Davidson

commit sha 0f268ee0b7b28f5647319526bab12b2f54962e2e

Add section for Moment Timezone

view details

Addy Osmani

commit sha 218d7f634ca280b31cb992b359874ae971b73a81

Merge pull request #20 from gilmoreorless/moment-timezone Add section for Moment Timezone

view details

push time in 14 days

PR merged GoogleChromeLabs/webpack-libs-optimizations

Add section for Moment Timezone

First of all, thanks for this repo — I picked up some good tips here.

I recently wrote a plugin to reduce how much JSON data is loaded by moment-timezone, heavily inspired by moment-locales-webpack-plugin. I've added a quick section for it here, and also fixed a minor typo in the moment section.

+14 -1

3 comments

1 changed file

gilmoreorless

pr closed time in 14 days

PR opened GoogleChrome/web.dev

Reviewers
[content] Adds eBay web performance case study

Fixes #2047

Note: Reviewed by eBay's technical staff as well as @harleenkbatra08

This PR adds an eBay web performance case study to the blog. eBay are aiming to get a complimentary blog post out tomorrow morning. If it's at all possible to land/deploy this post before then, that would be amazing. I otherwise completely understand if the review process would require much longer than this short timeline.

Handing things over to @kaycebasques and @robdodson

I'm personally more than happy for direct changes to this PR to be made for tweaks to formatting/text/etc.

+153 -0

0 comment

10 changed files

pr created time in a month

create barnchGoogleChrome/web.dev

branch : ebay

created branch time in a month

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <+  const prefetchChunks = options.prefetchChunks;+  // ray test touch >++  // ray test touch <+  const prefetchHandler = urls => {+    prefetch(urls, options.priority).then(isDone).catch(err => {+      isDone(); if (options.onError) options.onError(err);+    });+  };+  // ray test touch >+   const observer = new IntersectionObserver(entries => {     entries.forEach(entry => {       if (entry.isIntersecting) {         observer.unobserve(entry = entry.target);         // Do not prefetch if will match/exceed limit         if (toPrefetch.size < limit) {           toAdd(() => {-            prefetch(entry.href, options.priority).then(isDone).catch(err => {-              isDone(); if (options.onError) options.onError(err);-            });+            // ray test touch <+            prefetchChunks ? prefetchChunks(entry, prefetchHandler) : prefetchHandler(entry.href);

I think once we have explained why the prefetchChunks option is needed in this PR, it would be good to also write out some docs additions to the project README so that we have API docs for this change too.

anton-karlovskiy

comment created time in a month

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <+  const prefetchChunks = options.prefetchChunks;+  // ray test touch >++  // ray test touch <+  const prefetchHandler = urls => {+    prefetch(urls, options.priority).then(isDone).catch(err => {+      isDone(); if (options.onError) options.onError(err);+    });+  };

We should include a PR comment to explain why prefetchHandler is needed. Could you add a comment reply below here? For other contributors, they know prefetch() already supports passing an array of URLs but may not be certain why introducing this new prefetchChunks option is needed.

anton-karlovskiy

comment created time in a month

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <+  const prefetchChunks = options.prefetchChunks;

We are reading prefetchChunks from the options, but have not written JSDoc comments for it in the comments higher up (the same way other options are documented). This should probably be changed.

anton-karlovskiy

comment created time in a month

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 describe('quicklink tests', function () {   const server = `http://127.0.0.1:8080/test`;+  // ray test touch <+  const host = `http://127.0.0.1:8080`;

It would probably make more sense to change these lines as follows:

const host = `http://127.0.0.1:8080`;
const server = `${host}/test`;
anton-karlovskiy

comment created time in a month

Pull request review commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

 export function listen(options) {    const timeoutFn = options.timeoutFn || requestIdleCallback; +  // ray test touch <

Could we remove the ray test touch lines from source now that we're closer to a solution we think is workable?

anton-karlovskiy

comment created time in a month

pull request commentGoogleChromeLabs/quicklink

(feature) Adds prefetchChunks support

Thank you for your continued work on this PR, Anton.

To provide some public notes on the changes here: we have spent the last month exploring React and single-page application support for Quicklink in a few private repos. This specifically involved solving this problem:

  • A user had a single-page app that used a router (e.g React Router)
  • Links to SPA routes Quicklink would prefetch would not fetch the actual JS needed to render a route; so prefetching /about, /contact etc were effectively not useful, even if links to them were in view. This is a problem almost all prefetching libraries don't help with.
  • We needed a way to map each route (/about etc) back to the Webpack chunk it corresponded to. We also needed this to work with long-term hashing (e.g about.kjhas0dh0a.js)

@lukeed was kind enough to make a go at an initial solution here and we've been building on it. Some of the edge-cases we ran into were duplicate prefetch requests being made, in-viewport links not always being fetched etc, but have been trying to smooth these over. Software is hard 😄

Where we are at is we've defined a solution to this problem that worked for React apps. If a user had set this up correctly, any in-viewport links would have their final JS prefetched correctly. Early attempts at introducing this solution to Quicklink via this PR were too highly coupled to React and bloated Quicklink's size e.g one of our dependencies is @lukeed's awesome https://github.com/lukeed/route-manifest, but took our overall bundle size in this PR to over 1.5KB. I didn't feel this was worthwhile as a cost to all Quicklink users.

The current PR has been trimmed back to just introduce a new prefetchChunks() method, which does increase our bundle size but by far less.

Capture

Once this lands, users will use prefetchChunks together with rmanifest and a new Quicklink HOC (withQuicklink) for React apps to get everything working the way they would expect:

import React, { useEffect, useRef, useState } from 'react';
import { listen } from 'quicklink';

const useIntersect = ({ root = null, rootMargin, threshold = 0 }) => {
  const [entry, updateEntry] = useState({});
  const [node, setNode] = useState(null);
  const observer = useRef(null);

  useEffect(
    () => {
      if (observer.current) observer.current.disconnect();
      observer.current = new window.IntersectionObserver(
        ([entry]) => updateEntry(entry),
        {
          root,
          rootMargin,
          threshold
        }
      );

      const { current: currentObserver } = observer;
      if (node) currentObserver.observe(node);

      return () => currentObserver.disconnect();
    },
    [node, root, rootMargin, threshold]
  );

  return [setNode, entry];
};

const withQuicklink = (Component, options) => {
  return props => {
		const [ref, entry] = useIntersect({root: document.body.parentElement});
    const intersectionRatio = entry.intersectionRatio;
    
		useEffect(() => {
			if (intersectionRatio > 0) {
        listen(options);
			}
		}, [intersectionRatio]);
		
		return (
			<div ref={ref}>
        <Component {...props} />
			</div>
		);
	};
};

export {
  withQuicklink
};

I believe https://glitch.com/~anton-karlovskiy-intersection-observer-react-quicklink-demo has the latest demo of these pieces working together. @lukeed in case interested, on the evolving discussions that got us here happened over on this PR.

anton-karlovskiy

comment created time in a month

push eventGoogleChromeLabs/quicklink

Minko Gechev

commit sha 836f170df4007c05c24b1300e0faf04fb823168b

[docs] Update the Angular logo (#158) Thanks for adding link to `ngx-quicklink`! The logo on the website was for AngularJS. Updated it with the logo for Angular.

view details

push time in a month

PR merged GoogleChromeLabs/quicklink

[docs] Update the Angular logo

Thanks for adding link to ngx-quicklink!

The logo on the website was for AngularJS. Updated it with the logo for Angular.

Old Screen Shot 2020-01-15 at 1 34 55 PM

New Screen Shot 2020-01-15 at 1 34 28 PM

+1 -1

0 comment

1 changed file

mgechev

pr closed time in a month

push eventGoogleChromeLabs/adaptive-loading

Anton Karlovskiy

commit sha b0d03fdcd26088d992a60602ce04d94b7a0418e5

[core] fix the view of debugging links on mobile view for next tv app (#109) * removed hardcoded hooks and installed react-adaptive-loading package * fixed the view of debugging links on mobile * fixed a mistake

view details

push time in 2 months

issue closedGoogleChromeLabs/adaptive-loading

Client Hints + initial state Adaptive Loading Hooks

Now that https://github.com/GoogleChromeLabs/react-adaptive-hooks support setting initial values (e.g initialEffectiveConnectionType), I think there would be value in showing how Client Hints can provide an initial value on the server and this can then be updated, if necessary, on the client-side via the JS APIs exposed in Hooks.

Stack requirement: We should build an app that uses Next.js as it has to keep SSR in mind and would be a good "stress test" this all works together.

Signal wise, I think it's fine to rely on Network and Device Memory. We would want this demo to be responsive and render cleanly on both mobile and desktop. Output should have at least a 90/100 on Lighthouse for performance.

What are we building? A clean, nice-looking TV show browser. TMDB's API provides the data to allow us to build this. It's very similar to our existing TMDB client built using CRA, except will focus on shows rather than movies. There are a few existing Next.js open-source apps we could look to for reference here.

Reference https://topheman-movie-browser.herokuapp.com/ is from this year and is open-source https://github.com/topheman/nextjs-movie-browser.

https://github.com/timneutkens/next-episode is a Next.js TV show app that might be a good fit here. It's 2 years old so likely requires an upgrade to get it working with the latest version of Next.

I really like how next-episode looks. It would be good to evaluate if it makes more sense to fork it and update or try improving the design of nextjs-movie-browser. We could also choose to write something from scratch if there are too many "extras" in either implementation.

cc @anton-karlovskiy

closed time in 2 months

addyosmani

push eventGoogleChromeLabs/adaptive-loading

Anton Karlovskiy

commit sha 71aed19882939af97ba9691c8d6b4a4a25d7cf90

[core] Next Episode V2 (#103) * removed hardcoded hooks and installed react-adaptive-loading package * upload next tv show app and configured firebase deployment * configured custom server and fixed http redirection in tmdb api * added licences * implemented show page with seasons and episodes * updated debugging option position * implemented stats in show page * implemented loading effect on episodes fetching * removed local firebase deployment configuration * improved test option ui on mobile view * updated seasons and episodes ui on mobile view * implemented home link in tv show app * updated theme approach with react context * showed 2 columns on mobile view * improved view on mobile for episodes and seasons * implemented back link * added missing licenses * upgraded CNA version for compatibility with tv show app * updated cna-memory-considerate-animation with react-adaptive-hooks supported on server side rendering * linked credit source to the repo * added inspired link to README * implemented a separator between top nav links * removed lazyloading fallback for testing effect on firefox * uninstalled lazysizes * updated configuration for build an clean * updated docs and configuration for build and clean updated microsite for next-show-adaptive-loading * implemented debugging links at the bottom of pages * added licence * tweaked for link debugging with adaptive-loading domain prefix * [docs] Add WPT comparison for Next Episode Co-authored-by: Addy Osmani <addyosmani@gmail.com>

view details

push time in 2 months

PR merged GoogleChromeLabs/adaptive-loading

Feature/next tv app

@addyosmani

Every thing is ready but for deployment to Adaptive Loading Firebase project.

If we have some idea of favicon and manifest, we can easily implement it as we have the head component structure already. Just assets are missing.

+23659 -4009

13 comments

87 changed files

anton-karlovskiy

pr closed time in 2 months

push eventanton-karlovskiy/adaptive-loading

Addy Osmani

commit sha 20309f6cda7494f85b04764f0b7f4510c3064cee

[docs] Add WPT comparison for Next Episode

view details

push time in 2 months

pull request commentGoogleChromeLabs/adaptive-loading

Feature/next tv app

Thanks, Anton. This looks good enough to land now!

For later, here's the before/after WebPageTest trace over 4G: https://www.webpagetest.org/video/compare.php?tests=191220_YV_f523eb63831516f1b2c3c36086034cfc,191220_Z3_90649a7fe05971268a38885c78b3250b

anton-karlovskiy

comment created time in 2 months

pull request commentGoogleChromeLabs/adaptive-loading

Feature/next tv app

Could we update https://github.com/GoogleChromeLabs/adaptive-loading/tree/72baaaf7ef7918ce557b7776398f623ada8b2b0f/next-show-adaptive-loading with two links to the query-parameter versions to force slow/normal modes?

anton-karlovskiy

comment created time in 2 months

pull request commentGoogleChromeLabs/adaptive-loading

Feature/next tv app

Nice work on the latest updates, Anton. Can confirm Firefox is now working as expected 👍

"For Direct link to force slow mode, Direct link to force normal mode I think we can produce the same effect with the debugging toggle and check box at the top of the app." The purpose of the links is for people (e.g web performance experts) that might want to run a before/after on the app but won't be able to get a direct link to do this using the toggle and check box. An alternative to having links in the footer is that we could just have these links in the README and that would achieve the same. I'd be cool with that.

anton-karlovskiy

comment created time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

🎉 Thanks for being open to this change and helping iterate towards a nicer version of it! SG on the Firefox support bits. Looking forward to how that comes together!

I have a few other ideas for VisBug plugins I may try to PR in the new year. Appreciate how straight-forward contributing was 👍

nbd at all - could you let me know when this change makes its way to a release? ☺️

addyosmani

comment created time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

Okay, I'm sold on the revisions. Even with slightly overlapping elements we're able to visualize their independent z-index values while keeping them readable. I also like that these additions kept the original logic pretty in tact 👍 Thanks for collaborating on improving this, Adam! 🤗

image

The one shift these last sets of changes from the update introduce is that the snippet can no longer be pasted in FF/Safari DevTools and 'just work' the same. On the whole, I think that's fine and we can re-implement some of these tweaks in the gist for anyone that wishes to get this working in other browsers.

In short, I and the doggos approve of the direction here. If there's anything remaining from your Glitch you'd like to bring back in here, would you like to go ahead and commit those to the branch/PR? I wasn't sure if there were also docs changes needed so will defer to you to let me know :)

<img src="https://user-images.githubusercontent.com/110953/70843460-5a6d8800-1de7-11ea-87a1-e9fd718fbbd2.png" width=340>

addyosmani

comment created time in 2 months

push eventaddyosmani/ProjectVisBug

addyosmani

commit sha 072d5b0d9b1177be870296e70ca020f9e229a61f

Update implem. to match Adam's visbug native tweaks

view details

push time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

i updated the demo with some of the resets and updated it to 14px and added a filter to check for visbug 👍 things look great!

image

Thanks for experimenting with 14px. This looks a lot more readable and I think the average user will find this an improvement over the original values.

then, i was curious about a plugin using visbug's web components.. and a few minutes later, made this demo!

Nice! I'm going to play around with this update, in particular how it would handle nested components with different z-index values. I have a feeling the UX is just a wee bit nicer than the original proposal.

addyosmani

comment created time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

How would you feel about 13-14px?

addyosmani

comment created time in 2 months

pull request commentGoogleChromeLabs/adaptive-loading

Feature/next tv app

Great work on progress for this rewrite, Anton! Tested the latest deploys. I only have a few nits remaining that we have not shared on Slack so far:

  • Navigation: Could we update nav to include a separator between Home and Back? (e.g |)
  • Cross-browser testing: In Firefox, when manual testing has been checked and we turn on Poor Network/Memory, the view does not update to use the lower resolution resources. The preference is respected when you start navigating again through results, but it is not immediately there. This could be because Firefox doesn't support Client Hints nor some of the APIs on the client for doing detection, but we might want to just check if this is a bug with the demo or the hooks.
  • Routing: navigations result in https://adaptive-loading.web.app/?page=3 or https://adaptive-loading.web.app/show?id=80752, which while render the correct response when navigating, don't if you go to these URLs. We know this is a Next.js nested routing issue but just noting for the future.
  • Debugging: could we add a small area at the end of the page that includes: Direct link to force slow mode, Direct link to force normal mode.
anton-karlovskiy

comment created time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

Yeah, we should probably filter out the VisBug element. That makes sense. For the font size bump, do you have preferences here around units? (px, rem, em)

addyosmani

comment created time in 2 months

pull request commentGoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

alright, spent 30m to see what i could improve! had a lot of fun playing. even tried some backdrop filter stuff lol. here's what i thought ended up being an improvement, watcha think?

Love it! Thanks for spending time tweaking the implementation. Wdyt about us bumping up the font-size just a smidge for readability? Rest looks pretty ace. Also like the idea of centering the z-index to avoid clashes.

added additional styles so page styles dont leak in (might be good to shadow dom this eventually)

👍

addyosmani

comment created time in 2 months

issue commentGoogleChromeLabs/adaptive-loading

Client Hints + initial state Adaptive Loading Hooks

Let's try getting the ESM build working. Official Node support for ESM is finally in a good place, but given how recent this we may have to rely on workarounds. We can use the UMD build in case we get stuck.

addyosmani

comment created time in 2 months

PR opened GoogleChromeLabs/ProjectVisBug

Adds z-index visualization plugin

This change introduces a z-index visualization plugin. The idea is to render a box with the z-index value for each child, to help developers debug index stacking. Each box is given a random color to help distinguish what you're seeing.

Below you can see the plugin being used on a few sites:

Screen Shot 2019-12-12 at 12 26 33 PM

image

Screen Shot 2019-12-12 at 12 27 09 PM

Very open to additional commits being added by @argyleink to improve this. A few areas it could be improved:

Feel free to let me know if this isn't a great fit for this project :)

  • Command-name: I added zindex and z-index, however if there's something better, please feel free to change it
  • Visualization: I'm aware of 3D DOM viz work being explored by some DevTools teams right now, but still like the simplicity this visualization offers :) I'm sure this could be improved. Potentially tweaking font-size, the model for setting colors or logic for how to determine what to visualize.
  • Bugs: On pages heavily using z-index you can end up with boxes which overlap. One could argue an MVP doesn't need to tackle this, but it's definitely visible sometimes. It could be fixed with a model for avoiding overlapping positions of what is drawn.

This work is inspired by a bookmarklet Mr. @paulirish wrote 10 years ago :)

Original gist Non-jQuery rewrite this is based on

+38 -3

0 comment

4 changed files

pr created time in 2 months

create barnchaddyosmani/ProjectVisBug

branch : zindex

created branch time in 2 months

fork addyosmani/ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug

https://visbug.web.app

fork in 2 months

issue commentGoogleChromeLabs/adaptive-loading

Client Hints + initial state Adaptive Loading Hooks

Any updates on whether the UMD build helped here, @anton-karlovskiy? :)

addyosmani

comment created time in 2 months

push eventGoogleChromeLabs/quicklink

Jonathan Chen

commit sha 453a661fa1fa940e2d2e044452398e38c67a98fb

[docs] Added Newegg to trustedByLogos section (#153)

view details

push time in 2 months

PR merged GoogleChromeLabs/quicklink

Added Newegg to trustedByLogos section

Newegg.com launched Quicklink in the following pages:

  • Homepage: https://www.newegg.com
  • Best Deals: https://www.newegg.com/todays-deals
  • Black Friday Presale: https://www.newegg.com/Black-Friday-Presale/EventSaleStore/ID-1133?cm_sp=Homepage-Top2015--P1_nepro%252f19-2445--%2F%2Fpromotions.newegg.com%2Fnepro%2F19-2445%2F759x300.jpg&icid=547946

I added Newegg to the bottom of the list. But let me know if you'd like to move to a different position. Thanks!

+6 -1

1 comment

2 changed files

jonchenn

pr closed time in 2 months

push eventGoogleChromeLabs/quicklink

demianrenzulli

commit sha 468c231601e8c877634169663f4f964dd08a672e

[docs] New section "Quicklink extension" for home page. (#150) * Home section around over-prefetching. * Over-prefetching partial. * Changing carousel by content. * quicklink chrome extension sub-section.

view details

push time in 2 months

Pull request review commentGoogleChromeLabs/quicklink

New section "Quicklink extension" for home page.

+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% sectionTitle "Chrome Extension" %}+{{ "We've developed a [Chrome extension](https://chrome.google.com/webstore/detail/quicklink-chrome-extensio/epmplkdcjhgigmnjmjibilpmekhgkbeg) that injects and initializes `Quicklink` in every site you visit." | markdown | safe }}+{{ "The extension can be used with the following purposes:" | markdown | safe }}++{{ "* To navigate the web faster." | markdown | safe }}+{{ "* To estimate the potential impact of `Quicklink` on a site, before implementing it (see [impact measurement guide](/measure))." | markdown | safe }}++{{ "The extension comes with a default set of URL patterns [to ignore](https://github.com/GoogleChromeLabs/quicklink#optionsignores) (e.g. signin, logout, etc). You can add more patterns, by clicking on the extension icon, and picking 'Options' from the drop-down menu." | markdown | safe }}+{{ "The code of the extension can be found at [this repository](https://github.com/demianrenzulli/quicklink-chrome-extension). Contributions are welcomed!" | markdown | safe }}

Note for upstream repo: We might want to add a paragraph that mentions not all servers are guaranteed to handle the additional load of prefetching pages on each navigation equally. Some site owners may also have preferences around limiting the amount of prefetching extensions like this use. We could highlight the extension is mostly there to give you a preview of what Quicklink has to offer, but include gotchas for more general use across the web.

Nothing I think that needs tackling as part of this PR however . :)

demianrenzulli

comment created time in 2 months

issue commentGoogleChromeLabs/adaptive-loading

Client Hints + initial state Adaptive Loading Hooks

@anton-karlovskiy Thank you for raising this concern. Can I confirm if you are running into this issue when using the UMD version of the package as well? We recently added a bundled version that doesn't use raw ESM that could be pulled in e.g see https://unpkg.com/react-adaptive-hooks@0.0.8/dist/index.umd.js.

Are you still experiencing those issues when importing the whole package?

addyosmani

comment created time in 2 months

issue commentGoogleChrome/lighthouse

Help! DNS Failure

Could you provide more info on the URL you were auditing? A DNS_FAILURE means there was a network error likely preventing Lighthouse from being able to resolve the domain (e.g a timeout).

nazohana

comment created time in 2 months

issue commentGoogleChrome/lighthouse

Audit: Mitigate reflow / content layout shifts

Yeah. Native image lazy-loading also recommends developers specify a width and height to avoid relayout:

image

I think specifying dimensions would be useful for us to factor into either a new or existing audit.

Malvoz

comment created time in 2 months

issue commentGoogleChrome/lighthouse

Visualize user timings

Interesting. Were you thinking a visualization along the lines of what the Performance panel currently offers for User Timing entries?

image

image

connorjclark

comment created time in 2 months

pull request commentGoogleChromeLabs/quicklink

Bugfix/syntax highlighting site

Hey Anton. After retesting syntax highlighting on the current deployment it does appear to be working. I'll chalk up my previous tests to there being a caching issue of some sort :)

anton-karlovskiy

comment created time in 2 months

created tagGoogleChromeLabs/react-adaptive-hooks

tagv0.0.8

Deliver experiences best suited to a user's device and network constraints

created time in 2 months

push eventGoogleChromeLabs/react-adaptive-hooks

addyosmani

commit sha d70fb69b16a4fe87bfaca29face115359599b9e9

[infra] package bump to 0.0.8 Urgency is to address a bug breaking SSR

view details

push time in 2 months

push eventGoogleChromeLabs/react-adaptive-hooks

Anton Karlovskiy

commit sha 245c3899e72418d39add3dc0cc04173ed517b586

[core] added a conditional to check if navigator is defined (#42)

view details

push time in 2 months

PR merged GoogleChromeLabs/react-adaptive-hooks

added a conditional to check if navigator is defined

@addyosmani

When server side rendering, navigator is not defined. navigator-undefined

+2 -2

0 comment

2 changed files

anton-karlovskiy

pr closed time in 2 months

pull request commentGoogleChromeLabs/quicklink

Bugfix/syntax highlighting site

Hmm. I need to dig into this further when not on mobile, but it looks like our latest deploys are having challenges with syntax highlighting again (this fix was included).

I'll debug later in the day, but just wanted to highlight this.

https://quicklink-6a87b.firebaseapp.com/

anton-karlovskiy

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

demianrenzulli

commit sha 75aa643b557682e9c4c1547ced1bbffd59342a11

[docs] Over-prefetching section for home page (#148) * Home section around over-prefetching. * Over-prefetching partial. * Changing carousel by content.

view details

push time in 3 months

PR merged GoogleChromeLabs/quicklink

Over-prefetching section for home page

Section covering techniques to avoid over-prefetching with Quicklink.

+48 -0

1 comment

2 changed files

demianrenzulli

pr closed time in 3 months

pull request commentGoogleChromeLabs/quicklink

Over-prefetching section for home page

I think these changes strike the right balance of conveying how our latest features for limiting and controlling throttling help avoid the over-prefetching problem well.

I like that we started off with sharing how to limit prefetching to specific elements. Something I may try doing if there's time is creating a nice SVG that shows how this works.

But overall I think this will help. Going ahead and landing the change 👍

demianrenzulli

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Over-prefetching section for home page

+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% sectionTitle "Concerned about over-prefetching? We've got you covered" %}+{{ "By default `quicklink` observes all in-viewport links in `document.body`. There are different ways of telling `quicklink` to limit the number of links to prefetch." | markdown | safe }}++{{ "The most common approach is passing passing different `options` to configure prefetching when calling `quicklink.listen()`:" | markdown | safe }}++{{ "* Indicating a specific DOM element to observe, with the `options.el` parameter:" | markdown | safe }}++{% markdownConvert %}+```js+quicklink.listen({+  el: document.getElementById('carousel')

Wdyt about us using an example like document.getElementById('article') or document.getElementById('content')?

demianrenzulli

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

demianrenzulli

commit sha 2ce99e3f56abeb00b34844bce3a59eada0eeb3b3

[docs] Measuring impact of QuickLink in sites guide (#146) * Measuring impact of QuickLink in sites guide. * Measure.njk page. * Changes requested by reviewer. * Correcting name of Quicklink.

view details

push time in 3 months

PR merged GoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

New guide for Quicklink site: "Measuring impact of QuickLink in sites".

@addyosmani: A new section "Measure" has been added to the nav bar. As a result menu option appear closer to each other. Perhaps you have some better ideas on how to better accommodate this? Another option would be to move this guide as a link inside the "Approach" section instead of on its own.

+183 -1

4 comments

9 changed files

demianrenzulli

pr closed time in 3 months

pull request commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

Let's merge!

demianrenzulli

comment created time in 3 months

pull request commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

Re-opened the PR as I think it may have been accidentally closed... :)

demianrenzulli

comment created time in 3 months

PullRequestEvent

issue openedGoogleChromeLabs/adaptive-loading

Client Hints + initial state Adaptive Loading Hooks

Now that https://github.com/GoogleChromeLabs/react-adaptive-hooks support setting initial values (e.g initialEffectiveConnectionType), I think there would be value in showing how Client Hints can provide an initial value on the server and this can then be updated, if necessary, on the client-side via the JS APIs exposed in Hooks.

Stack requirement: We should build an app that uses Next.js as it has to keep SSR in mind and would be a good "stress test" this all works together.

Signal wise, I think it's fine to rely on Network and Device Memory. We would want this demo to be responsive and render cleanly on both mobile and desktop. Output should have at least a 90/100 on Lighthouse for performance.

What are we building? A clean, nice-looking TV show browser. TMDB's API provides the data to allow us to build this. It's very similar to our existing TMDB client built using CRA, except will focus on shows rather than movies. There are a few existing Next.js open-source apps we could look to for reference here.

Reference https://topheman-movie-browser.herokuapp.com/ is from this year and is open-source https://github.com/topheman/nextjs-movie-browser.

https://github.com/timneutkens/next-episode is a Next.js TV show app that might be a good fit here. It's 2 years old so likely requires an upgrade to get it working with the latest version of Next.

I really like how next-episode looks. It would be good to evaluate if it makes more sense to fork it and update or try improving the design of nextjs-movie-browser. We could also choose to write something from scratch if there are too many "extras" in either implementation.

cc @anton-karlovskiy

created time in 3 months

issue closedGoogleChromeLabs/adaptive-loading

[WIP] Microsite

Mock: image

image

Theme inspiration: https://material.io/design/

Current icon (need to figure out what we're actually going to use): https://www.iconfinder.com/icons/4272271/analytics_comparison_data_icon

  • Implement in Next.js
  • Let's have a page include a thumbnail gallery of all the demos. That is, a CSS Grid with a medium sized screenshot of each demo that you can click through to see the original. Each thumbnail cell/div should include the name of the demo in white text below the screenshot.
  • Try to fill out pages with content from our existing docs/READMEs
  • Performance-wise, it's perfectly OK for this to be mostly server-side rendered. There's very little that should require client side rendering here.
  • This page will be hosted at the root of adaptive-loading.web.dev, treated like an index page.
  • Let's leave placeholders for the images for now. I'll send images soon.
  • We should try to limit work on this to under two days. The homepage and demos area may take time to implement, but the rest will be very much copying/pasting existing markdown content.

Wdyt?

closed time in 3 months

addyosmani

pull request commentGoogleChromeLabs/quicklink

Bugfix/syntax highlighting site

Thanks!

anton-karlovskiy

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

Anton Karlovskiy

commit sha 0f644e7fa85044971e1305c7d6d59a7a5c7c24e0

[docs] Bugfix/syntax highlighting site (#147) * fixed missing space in the README codesnippet * fixed broken syntax highlighting by ordering defer scripts

view details

push time in 3 months

PR merged GoogleChromeLabs/quicklink

Bugfix/syntax highlighting site
  1. highlight.js is up-to-date (v9.16.2) so some broken syntax highlighting is fixed by upgrading the lib
  2. syntax highlighting is restored
  3. linked CDN css for syntax highlighting and removed local css file
+6 -7

0 comment

4 changed files

anton-karlovskiy

pr closed time in 3 months

pull request commentGoogleChromeLabs/react-adaptive-hooks

[infra] Avoid using .mjs extension for module version of the package

https://www.npmjs.com/package/react-adaptive-hooks 0.0.7 contains the fix for this. Thanks, folks!

midudev

comment created time in 3 months

created tagGoogleChromeLabs/react-adaptive-hooks

tagv0.0.7

Deliver experiences best suited to a user's device and network constraints

created time in 3 months

push eventGoogleChromeLabs/react-adaptive-hooks

addyosmani

commit sha 45aee683f10a9ef47b3837ae5da72a9af206269c

[infra] Bump package to 0.0.7

view details

push time in 3 months

push eventGoogleChromeLabs/react-adaptive-hooks

Miguel Ángel Durán

commit sha d06ea8a1a517da4079937648903f91aa7336d0c1

[infra] Avoid using .mjs extension for module version of the package (#41)

view details

push time in 3 months

PR merged GoogleChromeLabs/react-adaptive-hooks

[infra] Avoid using .mjs extension for module version of the package

This PR avoid using the extension .mjs for the module and fixes https://github.com/GoogleChromeLabs/react-adaptive-hooks/issues/40

It seems create-react-app doesn't have support to .mjs. As webpack 4 is using the module from the package.json this is breaking the bundle by not being able to load the library.

With this change create-react-app app usage is working again as expected.

+1 -1

1 comment

1 changed file

midudev

pr closed time in 3 months

issue closedGoogleChromeLabs/react-adaptive-hooks

mjs file extension breaking CRA

After the build scripts update, it is breaking CRA apps.

Failed to compile.

./node_modules/react-adaptive-hooks/dist/index.mjs
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)

CRA doesn't support .mjs files and requires a good amount of effort just to use that. From my understanding there is no reason that .mjs extension is needed to indicate a ESM file.

Related issues:

  • https://github.com/facebook/create-react-app/issues/4317

@midudev and @addyosmani

closed time in 3 months

stramel

pull request commentGoogleChromeLabs/react-adaptive-hooks

[infra] Avoid using .mjs extension for module version of the package

After reviewing a number of other projects using microbundle that are also using the module field, it appears we are not the only ones shifting to avoiding .mjs. I'm cool with landing this change to unblock CRA users. Will publish a new release shortly.

Thanks!

midudev

comment created time in 3 months

issue commentGoogleChromeLabs/react-adaptive-hooks

mjs file extension breaking CRA

Thank you for working on a PR pretty quickly to address this, @midudev. I'll review shortly. Appreciate you flagging the CRA breakage, @stramel!

stramel

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

+---+title: Quicklink+layout: layouts/base.njk+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.+---+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% markdownConvert %}+## Measuring impact of QuickLink in sites

Quicklink :)

demianrenzulli

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

+---+title: Quicklink+layout: layouts/base.njk+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.+---+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% markdownConvert %}+## Measuring impact of QuickLink in sites++Implementing Quicklink in sites can speed up navigations, by automatically prefetching in-viewport links during idle time.+Different metrics can be improved as a result of this, the most common ones being [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).++In this section, we explore different ways of measuring the impact of Quicklink in sites. To showcase that, we’ll use [this demo](https://mini-ecomm.glitch.me/), consisting of a listing and product page. We'll compare performance of that site with [this other version](https://mini-ecomm-quicklink.glitch.me/) that requests and initializes the library in the product listing page. You can check the head of the page, to see the following code before the closing tag:++```js+<script src="https://unpkg.com/quicklink@1.0.1/dist/quicklink.umd.js"></script>+<script> +  window.addEventListener('load', () =>{+    quicklink();+  });+</script>+```+## Using Chrome DevTools++The first tool you’ll use is [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools), which is useful both for local development, and also for production URLs.++First, measure performance before implementing Quicklink:++- Open the [unoptimized demo](https://mini-ecomm.glitch.me/) in Chrome.+- Open the **Network** panel and simulate a **Fast 3G** Connection.+- Pick **Galaxy S5** as simulated device.+- Make sure **Disable cache** is not checked.+- Reload the page.+- Click on the first product in the listing.++Take a look at the **Time** column: the product page takes approximately **2.5s** to load:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-unoptimized.png" height="400px" width="800px">++{% markdownConvert %}++Now, measure performance after implementing Quicklink:++- Open the [optimized demo](https://mini-ecomm-quicklink.glitch.me/) in Chrome.+- Open the **Network** panel and simulate a Fast 3G Connection.+- Pick **Galaxy S5** as simulated device.+- Make sure **Disable cache** is not checked.+- Reload the page.++Prefetched links can be identified in the Network panel by having Quicklink as the **Initiator** and **Lowest** as the Priority:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-optimized-1.png" height="400px" width="800px">++{% markdownConvert %}++To measure the impact of Quicklink on navigations:++- Click on a list item.+- Take a look at the **Network** panel.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-optimized-2.png" height="400px" width="800px">++{% markdownConvert %}++In the Size column of the **Network** panel the trace shows that the product page was retrieved from the **prefetch cache** and now takes **3ms** to load: a **97% improvement** compared to the unoptimized version.++## Using Webpagetest++Webpagetest can be used to measure impact on real devices and different connection types. You'll use [WPT Scripting](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting) to simulate a user arriving at the home page and clicking one of the product items.++Open to webpagetest.org.+Pick **Nexus 5** as Test Location.+In the Advanced Settings tab, pick **3GFast** in the connection type.+In the Script tab, place the following script:++```+logData 0+navigate https://mini-ecomm.glitch.me/+logData 1+execAndWait document.querySelector('a').click()+```++The script instructs WPT to open the [unoptimized demo](https://mini-ecomm.glitch.me/) and simulate a click on the first product of the listing. Metrics are captured only for the product page. Here is the [resultiing test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/).++Repeat the process on [the demo](https://mini-ecomm-quicklink.glitch.me/) that uses Quicklink. The script looks like:++```+logData 0+navigate https://mini-ecomm.glitch.me/+logData 1+execAndWait document.querySelector('a').click()+```++Here is the [resultiing test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).++The following table compares the main metrics obtained for each of the sites:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-metrics-comparison.png" height="105px" width="700px">++{% markdownConvert %}++Next, create a comparison between the tests.++- Open the [WPT test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/) for the unoptimized site.+- Click on the median run, that appears in the "First View" cell of the report.+- Repeat the same process in the [optimized test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).++To create a comparison test, you need to append the IDs from the previous links as comma separated valuees, and send them as query params to `https://www.webpagetest.org/video/compare.php`:++```+https://www.webpagetest.org/video/compare.php?tests=test_id_1,test_id_2+```++The resulting comparison of the test ran previously can be found [here](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual).++### Visual Comparison++The unoptimized site starts rendering approximately at **2.5s**, the demo that uses Quicklink, starts at **1.2s**.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-visual-comparison.png" height="430px" width="820px">++{% markdownConvert %}++### Video++A video can be generated from the [comparison page](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual), by clicking on **Create Video**.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-video-comparison.gif" height="435px" width="600px">++{% markdownConvert %}++### Using RUM (Real user monitoring) tools++RUM tools, let you visualize how different metrics evolve in time for real users. If prefetching affects a large amount of pages, you might be able to see more page loads being loaded faster after implementing it, which can be reflected in metrics First Contentful Paint.+For example, the [Chrome User Experience Report](https://developers.google.com/web/tools/chrome-user-experience-report/) provides user experience metrics for how real-world Chrome users experience popular destinations on the web.+CrUX data is available in [PageSpeedInsights](https://developers.google.com/speed/pagespeed/insights/) and also in [BigQuery](https://bigquery.cloud.google.com/dataset/chrome-ux-report:all?pli=1), but you can obtain a quick visualization of the evolution of your metrics using the CrUX dashboard [here](https://g.co/chromeuxdash). [This guide](https://web.dev/chrome-ux-report-data-studio-dashboard/) explains the process in detail.

Can we change this to PageSpeed Insights?

demianrenzulli

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

+---+title: Quicklink+layout: layouts/base.njk+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.+---+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% markdownConvert %}+## Measuring impact of QuickLink in sites++Implementing Quicklink in sites can speed up navigations, by automatically prefetching in-viewport links during idle time.+Different metrics can be improved as a result of this, the most common ones being [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).++In this section, we explore different ways of measuring the impact of Quicklink in sites. To showcase that, we’ll use [this demo](https://mini-ecomm.glitch.me/), consisting of a listing and product page. We'll compare performance of that site with [this other version](https://mini-ecomm-quicklink.glitch.me/) that requests and initializes the library in the product listing page. You can check the head of the page, to see the following code before the closing tag:++```js+<script src="https://unpkg.com/quicklink@1.0.1/dist/quicklink.umd.js"></script>+<script> +  window.addEventListener('load', () =>{+    quicklink();+  });+</script>+```+## Using Chrome DevTools++The first tool you’ll use is [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools), which is useful both for local development, and also for production URLs.++First, measure performance before implementing Quicklink:++- Open the [unoptimized demo](https://mini-ecomm.glitch.me/) in Chrome.+- Open the **Network** panel and simulate a **Fast 3G** Connection.+- Pick **Galaxy S5** as simulated device.+- Make sure **Disable cache** is not checked.+- Reload the page.+- Click on the first product in the listing.++Take a look at the **Time** column: the product page takes approximately **2.5s** to load:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-unoptimized.png" height="400px" width="800px">++{% markdownConvert %}++Now, measure performance after implementing Quicklink:++- Open the [optimized demo](https://mini-ecomm-quicklink.glitch.me/) in Chrome.+- Open the **Network** panel and simulate a Fast 3G Connection.+- Pick **Galaxy S5** as simulated device.+- Make sure **Disable cache** is not checked.+- Reload the page.++Prefetched links can be identified in the Network panel by having Quicklink as the **Initiator** and **Lowest** as the Priority:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-optimized-1.png" height="400px" width="800px">++{% markdownConvert %}++To measure the impact of Quicklink on navigations:++- Click on a list item.+- Take a look at the **Network** panel.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/devtools-optimized-2.png" height="400px" width="800px">++{% markdownConvert %}++In the Size column of the **Network** panel the trace shows that the product page was retrieved from the **prefetch cache** and now takes **3ms** to load: a **97% improvement** compared to the unoptimized version.++## Using Webpagetest++Webpagetest can be used to measure impact on real devices and different connection types. You'll use [WPT Scripting](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/scripting) to simulate a user arriving at the home page and clicking one of the product items.++Open to webpagetest.org.+Pick **Nexus 5** as Test Location.+In the Advanced Settings tab, pick **3GFast** in the connection type.+In the Script tab, place the following script:++```+logData 0+navigate https://mini-ecomm.glitch.me/+logData 1+execAndWait document.querySelector('a').click()+```++The script instructs WPT to open the [unoptimized demo](https://mini-ecomm.glitch.me/) and simulate a click on the first product of the listing. Metrics are captured only for the product page. Here is the [resultiing test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/).++Repeat the process on [the demo](https://mini-ecomm-quicklink.glitch.me/) that uses Quicklink. The script looks like:++```+logData 0+navigate https://mini-ecomm.glitch.me/+logData 1+execAndWait document.querySelector('a').click()+```++Here is the [resultiing test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).++The following table compares the main metrics obtained for each of the sites:++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-metrics-comparison.png" height="105px" width="700px">++{% markdownConvert %}++Next, create a comparison between the tests.++- Open the [WPT test](https://www.webpagetest.org/result/191103_TM_e68d81788d8744762301b44c6e3e72d2/) for the unoptimized site.+- Click on the median run, that appears in the "First View" cell of the report.+- Repeat the same process in the [optimized test](https://www.webpagetest.org/result/191103_E3_f8217e45ad837ac084868d4f3b9a4a73/).++To create a comparison test, you need to append the IDs from the previous links as comma separated valuees, and send them as query params to `https://www.webpagetest.org/video/compare.php`:++```+https://www.webpagetest.org/video/compare.php?tests=test_id_1,test_id_2+```++The resulting comparison of the test ran previously can be found [here](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual).++### Visual Comparison++The unoptimized site starts rendering approximately at **2.5s**, the demo that uses Quicklink, starts at **1.2s**.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-visual-comparison.png" height="430px" width="820px">++{% markdownConvert %}++### Video++A video can be generated from the [comparison page](https://www.webpagetest.org/video/compare.php?tests=191103_TM_e68d81788d8744762301b44c6e3e72d2-r%3A8-c%3A0%2C191103_E3_f8217e45ad837ac084868d4f3b9a4a73-r%3A7-c%3A0&thumbSize=200&ival=500&end=visual), by clicking on **Create Video**.++{% endmarkdownConvert %}++<img class="article-image" src="/assets/images/screenshots/wpt-video-comparison.gif" height="435px" width="600px">++{% markdownConvert %}++### Using RUM (Real user monitoring) tools++RUM tools, let you visualize how different metrics evolve in time for real users. If prefetching affects a large amount of pages, you might be able to see more page loads being loaded faster after implementing it, which can be reflected in metrics First Contentful Paint.

This is currently a long paragraph... :) Could we split this into 2-3 paragraphs to break it up just a little for readability?

demianrenzulli

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

+---+title: Quicklink+layout: layouts/base.njk+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.+---+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% markdownConvert %}+## Measuring impact of QuickLink in sites++Implementing Quicklink in sites can speed up navigations, by automatically prefetching in-viewport links during idle time.+Different metrics can be improved as a result of this, the most common ones being [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).++In this section, we explore different ways of measuring the impact of Quicklink in sites. To showcase that, we’ll use [this demo](https://mini-ecomm.glitch.me/), consisting of a listing and product page. We'll compare performance of that site with [this other version](https://mini-ecomm-quicklink.glitch.me/) that requests and initializes the library in the product listing page. You can check the head of the page, to see the following code before the closing tag:++```js+<script src="https://unpkg.com/quicklink@1.0.1/dist/quicklink.umd.js"></script>

Would you like to use https://unpkg.com/quicklink@latest/dist/quicklink.umd.js here as it's a guide and should be okay to point to the latest version?

demianrenzulli

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

Measuring impact of QuickLink in sites guide

+---+title: Quicklink+layout: layouts/base.njk+description: Faster subsequent page-loads by prefetching in-viewport links during idle time.+---+{% extends "layouts/normal-section-wrapper.njk" %}+{% block section %}+{% markdownConvert %}+## Measuring impact of QuickLink in sites++Implementing Quicklink in sites can speed up navigations, by automatically prefetching in-viewport links during idle time.+Different metrics can be improved as a result of this, the most common ones being [Start Render](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/quick-start-quide#TOC-Start-Render:) and [First Contentful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).++In this section, we explore different ways of measuring the impact of Quicklink in sites. To showcase that, we’ll use [this demo](https://mini-ecomm.glitch.me/), consisting of a listing and product page. We'll compare performance of that site with [this other version](https://mini-ecomm-quicklink.glitch.me/) that requests and initializes the library in the product listing page. You can check the head of the page, to see the following code before the closing tag:

Could we expand this demo to link a link to the demo as well as a source link on Glitch for folks that want to fork it or view source?

demianrenzulli

comment created time in 3 months

push eventGoogleChromeLabs/adaptive-loading

Anton Karlovskiy

commit sha 6cae44c79589d0807374ee13e7960fc80eb5af1a

Bugfix/refinement (#101) * removed hardcoded hooks and installed react-adaptive-loading package * updated deployed URL in READMEs for cna-memory-considerate-animation * added Glitch source links to cna-memory-considerate-animation README * updated README * implemented ssr cache for microsite * cleaned up functions * removed cacheableResponse package * implemented ssr cache for microsite * updated cna-memory-considerate-animation for back to list -> top positioning

view details

push time in 3 months

PR merged GoogleChromeLabs/adaptive-loading

Bugfix/refinement

@addyosmani

This is finalization for now. SSR cache is implemented on Microsite server side.

+271 -62

1 comment

12 changed files

anton-karlovskiy

pr closed time in 3 months

Pull request review commentGoogleChromeLabs/react-adaptive-hooks

add mediaCapabilities hook

 const { deviceMemory } = useMemoryStatus(initialMemoryStatus);  ### Media Capabilities -`useMediaCapabilities` utility for adapting based on the user's device media capabilities+`useMediaCapabilities` utility for adapting based on the user's device media capabilities.++**Use case:** useful for checking if we can play a certain media asset. For example, Safari does not support WebM so we want to fallback to mp4 but if Safari does support WebM it will automatically load WebM videos.  ```js import React from 'react';  import { useMediaCapabilities } from 'react-adaptive-hooks/media-capabilities'; -const MyComponent = ({ mediaConfig }) => {-  const { mediaCapabilities } = useMediaCapabilities(mediaConfig);+const webmMediaConfig = {+  type : 'file', // 'record', 'transmission', or 'media-source'+  video : {+    contentType : 'video/webm;codecs=vp8', // valid content type+    width : 800,     // width of the video+    height : 600,    // height of the video+    bitrate : 10000, // number of bits used to encode 1s of video+    framerate : 30   // number of frames making up that 1s.+  }+};++const initialDecodingInfo = { showWarning: true }++const MyComponent = ({ videoSources }) => {+  const { mediaCapabilities } = useMediaCapabilities(webmMediaConfig, initialDecodingInfo);    return (     <div>-      { mediaCapabilities.supported ? <video muted controls>...</video> : <img src='...' /> }+      {+        mediaCapabilities.supported+          ? <video src={videoSources.webm} controls>...</video>+          : <video src={videoSources.mp4}  controls>...</video>+      }+      {+        mediaCapabilities.showWarning &&+          <div>+            Defaulted to mp4.+            Couldn't test webm support, either the media capabilities api is unavailable or no media configuration was given.+          </div>+      }     </div>

I think this example is much more compelling 👍

wingleung

comment created time in 3 months

Pull request review commentGoogleChromeLabs/react-adaptive-hooks

Enhancement/adding network availability check

 describe('useNetworkStatus', () => {     expect(result.current.effectiveConnectionType).toEqual('4g');   }); +  test('should update the effectiveConnectionType state when network get disabled', () => {+    global.navigator.connection = {+      ...ectStatusListeners,+      effectiveType: '2g'+    };++    const { result } = renderHook(() => useNetworkStatus());+    global.navigator.connection.effectiveType = 'network-unavailable';

This is the first time I've encountered network-unavailable and wasn't aware it was supported. Is it possible to learn where this value came from? :)

sanjaymahto

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

addyosmani

commit sha 03d3c971a54d984f514790ce82f08731ac6159fc

[docs] Add notes on double-keyed caching

view details

addyosmani

commit sha a34773e6401ffa61063470611438da4cdd9cab22

Merge branch 'master' of https://github.com/GoogleChromeLabs/quicklink * 'master' of https://github.com/GoogleChromeLabs/quicklink: Updates to initial site (#144)

view details

push time in 3 months

issue commentGoogleChromeLabs/quicklink

Quicklink site - Logo not displayed correctly in FF 70

Good catch! I saw this after we landed the site PR and pushes some fixes to the SVG. Is the latest deploy fixed for you?

image

demianrenzulli

comment created time in 3 months

delete branch GoogleChromeLabs/quicklink

delete branch : initial_site

delete time in 3 months

push eventGoogleChromeLabs/quicklink

Addy Osmani

commit sha 3f796f6a93430762370f85ad8cdfa54689a45739

Updates to initial site (#144) * Add firebase caching rules * add native lazy-loading for images * Add preloads and async CSS optimizations * Fix SVG logo - typography needed flattening * Fix Firefox rendering issue for main logo

view details

push time in 3 months

PR opened GoogleChromeLabs/quicklink

Updates to initial site
+149 -54

0 comment

10 changed files

pr created time in 3 months

pull request commentGoogleChromeLabs/quicklink

[WIP] Quicklink site

Thanks!

addyosmani

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

addyosmani

commit sha c4d48f89a64d264a38b057a058151d04dc9f8b96

Fix SVG logo - typography needed flattening

view details

addyosmani

commit sha a57fb0659c26fc1bcf792f26183a8ed2371bb653

Fix Firefox rendering issue for main logo

view details

push time in 3 months

push eventGoogleChromeLabs/quicklink

addyosmani

commit sha 8bac9cf8cdf6c0e509f0769d73d5f1b84f272aea

Add firebase caching rules

view details

addyosmani

commit sha e1630888991eeccff171750c845b43b8057c2217

add native lazy-loading for images

view details

addyosmani

commit sha 30354afce60c408d32755e0025f5329523c26e0a

Add preloads and async CSS optimizations

view details

push time in 3 months

pull request commentGoogleChromeLabs/quicklink

[WIP] Quicklink site

@demianrenzulli PR updated. I've also refreshed the docs and site to use Quicklink 2.0.0 alpha as I noticed it was still based on 1.0.1.

addyosmani

comment created time in 3 months

Pull request review commentGoogleChromeLabs/quicklink

[WIP] Quicklink site

 <!doctype html> <html lang="en">-  {% include "layouts/head.njk" %}-  <body>-    {% include "layouts/header.njk" %}-    <main class="page-main markdown-body">-      {{ content | safe }}-      {% include "layouts/footer.njk" %}-      <div class="back-to-top hidden">&uarr;</div>-    </main>-    <script type="text/javascript" src="{{ '/script.js' | url }}" defer></script>-    <script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/{{ site.quicklinkVersion }}/quicklink.umd.js"></script>-    <script>-      window.addEventListener('load', () => {-        quicklink();-      });-    </script>-    <script async defer src="https://buttons.github.io/buttons.js"></script>-    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>-  </body>-</html>+{% include "layouts/head.njk" %}++<body>+  {% include "layouts/header.njk" %}+  <main class="page-main markdown-body">+    {{ content | safe }}+    {% include "layouts/footer.njk" %}+    <div class="back-to-top hidden">&uarr;</div>+  </main>+  <script type="text/javascript" src="{{ '/script.js' | url }}" defer></script>+  <script src="https://cdnjs.cloudflare.com/ajax/libs/quicklink/{{ site.quicklinkVersion }}/quicklink.umd.js"></script>+  <script>+    window.addEventListener('load', () => {+      quicklink.listen();+    });+  </script>+  <script async defer src="https://buttons.github.io/buttons.js"></script>+  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>+  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>+  <!-- Global site tag (gtag.js) - Google Analytics -->+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-153597376-1"></script>+  <script>+    window.dataLayer = window.dataLayer || [];+    function gtag() { dataLayer.push(arguments); }+    gtag('js', new Date());++    gtag('config', 'UA-153597376-1');

Here's GA, @demianrenzulli :)

addyosmani

comment created time in 3 months

push eventGoogleChromeLabs/quicklink

addyosmani

commit sha 89ab8660aa66d7d392b3e18a54b9749c66385cb3

[infra] Add firebase deployment

view details

addyosmani

commit sha 74d322453ac3ffb6761819e3615ccece5e7cf71d

Add twitter metadata

view details

addyosmani

commit sha 7c7c917da9509b7823fd60b69a56761bd04ed21d

Add support for Quicklink 2.0.0-alpha

view details

push time in 3 months

pull request commentGoogleChromeLabs/quicklink

[WIP] Quicklink site

The site looks great. Thanks for instructions notes to the README on how to build and run. Tested it and works fine 👍

I'm glad you like the current state of the site. Team effort! We also now have a domain :) https://getquick.link 😄

Also, LH score is 93! With the only recommendation of "Preconnect to required origins" for https://api.github.com/, which doesn't seem to be really necessary.

Yeah, I don't think we're relying on that end-point for anything super critical path. I'll take a look at whether it's worth pre-connecting to the origin just in case.

HTML vs markdown: While index.njk consists mostly of HTML code, the rest of the sections have been written almost completely in markdown language ({% markdownConvert %}). I guess this is because markdown worked just fine for sections like /api, /approach and /demo, which have been extracted from github README.md, but it was fairly limited for the home page, which uses it only in certain areas.

Usage of partials: Do you think that contributors should follow the pattern of creating a partial for every component in the page applied in index.njk, or you have applied this style here because you think this page has mostly components that can be reused more frequently somewhere else?

I think it's fine for contributors to follow the pattern of a new partial for each component (...where it makes sense) to keep things as isolated and modular as possible. I'm picturing as the site grows that we will make use of a lot more re-usage than we do at present.

HTML vs markdown: While index.njk consists mostly of HTML code, the rest of the sections have been written almost completely in markdown language ({% markdownConvert %}). I guess this is because markdown worked just fine for sections like /api, /approach and /demo, which have been extracted from github README.md, but it was fairly limited for the home page, which uses it only in certain areas.

Yes, this is correct. At some point I would love for us to be able to easily just pull in markdown content from the repo for the site, without there being duplication between it and the README. For now, I would say the index.njk containing mostly HTML code while we try to shift towards just relying on markdown elsewhere should be okay.

Nav bar: The current nav bar is handy and looks nice, but I'm wondering how it will scale as new sections are added to the site. Perhaps leaving the current main categories as they are, and adding a side menu in the left inside each section might work? See in this jquery site example: https://api.jquery.com/.

So, funny story... :) We did originally have a proper sidebar but decided to move away from it once we realized we didn't have enough menu items to popular it on mobile. I think it wouldn't be a lot of work to bring this back in when it is needed. So, +1 to the idea.

Analytics: Haven't seen any analytics script. Perhaps not necessary... Wondering there's any kind of information you might find interesting to track? Usefulness of docs, for example? Not really critical for this initial release.

This is a good catch. I think we should at least add in GA. Having stats on how often folks visit the docs site vs just the repo would help us determine how much effort to put into the site when time is tight. I'll add a commit incorporating GA :)

addyosmani

comment created time in 3 months

issue closedGoogleChromeLabs/adaptive-loading

[Microsite] Deployment

As the microsite project is coming along well so far, I would like for us to explore deploying it to http://adaptive-loading.web.app/ as the root/main page on the domain. This would allow us to get a better idea of how the implementation performs on production and consider if any further performance optimizations are needed on the server-side.

cc @anton-karlovskiy

closed time in 3 months

addyosmani

issue commentGoogleChromeLabs/adaptive-loading

[Microsite] Deployment

This sounds great to me. Thank you for working on the latest revisions. The site is looking great.

addyosmani

comment created time in 3 months

more