Light

googlechromelabs / jscost.org Goto Github PK

View Code? Open in Web Editor NEW

102.0 10.0 14.0 14.42 MB

JSCost.org - a JavaScript cost visualizer 💸

Home Page: https://jscost.org

License: Apache License 2.0

HTML 6.86% JavaScript 44.77% Vue 41.18% CSS 7.19%

performance javascript-tools mobile mobile-web parse compile devtools

jscost.org's Introduction

JSCost - JavaScript Performance Estimator sample

This repository contains the complete sample code for the JSCost Performance Estimator sample. This shows how to use WebPageTest.org and the Chrome DevTools Timeline to estimate the performance of JavaScript on different mobile devices.

Contributing changes

See CONTRIBUTING.md

Build Setup

Requires Node.js 6+

cd app

# install dependencies
npm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production (including Service Worker generation)
npm run build

# lint sources
npm run lint

Licensing

See LICENSE

jscost.org's People

Contributors

Stargazers

Watchers

Forkers

alexxnica kryndex manrueda opportunitylivetv sanjoyk michaelhood isabella232 qpc-database

jscost.org's Issues

PWA: Add support for Service Worker caching

Either use https://www.npmjs.com/package/sw-precache-webpack-plugin in Webpack or https://github.com/GoogleChrome/sw-precache from npm scripts.

PWA: Add Web App manifest

Use http://realfavicongenerator.net/
Icon: https://github.com/GoogleChrome/jscost.org/blob/vjs/media/jscost-logo-1x.png

Add stats from JDDalton on MS devices (Surface, his desktop)

TODO. Should take 5m.

Documentation on using a custom trace

This is a really cool project! I think it will bring attention to the real cost JS has to the end user.

Would be good to get some instructions on how one could use their own trace with this. I tried uploading traces generated from DevTools, Chrome Tracing, Lighthouse, WebPageTest but no luck so far.

Evaluate whether any more devices should be pulled from analytics

We have 200+ devices in there. Anything else worth including? Should the device-test page be integrated somehow to get even more stats?

Failing CI

CI builds fail

See https://travis-ci.org/GoogleChromeLabs/jscost.org/builds/359490020

PWA: Validate score using Lighthouse

Aim for at least a 90+.

Investigate improving performance

We're interactive in about 5.5-6s atm https://www.webpagetest.org/video/compare.php?tests=170427_80_cf5615014847b5d933363cb99ef6ea3e-r:1-c:0

Already using code-splitting. I'll investigate if we can get any further with preloading critical chunks or golfing down things that aren't needed.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.