- Google Fundamentals: Performance
- RAIL Model
- Measuring the Performance Metrics that Most Affect User Experience
- Time to Interactive (TTI) Polyfill
- First Input Delay (FID) helper
- Staying off the Rocks: Using Lighthouse to Build Seaworthy Progressive Web Apps (Google I/O '17) (video)
- Speed Curve: User Timing and Custom Metrics
const observer = new PerformanceObserver((entries) => {
entries.getEntries().forEach((entry) => {
const longTask = {
startTime: entry.startTime,
duration: entry.duration,
attribution: JSON.stringify(entry.attribution)
};
sendToAnalytics('Long Task', longTask);
});
});
observer.observe({entryTypes: ['longtask']});const observer = new PerformanceObserver((entries) => {
entries.getEntries().forEach((entry) => {
// name will be 'first-paint' or 'first-contentful-paint'
const name = entry.name;
const paintTiming = {
name: name,
startTime: entry.startTime,
duration: entry.duration
};
sendToAnalytics('Paint', paintTiming);
});
});
observer.observe({entryTypes: ['paint']});More information on the Polyfill
import ttiPolyfill from './path/to/tti-polyfill.js';
ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => {
sendToAnalytics('TTI', { value: tti });
});More information on the Script
// add the minified script from https://github.com/GoogleChromeLabs/first-input-delay into the <head>
perfMetrics.onFirstInputDelay(function(delay, evt) {
sendToAnalytics('first-input-delay', { value: Math.round(delay) });
});const someButton = document.getElementById('some-button');
someButton.addEventListener('click', (event) => {
// handle click event here
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
sendToAnalytics('input-latency', {
elem: '#some-button',
value: lag
});
}
});