profile
viewpoint
Houssein Djirdeh housseindjirdeh https://houssein.me Will always be a beginner

GoogleChrome/lighthouse 20442

Automated auditing, performance metrics, and best practices for the web.

gitpoint/git-point 4434

GitHub in your pocket :iphone:

housseindjirdeh/angular2-hn 1289

:boom: Progressive Hacker News client built with Angular

GoogleChromeLabs/progressive-tooling 491

A list of community-built, third-party tools that can be used to improve page performance

GoogleChrome/lighthouse-stack-packs 135

Lighthouse Stack Packs

GoogleChromeLabs/perf-track 93

Tracking framework performance and usage at scale

GoogleChromeLabs/go-hackernews 82

A Hacker News client written in Go

housseindjirdeh/angular2-redux-contact-list 60

:clipboard: Contact list built with Angular 2, Immutable.js and Redux

GoogleChromeLabs/tour-of-thrones 7

A Game of Thrones app built with Angular

MemberEvent

starteddevelopit/microbundle

started time in 16 days

issue openedvercel/next.js

Next.js-hydration performance measure is under-counting actual hydration time

Bug report

Describe the bug

Next.js-hydration performance measure is under-counting actual hydration time

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Go to https://www.fairprice.com.sg/
  2. Open Chrome DevTools --> Performance
  3. Measure hydration and look for the Next.js-hydration performance measure
  4. Notice how the performance measure is shorter than the actual hydrate period

Screen Shot 2020-07-22 at 2 51 40 PM

Additional context

I'll take a look into this and fix it :)

created time in 18 days

issue commentvercel/next.js

Ability to opt-out of `web-vitals` package that's currently bundled with Next.js

Although it's tiny, I agree it's an additional cost if you're not using it to measure metrics at all.

I wouldn't mind if we keep it included by default and have a flag to opt-out. @timneutkens do you agree?

dmitrizzle

comment created time in 18 days

push eventGoogleChrome/lighthouse-stack-packs

Tobias Zulauf

commit sha 80f21531e54fd7a36d4cc2a9028f78b6172b7829

Update joomla.js

view details

Houssein Djirdeh

commit sha 597a861ed0ca2f276e9e8c04e1de0b58d2253d71

Merge pull request #46 from zero-24/patch-1 [Joomla] Make sure we mention the Joomla 4 lazy load plugin.

view details

push time in a month

PR merged GoogleChrome/lighthouse-stack-packs

[Joomla] Make sure we mention the Joomla 4 lazy load plugin.

The joomla 4.x core sets the loading attribute native. In some cases (old content) it might be nessesary to enable that plugin from the core so lets mention it here.

+1 -1

3 comments

1 changed file

zero-24

pr closed time in a month

pull request commentGoogleChromeLabs/perf-track

fixed style issue #16

Thanks for this @PraveenPal4232!

There's the small issue of larger screen sizes, where an "auto" height doesn't fill out the page:

Screen Shot 2020-07-13 at 1 58 26 PM

We may have to use a combination of min-height: 100% and then ensure the inner containers + grid items fit the size of the screen.

PraveenPal4232

comment created time in a month

Pull request review commentGoogleChrome/web.dev

