• Stars
    star
    899
  • Rank 49,111 (Top 1.0 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Benchmark the web performance and accessibility of sites over time.

speedlify

After you make a fast web site, keep it fast by measuring it over time. Read Use Speedlify to Continuously Measure Site Performance. Created by @zachleat.

  • Requires Node 12+
  • Each file in _data/sites/*.js is a category and contains a list of sites for comparison.

Run locally

After cloning you’ll probably want to delete the initial _data/sites/*.js files and create your own file with a list of your own site URLs!

npm install
npm run test-pages
npm run start

Related

Deploy to Netlify

Can run directly on Netlify (including your tests) and will save the results to a Netlify build cache (via Netlify Build Plugins, see plugins/keep-data-cache/).

After cloning you’ll probably want to delete the initial _data/sites/*.js files and create your own file with a list of your own site URLs!

Speedlify will also save your data to /results.zip so that you can download later. Though this has proved to be unnecessary so far, it does serve as a fallback backup mechanism in case the Netlify cache is lost. Just look up your previous build URL and download the data to restore.

Netlify Status

Known Limitations

  • If you change a URL to remove a redirect (to remove or add a www., moved domains, etc), you probably want to delete the old URL’s data otherwise you’ll have two entries in the results list.
  • When running on Netlify, a single category has a max limit on the number of sites it can test, upper bound on how many tests it can complete in the 15 minute Netlify build limit.
  • The same URL cannot be listed in two different categories (yet).

Pay for something better

Speedlify is intended as a stepping stone to more robust performance monitoring solutions like:

More Repositories

1

web-font-loading-recipes

A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/
HTML
1,056
star
2

BigText

jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.
JavaScript
888
star
3

fontfaceonload

A simple utility to execute a callback when a webfont loads.
JavaScript
373
star
4

table-saw

A small web component for responsive <table> elements.
HTML
299
star
5

details-utils

A suite of utilities to add more features to the <details> element.
JavaScript
248
star
6

browser-window

Used in demos as a way to fake a Safari-esque web browser window.
JavaScript
240
star
7

Humane-Dates

Show the difference between a date and now (4 days ago)
JavaScript
186
star
8

zachleat.com

zachleat.com is powered by Eleventy and WebC.
JavaScript
180
star
9

carouscroll

Add next/previous buttons to a horizontal scrollable container.
HTML
105
star
10

performance-leaderboard

A plugin to run Lighthouse against a set of urls to see which site is the fastest.
JavaScript
96
star
11

postcss-foft-classes

A postcss plugin to automatically add classes for various font loading strategies.
JavaScript
89
star
12

seven-minute-tabs

A minimal no-theme Tabs web component.
JavaScript
84
star
13

filter-container

Filtering visible child elements based on form field values.
HTML
80
star
14

video-radio-star

A lightweight web component helper for HTML5 videos.
HTML
72
star
15

font-family-reunion

Compatibility tables for default local fonts.
HTML
66
star
16

spider-pig

Get a list of local URL links from a root URL.
JavaScript
65
star
17

snow-fall

A web component to add snow to your web site (or to an element on your web site).
JavaScript
65
star
18

announcement-banner

An announcement banner web component.
HTML
48
star
19

speedlify-score

A web component that shows Lighthouse scores via Speedlify.
JavaScript
40
star
20

jQuery-Gravatar

Retrieve a gravatar image dynamically from any e-mail address.
JavaScript
37
star
21

squirminal

The squirminal is a fake antique terminal web component
HTML
34
star
22

hypercard

Web component to add a three-dimensional hover effect to a card.
JavaScript
33
star
23

bench-framework-markdown

A set of scripts to test markdown processing speeds in various site generators/frameworks
TypeScript
33
star
24

queue-code

Allows you to “type” syntax highlighted source code for presentations and screencasts.
JavaScript
30
star
25

infinity-burger

A new kind of hamburger menu
JavaScript
29
star
26

performance-leaderboard-pagespeed-insights

A plugin to run Lighthouse on Pagespeed Insights against a set of urls to see which site is the fastest.
JavaScript
27
star
27

esm-import-transformer

Change import URLs in JavaScript code using import maps. e.g. `import * from "before"` to `import * from "after"`
JavaScript
24
star
28

idea-book

A public dump of ideas for side projects, for public upvoting/downvoting/commenting.
24
star
29

selecthor

A better way to test, learn, and demo CSS selectors
HTML
24
star
30

JavaScript-Code-Katas

Let's practice our JavaScript testing.
JavaScript
23
star
31

f2em.com

A Front End Engineer's Manifesto
JavaScript
22
star
32

github-issue-to-json-file

Convert a well formed GitHub Issue Form populated Markdown body into a JSON data file in the repository.
JavaScript
21
star
33

avatar-local-cache

Saves a image URL for an avatar to the local file system (and optimizes the image).
JavaScript
21
star
34

performance-sometime

Improving the web font rendering of the default Wordpress theme.
JavaScript
20
star
35

this-website-is-a-tech-talk

HTML
20
star
36

educational-sensational-inspirational-foundational

A website dedicated to a history of foundational web development blog posts.
CSS
19
star
37

pagefind-search

A web component to search with Pagefind.
JavaScript
19
star
38

webcare-webshare

JavaScript
18
star
39

artificial-chart

An SVG charting library based on D3.js
JavaScript
15
star
40

gruntlerplate

A default grunt configuration for new projects.
JavaScript
13
star
41

throbber

A loading indicator overlay for images (and maybe other things later).
JavaScript
13
star
42

ToolOrDie

A presentation on Web Developer Workflow.
HTML
12
star
43

ALARMd

Web based alarm clock
JavaScript
12
star
44

font-stats

Generates useful information about a font from a font file.
JavaScript
10
star
45

node-retrieve-globals

Execute a string of JavaScript using Node.js and return the global variable values and functions.
JavaScript
10
star
46

w3c-banners

A non-image based non-normative proposal for conformance of W3C status banners.
HTML
9
star
47

rainglow

A demo for 11tymeetup.dev
Nunjucks
9
star
48

parity-purchasing-power-price

Web Component to show Parity Purchasing Power prices.
JavaScript
9
star
49

css-tricks-font-loading

A case study of the font loading for css-tricks.com
HTML
8
star
50

iliveinomaha-banner

Retina friendly progressively enhanced banner for iliveinomaha.com
CSS
7
star
51

foitfout

A web font loading demo to showcase FOIT and FOUT behavior side by side.
JavaScript
6
star
52

async-css-loading

Test cases for asynchronous css loading
HTML
6
star
53

JsTestDriver-Boilerplate

Easy boilerplate for test driven JavaScript projects using the JsTestDriver tool.
Shell
6
star
54

Compatibility-Tests

HTML5 tests used for research for blog posts
5
star
55

BUSYNESS

This project is retired.
JavaScript
5
star
56

uniclode

Another Eleventy Serverless demo, select characters to form a Unicode Range
JavaScript
5
star
57

Raging-Netflix-Queue

RETIRED—A Google Chrome extension, provides a single click add to your Netflix queue while browsing the web.
JavaScript
5
star
58

a-single-html-file

I am a single HTML file.
HTML
4
star
59

noop

A minimal module to test importing in other tools.
JavaScript
4
star
60

a11y-tests

A series of small atomic tests used to compare accessibility linting tools.
HTML
4
star
61

eleventy-components

4
star
62

unicode-range-interchange

Do math on Unicode Ranges for web fonts.
JavaScript
4
star
63

twitter-avatar-url

Find a twitter avatar image url from a twitter username.
JavaScript
4
star
64

demo-cloudcannon-image-optimization

JavaScript
4
star
65

browser-logo-icon-set

A multi-color vector icon set (grunticon generated) of browser logos
HTML
3
star
66

netlify-kasa-build-status

A little script to update my lights with the status of a Netlify build
JavaScript
3
star
67

tweetback-zachleat

HTML
3
star
68

DOM-Sailbloat

Find the bloat in your document using this Firebug Lite plugin.
JavaScript
3
star
69

rawhyde

A boilerplate for the Jekyll/Grunt/Buttsweater combination used on zachleat.com and nebraskajs.com.
JavaScript
3
star
70

Firebug-Code-Coverage

Retired source code for an old JavaScript Code Coverage plugin for Firebug.
JavaScript
3
star
71

fundraising-status

Web component to show the current status of a fundraiser.
HTML
2
star
72

Snapper

JavaScript
2
star
73

demo-eleventy-base-blog

Just testing GitHub templates
HTML
2
star
74

myspacebook

It’s out of this world.
JavaScript
2
star
75

Parlour

A full screen photo gallery with flickr integration.
JavaScript
2
star
76

package-zachleat

Meta package for Zach Leatherman
JavaScript
2
star
77

eleventy-sample-css-manager

Sample created for https://twitter.com/jaffathecake/status/1153759414765203463
JavaScript
2
star
78

gif-party

JavaScript
1
star
79

edge-redirects-test

HTML
1
star
80

zachleat

I AM A ✨ SPECIAL ✨ REPOSITORY
1
star
81

space-jam

HTML
1
star
82

reverse-proxy-test

HTML
1
star