marklreyes / perfbudgetbuilder

Web tool which evaluates a web page with PageSpeed Insights API.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Performance Budget Builder

This easy-to-use tool allows you to scan a URL and view the size of the assets that make up your webpage.

You can then set a size budget for your page, plugging in sizes for each asset category that will load on the page. The tool will adjust each category’s width accordingly and yell at you if you exceed your budget.

Dependencies

Usage

You will need to specify a Google API key for Pagespeed Insights API. Once generated, place that into JS file, pageSpeedService.js

var API_KEY = 'YOURAPIKEYGOES HERE';

Build out pageSpeedService.js by navigating to the root directory of this project and running gulp on the command line

$ gulp

The application is invoked purely through JavaScript and leverages a callback via JSONP, hence no server-side code.

Technology Stack

View Demo

View Demo

Credits

Brad Frost for the original prototype.

About

Web tool which evaluates a web page with PageSpeed Insights API.


Languages

Language:JavaScript 53.0%Language:HTML 32.3%Language:CSS 14.6%