Updates to native lazy-loading guide

 Images that are defined using the `<picture>` element can also be lazy-loaded:  Although a browser will decide which image to load from any of the `<source>` elements, the `loading` attribute only needs to be included to the fallback `<img>` element.+ +## Avoid lazy-loading images that are in the first visible viewport  -### iframe loading+You should avoid setting `loading=lazy` for any images that are in the first visible viewport. -The `loading` attribute affects iframes differently than images, depending on whether the iframe is-hidden. (Hidden iframes are often used for analytics or communication purposes.) Chrome uses the-following criteria to determine whether an iframe is hidden:+It is recommended to only add `loading=lazy` to images which are positioned below the fold, if possible. Images that are eagerly loaded can be fetched right away, while images which are loaded lazily the browser currently needs to wait until it knows where the image is positioned on the page, which relies on the IntersectionObserver to be available.  -- The iframe's width and height are 4 px or smaller.-- `display: none` or `visibility: hidden` is applied.-- The iframe is placed off-screen using negative X or Y positioning.+{% Aside %}+  In Chromium, the impact of images in the initial viewport being marked with `loading=lazy` on Largest Contentful Paint is fairly small, with a regression of <1% at the 75th and 99th percentiles compared to eagerly loaded images.+{% endAside %} -If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in-most cases. Iframes that _aren't_ hidden will only load when they're within the [load-in distance threshold](#load-in-distance-threshold).-A placeholder shows for lazy-loaded iframes that are still being fetched.+Generally, any images within the viewport should be loaded eagerly using the browser's defaults. You do not need to specify `loading=eager` for this to be the case for in-viewport images.+ +```html+<!-- visible in the viewport -->+<img src="product-1.jpg" alt="..." width="200" height="200">+<img src="product-2.jpg" alt="..." width="200" height="200">+<img src="product-3.jpg" alt="..." width="200" height="200">+ +<!-- offscreen images -->+<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">+<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">+<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">+```++## Graceful degredation ++Browsers that do not yet support the `loading` attribute will ignore its presence. While these browsers will of course not get the benefits of lazy-loading, including the attribute has no negative impact on them.  ## FAQ -### Are there plans to expand this feature?+### Are there plans to automatically lazy-load images in Chrome? -There are plans to change the default lazy-loading behavior of the browser to automatically-lazy-load any images or iframes that are well suited to being deferred if [Lite-mode](https://blog.chromium.org/2019/04/data-saver-is-now-lite-mode.html) is enabled on Chrome for-Android.+Chromium already automatically+lazy-load any images that are well suited to being deferred if [Lite
lazy-loads any images that are well suited to being deferred if [Lite
addyosmani

comment created time in a month

Pull request review commentGoogleChrome/web.dev

Updates to native lazy-loading guide

 the meantime, you will need to override the effective connection type of the bro `chrome://flags/#force-effective-connection-type` flag. {% endAside %} -### Image loading -To prevent the surrounding content from reflowing when a lazy-loaded image is downloaded, make sure-to add `height` and `width` attributes to the `<img>` element or specify their values directly in an-inline style:+### Images should include dimension attributes++While the browser loads an image, it does not immediately know the image's dimensions, unless these are explicitly specified. To enable the browser to reserve sufficient space on a page for images, it is recommended that all `<img>` tags include both `width` and `height` attributes. Without dimensions specified, [layout shifts](/cls) can occur, which are more noticeable on pages that take some time to load.  ```html-<img src="…" loading="lazy" alt="…" width="200" height="200">-<img src="…" loading="lazy" alt="…" style="height:200px; width:200px;">-<!-- lazy-loaded -->+<img src="image.png" loading="lazy" alt="…" width="200" height="200"> ``` -Images will still lazy-load if dimensions are not included, but [specifying them decreases the chance of-browser reflow](https://www.youtube.com/watch?v=4-d_SoCHeWE).+Alternatively, specify their values directly in an inline style:++```html+<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">+```++The best practice of setting dimensions applies to `<img>` tags regardless of whether or not they are being loaded lazily. With lazy-loading, this can become more relevant. Setting `width` and `height` on images in modern browsers also allows browsers to infer their instrinsic size.++Images will still lazy-load if dimensions are not included, but [specifying them decreases the chance of layout shift](https://www.youtube.com/watch?v=4-d_SoCHeWE). If you are unable to include dimensions for your images, lazy-loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift. ++While native lazy-loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, it should be kept in mind, there is a slightly greater chance of them not being loaded yet. In this case, case missing `width` and `height` attributes on such images increase their impact on Cumulative Layout Shift.
While native lazy-loading in Chromium is implemented in a way such that images are likely to be loaded once they are visible, it should be kept in mind, there is a slightly greater chance of them not being loaded yet. In this case, missing `width` and `height` attributes on such images increase their impact on Cumulative Layout Shift.
addyosmani

comment created time in a month

PR opened johnmichel/Library-Detector-for-Chrome

Adds new cra detection

Per @developit's suggestion of checking for CRA's specific <noscript> text and a React root.

This is probably the easiest way to detect CRA without fetching for certain files!

+23 -1

0 comment

3 changed files

pr created time in a month

issue commentGoogleChromeLabs/perf-track

Show aggregate perf score

Having aggregated LH performance scores (across percentiles p50, p75 and p95 too) would be a great addition, and should be possible to get through HTTP Archive crawls!

I think this will be a great addition, thanks for suggesting 🙏

myspivey

comment created time in a month

issue commentGoogleChromeLabs/perf-track

Framework pages style issue

Thanks for logging this @PraveenPal4232 :)

