Displaying 1 to 6 from 6 results

Perfume.js - Web performance library for measuring all User-centric performance metrics

  •    Typescript

Perfume is a JavaScript library for measuring Short and Long Script, First Contentful Paint (FCP), Time to Interactive (TTI), Component First Paint (CFM), annotating them to the DevTools timeline and reporting the results to Google Analytics.When a user navigates to a web page, they're typically looking for visual feedback to reassure them that everything is going to work as expected. Page Speed is a feature, and to deliver it we need to understand the many factors and fundamental limitations that are at play. If we can measure it, we can improve it.

cls-mongoose - Continuation local storage mongoose shimmer

  •    Javascript

Don't use CLS. It sucks. As I gave it up, this module may not work for the recent mongoose due to changes in it's internals.




gatsby-plugin-vercel - Track Core Web Vitals in Gatsby projects with Vercel Analytics.

  •    Javascript

This plugin sends Core Web Vitals to Vercel Analytics. This plugin is configured by default on Vercel. You do not need to install it manually. For more information, read this post.

layout-shift-terminator

  •    HTML

This tool aims to reduce cumulative layout shift (CLS) for markup that lacks intrinsic sizing (and thus has visual instability). This issue is most often seen with social media embeds. In contrast with an image, iframe, or video which can (and should) be added with width and height attributes that correspond to the actual width and height of the content, this is often impossible for social media embeds with textual content that will have a variable height, especially considering the various screen sizes of the devices viewing the content. Given a series of viewport dimensions for popular device form factors (e.g. mobile, tablet, desktop), this tool loads the markup into an iframe sized for each viewport. It waits for the page to load and then measures the size of the rendered markup for each viewport. Once these viewport-specific markup measurements are obtained, it then generates CSS media queries and container queries with the appropriate min-height for each viewport width. The original markup is wrapped with a div which includes this CSS as an inline style along with a script that will remove the style after a 4-second delay. This 4-second delay is intended to give the markup time to load before removing the min-height styles, which would not be needed anymore once the embed is loaded.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.