Git Product home page Git Product logo

ruxt's Introduction

Real User Experience Test (rUXt)

A tool to visualize the Real User Monitoring (RUM) data for 3,237,526 websites from Google Chrome users under various device and connection types.

How to use rUXt

  • Go to https://ruxt.dexecure.com.
  • Select a website using the autocomplete.
  • (Optional) select a device and connection type.
  • Use the time slider to select the user wait time.

How to interprate the results

Assume 1000 website visitors. You can think of the actual number of visitors scaled down proportionately to 1000.

  • loading human : no content loaded
  • fcp human : some content loaded
  • onload human : document loaded

Metrics

How to install rUXt

We use Next.js for the frontend.

  • npm install to install all dependencies.
  • npm run dev to run locally.

Contributing

Send a PR to the develop branch of the repo. The master branch tracks the version actually deployed on https://ruxt.dexecure.com/

Learn more

ruxt's People

Contributors

dependabot[bot] avatar hadeel36 avatar inian avatar ratulsaha avatar sarya-alsayed avatar staabm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

ruxt's Issues

Expose ECT for sites

HI,

Not sure if this should be in front-end or back-end (guess it should technically be in both), but one of the things I've used CrUX data for, which I'd like to see this expose, is effective connection type.

  1. What percentage of users are on (effective) 3G connections? I find that most people assume "my users are in the US and Europe -- everybody is on 4G" though that's obviously not true and CrUX data can provide a sense of how untrue that is. I've used this query before:
  SELECT
 origin,
 form_factor.name as form_factor,
 effective_connection_type.name as ect,
 SUM((
   SELECT
     SUM(bin.density)
   FROM
     UNNEST(first_contentful_paint.histogram.bin) bin
   WHERE origin IN ('https://www.bmwusa.com', 'https://www.infinitiusa.com', 'http://www.lincoln.com'))) AS density
FROM
 `google.com:chrome-ux-report-test.chrome_ux_report.20171018_preview_origin`
 group by form_factor, origin, ect
 HAVING density > 0 

Better Search Results

For sites with lots of TLDs and subdomains the autocomplete search widget can be misleading. Where's chevrolet.com and footlocker.com?

image
image

You need to search for www.chevrolet.com and www.footlocker.com. But there are some situations where you won't be able to find your result. E.g., domain.com and lots of subdomain.domain.com's.

Suggestions:

  1. Order by # of datapoints (density)... if that data is there (DESC)
  2. Order by length of domain

small CSS issue

Please check out the media query, it should be 100% width for mobile width.

image

render version of the app on the website

as a contributor we dont know when you do deployements. therefore it would be cool if in the footer of https://ruxt.dexecure.com/ would be mentioned a git commit hash (or version, in case you do proper tags/releases) so people know which of the contributed changes are already part of the website, and which are not.

Feature: Add several Urls and compare them

would be great if one could define several page urls and the diagram/numbers below will turn into a compare view.

This could even make sense to compare 3,4 or 5 pages at once.

Recommend Projects

  • React photo React

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

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

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

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

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

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.