So this should have been resolved by #, but I most probably fiddled around with the container heights after that causing it to overflow on certain screens 😅

PraveenPal4232

comment created time in a month

issue commentGoogleChromeLabs/perf-track

Show the framework name on hover of logos

That would be awesome @pajaydev, thank you!

It could be something like this:

ezgif com-video-to-gif

Or it could look very much like the tooltip already used for the metric charts (can copy/reuse the same styles but just make it dark and center it for example):

Screen Shot 2020-07-10 at 11 10 29 AM

Open to ideas too!

pajaydev

comment created time in a month

issue openedGoogleChromeLabs/perf-track

Show a list of URLs for each query analysis

It would be nice to allow anyone to click and see a list of all URLs for each part of the dashboard. For example: X% of Framework Y sites compress with Brotli --> Click somewhere and get a list of them.

Not sure what the easiest way this could be done. Linking to separate Google Sheets is one way, but that might get unwieldy 🤔

created time in a month

issue closedGoogleChromeLabs/perf-track

TODO: before launch

  • [X] Use latest results from HTTP Archive/CrUX
  • [X] Include more Web Vital metrics and surface them better
    • [X] Largest Contenful Paint
    • [X] Cumulative Layout Shift
    • [X] First Input Delay
  • [X] Clean things up
    • [X] Improve design/clean up styles
    • [X] Update README
    • [X] Make mobile responsive
  • [X] Add analytics

Nice to haves:

  • [ ] Use BigQuery API to fetch data instead of local JSON files
  • [ ] Add a few more technologies:
    • [ ] Lit
    • [X] Ember
    • [X] Preact
    • [X] AMP
  • [ ] Compare SSR versus CSR sites for any of the frameworks
    • (different toggles to switch between SSR/CSR)
  • [ ] Include CMSs (Shopify, Magento, WordPress, etc...)
  • [ ] Switch to a lighter charting lib
  • [ ] Versioning support

closed time in a month

housseindjirdeh

issue commentGoogleChromeLabs/perf-track

Show the framework name on hover of logos

Great idea, a small tooltip could work :)

pajaydev

comment created time in a month

pull request commentjohnmichel/Library-Detector-for-Chrome

Removes CRA detection

Thanks @developit! I've been staying away from only using their specific noscript tag but if we couple that with a React root I think that could be pretty fool-proof to a degree :)

@johnmichel What do you think? If you're okay with it, I'll put up a PR and bump to a new major version!

housseindjirdeh

comment created time in a month

push eventjohnmichel/Library-Detector-for-Chrome

Jason Miller

commit sha e7e5260d9ceb6a546b024ac053f2d91fdb94cc48

Improve preact detection performance

view details

Houssein Djirdeh

commit sha 3cc75ca845c1bc2ddea278655dd831bc138e8178

Merge pull request #173 from developit/patch-6 Improve preact detection performance

view details

push time in a month

PR merged johnmichel/Library-Detector-for-Chrome

Improve preact detection performance

The fast path test for Preact wasn't detecting Preact X, which most sites are now using. This adds it, reports the version correctly, and hopefully avoids hitting the slow path in most cases.

+2 -1

0 comment

1 changed file

developit

pr closed time in a month

push eventjohnmichel/Library-Detector-for-Chrome

Benni Mack

commit sha 4960702ff4b2018b01b51936dba999960236ab3a

[FEATURE] Add TYPO3 CMS as a library

view details

Benni Mack

commit sha aba43a81015cc61cd5076a4c163fbd3b780988fb

Update library/libraries.js Co-authored-by: Houssein Djirdeh <houssein.djirdeh@gmail.com>

view details

Houssein Djirdeh

commit sha 482d241022881ebd2d1360ae357c467db371f5f3

Merge pull request #171 from bmack/master Add detection for TYPO3

view details

push time in a month

PR merged johnmichel/Library-Detector-for-Chrome

Add detection for TYPO3

TYPO3 is a PHP-based open-source content management system. This change adds a detection for this system.

+22 -0

1 comment

3 changed files

bmack

pr closed time in a month

issue commentGoogleChromeLabs/perf-track

Comparison for websites that don't use a JS framework

Great idea :)

So there's two potential options here:

  1. Add a section for all sites (entire dataset)
  2. Add a section for all sites that don't use a specific list of frameworks

