├── 11ty-demo.html
├── README.md
├── demo.html
├── package.json
└── speedlify-score.js
/11ty-demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ` Demo](https://zachleat.github.io/speedlify-score/demo.html) using [speedlify.dev instance](https://www.speedlify.dev/)
9 |
10 | ## Usage
11 |
12 | ### Installation
13 |
14 | ```
15 | npm install speedlify-score
16 | ```
17 |
18 | ### Include Sources
19 |
20 | Include `speedlify-score.js` in your page (preferably concatenated in via a build script).
21 |
22 | ### Use Markup
23 |
24 | Use `` in your markup.
25 |
26 | Required attributes:
27 |
28 | * `speedlify-url`: **Required**. The URL to your Speedlify instance.
29 | * `hash`: **Preferred** but technically optional. A hash representing the active URL.
30 | * Look this up via your Speedlify instance’s `/api/urls.json` file. [Full instructions available at this blog post](https://www.zachleat.com/web/lighthouse-in-footer/#adding-this-to-your-eleventy-site!).
31 | * `url`: Optional. Not used if `hash` is supplied. This is the raw URL of the page you’d like to see the score for. Defaults to the current page.
32 |
33 | #### Examples
34 |
35 | ```html
36 |
37 |
38 | ```
39 |
40 | ```html
41 |
42 |
43 | ```
44 |
45 | #### Use Attributes to customize output
46 |
47 | * If no attributes are used, it `score` is implicit and default.
48 | * If some attributes are in play, you must explicitly add `score`.
49 | * `requests`
50 | * `weight`
51 | * `rank`
52 | * `rank-change` (difference between old and new rank)
53 |
54 | ## Changelog
55 |
56 | * `v1.0.0`: First release
57 | * `v2.0.0`: Changes default render behavior (only shows Lighthouse scores by default, summary and weight are not). Adds feature to use attributes to customize output if you want to opt-in to more.
58 | * `v3.0.0`: Removes `flex-wrap: wrap` for top level component.
59 | * `v4.0.0`: Using Shadow DOM, removes need for external stylesheet.
--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Speedlify Score Demos
16 |
17 | With hash
18 |
19 | With circle color override
20 |
21 | With font size scaling
22 |
23 |
24 | Using attributes to customize output
25 | No requests, using rank-url
26 |
27 | No attributes (default behavior)
28 |
29 | No scores
30 |
31 | All attributes
32 |
33 | With `url` (Slower)
34 |
35 |
36 | Without `url` or `hash` (Slower), uses current page
37 |
38 | Put a link around it
39 | Raw Data (you import it yourself as part of the build)
41 | Error state
43 | could not find hash for URL (${this.url}):`, this );
180 | return;
181 | }
182 |
183 | // Hasn’t already rendered.
184 | if(!forceRerender) {
185 | this._initTemplate(); // skeleton render
186 | forceRerender = true;
187 | }
188 |
189 | let data = await urlStore.fetchData(this.speedlifyUrl, hash);
190 | this.setDateAttributes(data);
191 |
192 | this._initTemplate(data, forceRerender);
193 | }
194 |
195 | setDateAttributes(data) {
196 | if(!("Intl" in window) || !Intl.DateTimeFormat || !data.timestamp) {
197 | return;
198 | }
199 | const date = new Intl.DateTimeFormat().format(new Date(data.timestamp));
200 | this.setAttribute("title", `Results from ${date}`);
201 | }
202 |
203 | getScoreClass(score) {
204 | if(score === "" || score === undefined) {
205 | return "circle";
206 | }
207 | if(score < .5) {
208 | return "circle circle-bad";
209 | }
210 | if(score < .9) {
211 | return "circle circle-ok";
212 | }
213 | return "circle circle-good";
214 | }
215 |
216 | getScoreHtml(title, value = "") {
217 | return `${value ? parseInt(value * 100, 10) : "…"} `;
218 | }
219 |
220 | render(data = {}) {
221 | let attrs = SpeedlifyScore.attrs;
222 | let content = [];
223 |
224 | // no extra attributes
225 | if(!this.hasAttribute(attrs.requests) && !this.hasAttribute(attrs.weight) && !this.hasAttribute(attrs.rank) && !this.hasAttribute(attrs.rankChange) || this.hasAttribute(attrs.score)) {
226 | content.push(this.getScoreHtml("Performance", data.lighthouse?.performance));
227 | content.push(this.getScoreHtml("Accessibility", data.lighthouse?.accessibility));
228 | content.push(this.getScoreHtml("Best Practices", data.lighthouse?.bestPractices));
229 | content.push(this.getScoreHtml("SEO", data.lighthouse?.seo));
230 | }
231 |
232 | let meta = [];
233 | let summarySplit = data.weight?.summary?.split(" • ") || [];
234 | if(this.hasAttribute(attrs.requests) && summarySplit.length) {
235 | meta.push(`${summarySplit[0]} `);
236 | }
237 | if(this.hasAttribute(attrs.weight) && summarySplit.length) {
238 | meta.push(`${summarySplit[1]} `);
239 | }
240 | if(data.ranks?.cumulative) {
241 | if(this.hasAttribute(attrs.rank)) {
242 | let rankUrl = this.getAttribute("rank-url");
243 | meta.push(`<${rankUrl ? `a href="${rankUrl}"` : "span"} class="rank">${data.ranks?.cumulative}`);
244 | }
245 | if(this.hasAttribute(attrs.rankChange) && data.previousRanks) {
246 | let change = data.previousRanks?.cumulative - data.ranks?.cumulative;
247 | meta.push(`${change !== 0 ? Math.abs(change) : ""} `);
248 | }
249 | }
250 | if(meta.length) {
251 | content.push(`${meta.join("")} `)
252 | }
253 |
254 | return content.join("");
255 | }
256 | }
257 |
258 | if(("customElements" in window) && ("fetch" in window)) {
259 | SpeedlifyScore.register();
260 | }
--------------------------------------------------------------------------------