https://github.com/iyjhabc/first-meaningful-paint

Retrieve first meaningful paint which raised by google. Monitor first screen time in your web page easily
https://github.com/iyjhabc/first-meaningful-paint

first-meaningful-paint first-screen-time fmp front-end javascript lighthouse monitor performance

Last synced: 9 days ago
JSON representation

Retrieve first meaningful paint which raised by google. Monitor first screen time in your web page easily

• Host: GitHub
• URL: https://github.com/iyjhabc/first-meaningful-paint
• Owner: iyjhabc
• Created: 2018-01-04T09:14:12.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-19T14:11:03.000Z (over 6 years ago)
• Last Synced: 2024-11-01T08:50:24.291Z (16 days ago)
• Topics: first-meaningful-paint, first-screen-time, fmp, front-end, javascript, lighthouse, monitor, performance
• Language: JavaScript
• Homepage:
• Size: 9.77 KB
• Stars: 26
• Watchers: 1
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
First-Meaningful-Paint

=======

First-meaningful-paint is a tiny package to get first meaningful paint time at the web page effectively.

What is first meaningful paint?

---------------------------------------------------

First Meaningful Paint is the time when page's primary content appeared on the screen. This is going to be our primary metric for user-perceived loading experience.

This concept was raised by Google, [see this](https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view?hl=zh-cn). However, google has not yet implement first meaningful paint in performance api for some reason.

What we do

-------------------

Google has not yet implement first meaningful paint in performance api for some reason. But we found first meaningful paint is a good way to estimate the first srceen time in our page, which is critical for user experience. We want to monitor user's real first srceen time in production environment. So First-Meaningful-Paint can help you to retrieve this value in a easy way, no matter what structure your web is, React, Jquery or any other.

Install

-------------------

``` bash

npm install first-meaningful-paint

```

Usage

-------------------

``` js

import FMP from 'first-meaningful-paint';

FMP.getFmp(3000).then((fmp) => {

    // do sth with fmp, which is a millisecond value

});

```

parameter of getFmp is the time to stop observing changes in the page, defualt is 3000 milliseconds. It shoud be bigger than the biggest loading time of your page. 

License

-------------------

MIT