Do you have a particular preference? Sounds like you're leaning towards number 2 and so am I. We wouldn't be able to objectively say no framework however, but at least provide data on all sites that don't use any of the most popular (React, Angular, Vue, Ember, AMP, Polymer)

Nooshu

comment created time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 08fbb41b653114745919acc71bbec1542b3ac19d

fix dataset references

view details

push time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 9949e6bbe1bdc30dd4fcb78d88b027b385fc9f98

fix analytics + minor style updates

view details

push time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha a88400df3caf999b3c973d8c9462832f3d7e5867

fix analytics + minor style updates

view details

push time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 04307ea3c80e32fc0b2aff6c1a5882fa9d5fa9da

fix analytics + minor style updates

view details

push time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 448b33243a2ec3aa303fd64580f44fa64e551cdd

remove images from gitignore

view details

housseindjirdeh

commit sha 4962e848408d42b0b4e13adfb9b7a022206eaf5e

remove nonexistent analytics file script

view details

housseindjirdeh

commit sha 5e9d7fce2afe35a6c42e08b6700220ce1001774c

compress images

view details

push time in a month

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 0f06c38256dcd5eb9c42c6bfb33bee33bd2edf2f

adds april dataset, other changes

view details

housseindjirdeh

commit sha 69eb1cf4ce797eb6d529b6e94f98ab83729db68e

a lil salt and pepper

view details

Houssein Djirdeh

commit sha c7da1c3c5d1302280fb6b0ac6d1c224387836d81

Merge pull request #10 from GoogleChromeLabs/final-updates Final updates

view details

push time in a month

PR merged GoogleChromeLabs/perf-track

Final updates

Finishing touches

+1207 -678

0 comment

39 changed files

housseindjirdeh

pr closed time in a month

PR opened GoogleChromeLabs/perf-track

Final updates

Finishing touches

+1207 -678

0 comment

39 changed files

pr created time in a month

create barnchGoogleChromeLabs/perf-track

branch : final-updates

created branch time in a month

push eventGoogleChromeLabs/perf-track

Rick Viscomi

commit sha f9ce65627eb3bb4e8be5d3a600c62882e362f76d

Fix layout issue The natural height of the container could be larger than 100% of the viewport height, causing it to overflow and overlap with the footer text. This change allows the container to grow to its natural height if needed, and push the footer below it to avoid the overlap.

view details

Houssein Djirdeh

commit sha c16b2d7cc18a2495c36d11668f1607116b382594

Merge pull request #7 from rviscomi/patch-1 Fix layout issue

view details

push time in a month

PR merged GoogleChromeLabs/perf-track

Fix layout issue

The natural height of the container could be larger than 100% of the viewport height, causing it to overflow and overlap with the footer text. This change allows the container to grow to its natural height if needed, and push the footer below it to avoid the overlap.

Before:

image

After:

image

I'm not familiar with svelte though so some other building seems necessary to push this change to each individual tool-specific CSS.

+1 -1

0 comment

1 changed file

rviscomi

pr closed time in a month

startedjohnstew/differential-serving

started time in a month

startedmgechev/is-esm

started time in a month

startedGoogleChromeLabs/tooling.report

started time in a month

issue commentHTTPArchive/almanac.httparchive.org

JavaScript 2020

I can definitely help review this chapter!

Some amazing people in community that I'd like to nominate (only if they're interested in writing for the 2020 Web Almanac of course):

  • @tkadlec
  • @benschwarz
  • @thefoxis
  • @denar90
  • @ahmadawais
  • @jadjoubran
obto

comment created time in a month

issue closedhousseindjirdeh/angular2-hn

Recognize what user style the browser prefers

https://developers.google.com/web/updates/2019/07/nic76#dark-mode Standard is now made available in nearly all major browsers.

closed time in a month

ghost

push eventhousseindjirdeh/angular2-hn

dependabot[bot]

commit sha f6cc578d66c6fa7997f6ef46c7ed4488a85002d8

