addyosmani

const puppeteer = require('puppeteer');

const Good3G = {
  'offline': false,
  'downloadThroughput': 1.5 * 1024 * 1024 / 8,
  'uploadThroughput': 750 * 1024 / 8,
  'latency': 40
};

const phone = puppeteer.KnownDevices['Nexus 5X'];

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

bytemain

<button id="cake">Take Screeny</button>

<br />

<canvas id="fake"></canvas>

alekseykulikov

In this article, I would like to share three features of PageSpeed Insights (PSI), that is not easy to find in the official documentation. I discovered them while hacking on the Lighthouse plugin and integrating PSI to Treo.sh.

For a context, PSI is a simple yet powerful API by Google, that audits your page using Lighthouse and provides real-world users' data from Chrome UX Report (CrUX).

1. Audit many categories with one request

By default, PSI API returns only performance category. It's possible to pass ?category argument multiple times and get a report with many Lighthouse categories using one request (available categories: performance, accessibility, best-practices, seo, pwa).

curl -i "https://www.googleapis.com/pagespe

LukasBombach

Partial Hydration

If you do server side rendering (SSR) you don't necessarily need to hydrate your entire page if most of your content ist static and only some parts are interactive / dynamic. That is especially true for a newspaper website, which ich what we are working on.

What you want is partial hydration, sometimes called or related to progressive hydration or lazy hydration.

There are a few implementations out there to achive this, for instance second-dehydrator

sindresorhus

'use strict';

const puppeteer = require('puppeteer');

(async () => {
    /* PRECONDITION:
    0. download ublock, I used https://github.com/gorhill/uBlock/releases/download/1.14.19b5/uBlock0.chromium.zip
    1. run $PATH_TO_CHROME --user-data-dir=/some/empty/directory --load-extension=/location/of/ublock
    2. enable block lists you want to use
    */

smikula

let JSONStream = require('jsonstream');
let fs = require('fs');
let es = require('event-stream');

function readStatsJson(path) {
    return new Promise((resolve, reject) => {
        let parsedObject = {};

        let stream = fs
            .createReadStream(path, { encoding: 'utf8' })

mohanpedala

Table of Contents

• set -e, -u, -x, -o pipefail
• set -e
• set -x
• set -u
• set -o pipefail
• Setting IFS
• Original Reference

set -e, -u, -x, -o pipefail

samarpanda

Performance matters

1. https://speedcurve.com/blog/
2. https://calendar.perfplanet.com/2017/an-audit-of-boomerangs-performance/
3. Time to interactive - Measuring more of the user experience - https://calendar.perfplanet.com/2017/time-to-interactive-measuring-more-of-the-user-experience/
4. PERCEPTION MATTERS: MAKING RUM MORE REAL - https://blogs.akamai.com/2018/04/perception-matters-measure-perceived-performance.html
5. Web performance made easy - https://developers.google.com/web/updates/2018/08/web-performance-made-easy
6. Url not working - https://developer.akamai.com/blog/2017/04/12/gauge-user-experience-time-interactive/
7. Github containing most suggestions around perf - https://github.com/fabkrum/web-performance-resources
8. Frontend performance checklist - https://github.com/thedaviddias/Front-End-Performance-Checklist

jeroenvisser101

export const setCookies = async (page, cookies) => {
  const items = cookies
    .map(cookie => {
      const item = Object.assign({}, cookie);
      if (!item.value) item.value = "";
      console.assert(!item.url, `Cookies must have a URL defined`);
      console.assert(
        item.url !== "about:blank",
        `Blank page can not have cookie "${item.name}"`
      );