Bump websocket-extensions from 0.1.3 to 0.1.4 (#85) Bumps [websocket-extensions](https://github.com/faye/websocket-extensions-node) from 0.1.3 to 0.1.4. - [Release notes](https://github.com/faye/websocket-extensions-node/releases) - [Changelog](https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md) - [Commits](https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

view details

push time in a month

PR merged housseindjirdeh/angular2-hn

Bump websocket-extensions from 0.1.3 to 0.1.4 dependencies

Bumps websocket-extensions from 0.1.3 to 0.1.4. <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/faye/websocket-extensions-node/blob/master/CHANGELOG.md">websocket-extensions's changelog</a>.</em></p> <blockquote> <h3>0.1.4 / 2020-06-02</h3> <ul> <li>Remove a ReDoS vulnerability in the header parser (CVE-2020-7662, reported by Robert McLaughlin)</li> <li>Change license from MIT to Apache 2.0</li> </ul> </blockquote> </details> <details> <summary>Commits</summary> <ul> <li><a href="https://github.com/faye/websocket-extensions-node/commit/8efd0cd6e35faf9bb9cb08759be1e27082177d43"><code>8efd0cd</code></a> Bump version to 0.1.4</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/3dad4ad44a8c5f74d4f8f4efd3f9d6e0b5df3051"><code>3dad4ad</code></a> Remove ReDoS vulnerability in the Sec-WebSocket-Extensions header parser</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/4a76c75efb1c5d6a2f60550e9501757458d19533"><code>4a76c75</code></a> Add Node versions 13 and 14 on Travis</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/44a677a9c0631daed0b0f4a4b68c095b624183b8"><code>44a677a</code></a> Formatting change: {...} should have spaces inside the braces</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/f6c50aba0c20ff45b0f87cea33babec1217ec3f5"><code>f6c50ab</code></a> Let npm reformat package.json</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/2d211f3705d52d9efb4f01daf5a253adf828592e"><code>2d211f3</code></a> Change markdown formatting of docs.</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/0b620834cc1e1f2eace1d55ab17f71d90d88271d"><code>0b62083</code></a> Update Travis target versions.</li> <li><a href="https://github.com/faye/websocket-extensions-node/commit/729a4653073fa8dd020561113513bfa2e2119415"><code>729a465</code></a> Switch license to Apache 2.0.</li> <li>See full diff in <a href="https://github.com/faye/websocket-extensions-node/compare/0.1.3...0.1.4">compare view</a></li> </ul> </details> <br />

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


<details> <summary>Dependabot commands and options</summary> <br />

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
  • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
  • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
  • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

</details>

+3 -3

0 comment

1 changed file

dependabot[bot]

pr closed time in a month

push eventhousseindjirdeh/Library-Detector-for-Chrome

housseindjirdeh

commit sha b00d63a011c9401b5e4f51f5558625fc67fc5de0

removes img and README reference

view details

push time in a month

PR opened johnmichel/Library-Detector-for-Chrome

Reviewers
Removes CRA detection

Since there's no easy way to detect Create React App on a page, this implementation requested for an asset-manifest.json file that would break auth flows in some sites (e.g. Bitbucket)

Until we find a viable solution, it's probably safest to remove entirely 😞

+0 -30

0 comment

1 changed file

pr created time in a month

push eventjohnmichel/Library-Detector-for-Chrome

housseindjirdeh

commit sha 170e9704ee52ef4bc2bc64f98febdf6f4acc27f0

update vue detection

view details

push time in a month

Pull request review commentjohnmichel/Library-Detector-for-Chrome

Add detection for TYPO3

 var d41d8cd98f00b204e9800998ecf8427e_LibraryDetectorTests = {                 return { version };             } +            return false;+        }+    },+    'TYPO3': {+        id: 'typo3',+        icon: 'typo3',+        url: 'https://typo3.org/',+        npm: null,+        test: function (win) {+            const generatorMeta = document.querySelector('meta[name="generator"][content^="TYPO3"]');++            // TYPO3 resource patterns / paths - search in link, style or script tags+            const resourcesTYPO3 = /\/(typo3conf|typo3temp|fileadmin)/;+            const res = Array.from(document.querySelectorAll('link,style,script') || []);++            if (generatorMeta || res.some(s => resourcesTYPO3.test(s.src)) || res.some(s => resourcesTYPO3.test(s.href))) {+		// No version exposure available in TYPO3 due to information disclosure+                return { UNKNOWN_VERSION };
                return { version: UNKNOWN_VERSION };
bmack

comment created time in a month

pull request commentjohnmichel/Library-Detector-for-Chrome

Handle non-successful asset-manifest requests

@johnmichel Thanks a million for digging in.

I think the safest option would be to remove it entirely until we figure out a way to make it work. I used the method of requesting for asset-manifest.json since there's no specific signatures that can be used to detect usage of CRA. If I had known it would affect authentication on some sites, I wouldn't have merged it in 😅

Thanks again, I'll think of better ways to detect it, but I'll put up a PR soon to remove it for now.

johnmichel

comment created time in 2 months

push eventGoogleChrome/web.dev

housseindjirdeh

commit sha e4136423ef9514f5d314bab582b67d2aace73d14

adds reviewers

view details

push time in 2 months

pull request commentGoogleChrome/web.dev

Updates serve modern code to include bugfixes property

@developit Definitely sounds better now, thanks for updating :)

housseindjirdeh

comment created time in 2 months

push eventGoogleChrome/web.dev

housseindjirdeh

commit sha ec2f2c61dbd2ff61865fdd35b1d555edcb029ca2

removes redundant line

view details

push time in 2 months

push eventGoogleChrome/web.dev

Houssein Djirdeh

commit sha d1440a2c2af7f54d21e70b586d9c1c04ea9d12d0

Update src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md Co-authored-by: Jason Miller <developit@users.noreply.github.com>

view details

push time in 2 months

push eventGoogleChrome/web.dev

Houssein Djirdeh

commit sha 6146182ef8e58fb8e2d169a7fff9cd330d4a5d64

Update src/site/content/en/fast/serve-modern-code-to-modern-browsers/index.md Co-authored-by: Jason Miller <developit@users.noreply.github.com>

view details

push time in 2 months

pull request commentGoogleChrome/web.dev

Update optimize fid

CC @anniesullie

housseindjirdeh

comment created time in 2 months

PR opened GoogleChrome/web.dev

Reviewers
Update optimize fid

Changes proposed in this pull request:

Note: It may look like a lot of text was changed, but it's mostly sections being re-arranged. Going through each of the commits will show the changes easier.

+86 -114

0 comment

1 changed file

pr created time in 2 months

push eventGoogleChrome/web.dev

housseindjirdeh

commit sha 5b92448994961c4b835cbf5c9f3dc2f79d7aef71

moves reduce javascript section to end of article

view details

housseindjirdeh

commit sha be999f877e26f6da591b6929a41b5e6396987911

removes minify and compress section

view details

housseindjirdeh

commit sha 4899692558e0f571e105bb24cde066cd7bf70813

slight change to reduce javascript execution section

view details

housseindjirdeh

commit sha d3b1c1397fe59f6a69936934b5d024745628487d

updates reviewers

view details

push time in 2 months

create barnchGoogleChrome/web.dev

branch : update-optimize-fid

created branch time in 2 months

push eventGoogleChrome/web.dev

housseindjirdeh

commit sha fc2c4514c1c97ed67356efde6cd9273cf4f21502

updates serve modern code to include bugfixes property

view details

push time in 2 months

PR opened GoogleChrome/web.dev

Reviewers
Updates serve modern code to include bugfixes property

Changes proposed in this pull request:

  • Adds a section on using bugfixes property with @babel/preset-env

CC @connorjclark @developit

+30 -9

0 comment

1 changed file

pr created time in 2 months

create barnchGoogleChrome/web.dev

branch : update-serve-modern-code

created branch time in 2 months

pull request commentjohnmichel/Library-Detector-for-Chrome

Handle non-successful asset-manifest requests

@johnmichel This would still show a 404 if I'm not mistaken? Did you happen to test if it fixes the issue of logging in to BitBucket?

johnmichel

comment created time in 2 months

push eventjohnmichel/Library-Detector-for-Chrome

John Michel

commit sha d0973aae463b4dbc8446b96a086ee1df9ea28079

Handle non-successful asset-manifest requests Closes #158, #164

view details

Houssein Djirdeh

commit sha ae864a55e60c69702fc3930ab293bfcfecceb499

Merge pull request #170 from johnmichel/guard-cra-detection Handle non-successful asset-manifest requests

view details

push time in 2 months

issue closedjohnmichel/Library-Detector-for-Chrome

asset-manifest.json

Every page loaded in Chrome with this extension enabled is now showing a 404'd request on /asset-manifest.json.

Attached is a screenshot from this very page.

This may be related - I'm no longer to login to Atlassian sites (via id.atlassian.com) unless this extension is disabled.

image

closed time in 2 months

mavickers

pull request commentjohnmichel/Library-Detector-for-Chrome

Handle non-successful asset-manifest requests

Thanks @johnmichel ❤️

johnmichel

comment created time in 2 months

issue commentangular/angular

feat(DomRenderer): allow partial DOM hydration from pre-rendered content

Hi folks 👋🏾.

Dropping some updates here (I work with the Chrome team):

  • As Minko mentioned, you can track the progress of the work here. A CL has already been merged to include a new experimental version of LCP that handles removed elements (there's still more work to be done).
  • Next steps would involve getting approvals before landing and updating the current implementation of LCP in Chrome's metrics pipeline as well as the web performance API, which can take some time.

This issue was prioritized after noticing it affects server-rendered sites that re-render DOM on the client, so thanks to all of you for flagging!

jeffbcross

comment created time in 2 months

startedredwoodjs/redwood

started time in 2 months

pull request commentfacebook/create-react-app

Add performance relayer + documentation (web-vitals)

Awesome thanks all! So happy to see this land :)

housseindjirdeh

comment created time in 2 months

push eventGoogleChrome/web.dev

housseindjirdeh

commit sha 539f84acce577916c115eaccc386b0d3dbef9a36

includes a mention of minsize value and points to full config

view details

push time in 2 months

PR opened GoogleChrome/web.dev

Reviewers
[Update] Mention `minsize` value and point to full config in granular chunking article

Changes proposed in this pull request:

  • Mention minsize value and point to full config in granular chunking article

CC @spanicker

+2 -0

0 comment

1 changed file

pr created time in 2 months

create barnchGoogleChrome/web.dev

branch : update-granular-chunking

created branch time in 2 months

Pull request review commentfacebook/create-react-app

Adds performance relayer + documentation (web-vitals)

+const reportWebVitals = (onPerfEntry) => {

Oops, added :)

housseindjirdeh

comment created time in 2 months

push eventhousseindjirdeh/create-react-app

housseindjirdeh

commit sha b812d970d10b539598e821a4c17035924c64090a

adds web-vitals to typescript template

view details

push time in 2 months

push eventhousseindjirdeh/create-react-app

housseindjirdeh

commit sha 94224160185cc87baddfde120e0999fcbd3c4910

adds web-vitals to typescript template

view details

push time in 2 months

Pull request review commentfacebook/create-react-app

Adds performance relayer + documentation (web-vitals)

     "terser-webpack-plugin": "3.0.2",     "ts-pnp": "1.2.0",     "url-loader": "4.1.0",+    "web-vitals": "^0.2.2",

Thanks @ianschmitz, moved it to template.json for both templates (default and typescript).

I also had to add it as a dev dependency in the root package.json (otherwise it wouldn't work locally). I hope I'm not doing something wrong here?

housseindjirdeh

comment created time in 2 months

Pull request review commentfacebook/create-react-app

Adds performance relayer + documentation (web-vitals)

 ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister();++// If you want to start measuring performance in your app, pass a function+// to log results (for example: reportWebVitals(console.log))+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals+reportWebVitals();

It does :))

Lib is dynamically imported only if a function gets passed in

housseindjirdeh

comment created time in 2 months

push eventhousseindjirdeh/create-react-app

housseindjirdeh

commit sha c8a84ba6e12538aa82d00ab7ff55e749d506855a

moves web-vitals lib to template dependency

view details

push time in 2 months

Pull request review commentfacebook/create-react-app

Adds performance relayer + documentation (web-vitals)

 ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister();++// If you want to start measuring performance in your app, pass a function+// to log results (for example: reportWebVitals(console.log))+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals+reportWebVitals();

@iansu also would it be possible to create a cra.link for the docs page?

housseindjirdeh

comment created time in 2 months

Pull request review commentfacebook/create-react-app

Adds performance relayer + documentation (web-vitals)

 ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister();++// If you want to start measuring performance in your app, pass a function+// to log results (for example: reportWebVitals(console.log))+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals+reportWebVitals();

Would it be better to not include the function (and import) in the template and show how to add in the docs instead?

housseindjirdeh

comment created time in 2 months

push eventhousseindjirdeh/create-react-app

housseindjirdeh

commit sha de2187d47bc67466a84d79845c32b4eb3812536c

removes console log and fixes typo

view details

push time in 2 months

PR opened facebook/create-react-app

Reviewers
Adds performance relayer + documentation (web-vitals)

Fixes #8996

Changes included:

  • Dynamically imports the web-vitals lib
  • Includes a reportWebVitals function to index.js template (doesn't do anything until a function is passed in)
    • Note: Would it be better to not include the function and import at all and just show how to add in the docs?
  • Adds a "Measuring Performance" page to the documentation
+86 -0

0 comment

5 changed files

pr created time in 2 months

create barnchhousseindjirdeh/create-react-app

branch : add-performance-relayer

created branch time in 2 months

pull request commentGoogleChrome/web.dev

Minor fixes to "Optimize LCP" and "Optimize FID" articles

Sorry for the confusion. The version number in Yoav's article is correct.

Created a new PR for this.

housseindjirdeh

comment created time in 2 months

PR opened GoogleChrome/web.dev

Reviewers
Fixes Chrome version mention content update

<!-- Add the DO NOT MERGE label if you don't want the web.dev team to merge this PR immediately after approving it. -->

Fixes #3046

+1 -1

0 comment

1 changed file

pr created time in 2 months

create barnchGoogleChrome/web.dev

branch : fix-chrome-version

created branch time in 2 months

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha d3eeea625b016274c33e92840dfeda7cb56930b6

updates about page

view details

push time in 2 months

issue commentjohnmichel/Library-Detector-for-Chrome

False detection of Ember on GMail and Google Docs

Thanks for logging this! Just removed the fast path check 👍

deenamo

comment created time in 2 months

issue closedjohnmichel/Library-Detector-for-Chrome

False detection of Ember on GMail and Google Docs

Google apps have multiple obfuscated keys in the global window scope: image

Among them happens to be window.Em, which leads to falsely detecting "Ember.js (Fast path)" on GMail and Google Docs: image

closed time in 2 months

deenamo

push eventjohnmichel/Library-Detector-for-Chrome

housseindjirdeh

commit sha 169b894d2e80b9e643773297623132827b76f4c3

removes ember fast path check

view details

Houssein Djirdeh

commit sha a05e979a453099cbfde45e8086997aae3d625c9e

Merge pull request #169 from housseindjirdeh/fix-ember Removes ember fast path check

view details

push time in 2 months

PR merged johnmichel/Library-Detector-for-Chrome

Removes ember fast path check

Fixes #168

False positives when GUID_KEY is not included to check and window. Em is relied on

+0 -14

0 comment

1 changed file

housseindjirdeh

pr closed time in 2 months

PR opened johnmichel/Library-Detector-for-Chrome

Removes ember fast path check

False positives when GUID_KEY is not included to check and window. Em is relied on

+0 -14

0 comment

1 changed file

pr created time in 2 months

create barnchhousseindjirdeh/Library-Detector-for-Chrome

branch : fix-ember

created branch time in 2 months

push eventjohnmichel/Library-Detector-for-Chrome

housseindjirdeh

commit sha dc142450e79f13be6bef2152affe9b7d1bac3cb8

adds lit element

view details

Houssein Djirdeh

commit sha 32e02a5b9a2115a646c56bfadbef23e56f9461f5

Merge pull request #167 from housseindjirdeh/add-lit-element Adds lit element

view details

push time in 2 months

issue commentGoogleChromeLabs/perf-track

TODO: before launch

@developit Analyzing usage and performance without jQuery has been widely requested, so it's definitely useful.

Added an issue :) #9

housseindjirdeh

comment created time in 2 months

issue openedGoogleChromeLabs/perf-track

Add "without" sections to each framework view

In addition to including additional web frameworks ("React with Next.js", "Vue with Nuxt.js", etc...), it would be great to have the opposite for some popular variations.

jQuery and Bootstrap are two good places to start. So for example:

  • React without jQuery
  • React without Boostrap

And the same for Angular, Vue and so forth.

created time in 2 months

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 6f19dce61946fdb0000c531fb083c6941f941fd6

adds page view events

view details

push time in 2 months

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 16a61a797389354a318c7caca41be403729b3f98

adds analytics + more

view details

push time in 2 months

push eventGoogleChromeLabs/perf-track

housseindjirdeh

commit sha 6814b31f6a5f19c4809d19f91d12365854d02253

minor update

view details

push time in 2 months

issue closedGoogleChromeLabs/perf-track

Pie chart doesn't reflect listed percentages for "compressed requests"

Example page: https://perf-track.web.app/react

See attached screenshot: The listing for Not compressed is 11.6%. The pie chart segment proportions don't match. This appears to be because the underlying percent for the "Not compressed" value is inflated. Screen Shot 2020-05-29 at 10 12 01

closed time in 2 months

rudygalfi
more