Resource Hints 2021

[rviscomi]

Part IV Chapter 20: Resource Hints

If you're interested in contributing to the Resource Hints chapter of the 2021 Web Almanac, please reply to this issue and indicate which role or roles best fit your interest and availability: author, reviewer, analyst, and/or editor.

Content team

Lead	Authors	Reviewers	Analysts	Editors	Coordinator
@kevinfarrugia	@kevinfarrugia	@siakaramalegos @Zizzamia @samarpanda	@Nithanaroy	-	@rviscomi

Expand for more information about each role

• The content team lead is the chapter owner and responsible for setting the scope of the chapter and managing contributors' day-to-day progress.
• Authors are subject matter experts and lead the content direction for each chapter. Chapters typically have one or two authors. Authors are responsible for planning the outline of the chapter, analyzing stats and trends, and writing the annual report.
• Reviewers are also subject matter experts and assist authors with technical reviews during the planning, analyzing, and writing phases.
• Analysts are responsible for researching the stats and trends used throughout the Almanac. Analysts work closely with authors and reviewers during the planning phase to give direction on the types of stats that are possible from the dataset, and during the analyzing/writing phases to ensure that the stats are used correctly.
• Editors are technical writers who have a penchant for both technical and non-technical content correctness. Editors have a mastery of the English language and work closely with authors to help wordsmith content and ensure that everything fits together as a cohesive unit.
• The section coordinator is the overall owner for all chapters within a section like "User Experience" or "Page Content" and helps to keep each chapter on schedule.

Note: The time commitment for each role varies by the chapter's scope and complexity as well as the number of contributors.

For an overview of how the roles work together at each phase of the project, see the Chapter Lifecycle doc.

Milestone checklist

0. Form the content team

• May 31: The content team has at least one author, reviewer, and analyst

1. Plan content

• June 15 The content team has completed the chapter outline in the draft doc

2. Gather data

• June 30: Analysts have added all necessary custom metrics and drafted a PR (example) to track query progress

• July 1 - 31: HTTP Archive runs the July crawl

3. Validate results

• September 30: Analysts have queried all metrics and saved the output to the results sheet

4. Draft content

• October 31: The content team has written, reviewed, and edited the chapter in the doc

5. Publication

• November 15: The completed chapter and all required metadata and figures are converted to markdown and submitted to GitHub

• December 1: Target launch date 🚀

Chapter resources

Refer to these 2021 Resource Hints resources throughout the content creation process:

📄 Google Docs for outlining and drafting content
🔍 SQL files for committing the queries used during analysis
📊 Google Sheets for saving the results of queries
📝 Markdown file for publishing content and managing public metadata

[Nithanaroy]

I would like to be an analyst

[rviscomi]

Great thanks @Nithanaroy! I've added you to the team.

[siakaramalegos]

Hi, I'd be interested in being an author. I write and speak on performance as well as perform contract work for various companies on performance. You can learn more about me on my website (including articles, talks, and workshops): https://sia.codes/

If I'm not chosen as an author on this or any other page, I'm happy to be a reviewer or editor. Thanks for your consideration.

[rviscomi]

📟 paging 2019/2020 contributors: @khempenius @andydavies @addyosmani @tunetheweb @yoavweiss @Zizzamia @notwillk @giopunt @jessnicolet @pmeenan @mgechev

Would any of you be interested to contribute to the 2021 chapter? I'd especially like to see more 2019/2020 authors become 2021 reviewers to help ease the transition and similarly I think prior reviewers would make great 2021 authors, being familiar with the process already. And prior analysts would make excellent 2021 analysts 😁

Or is there anyone new you'd like to see?

[rviscomi]

@demianrenzulli were you also interested in being a reviewer of the Resource Hints chapter?

[siakaramalegos]

Just wanted to note that I'm authoring a different chapter so I'll won't be authoring this one (please volunteer to author!). @rviscomi , I can still review if it's still needed and the workload is timed ok with authoring.

[rviscomi]

Sounds great, thanks @siakaramalegos!

[Zizzamia]

Oh nice, feel free to add me as Reviewer. Happy to help :-)

[samarpanda]

Can i join as a reviewer?

[rviscomi]

Absolutely, welcome @samarpanda!

⚠️ Note that we're still looking for more contributors to make this chapter viable, specifically authors. If we're unable to staff the chapter by May 31 we may have to close it and focus our efforts on other chapters. It does have some overlap with Performance, so we may be able to integrate this topic if @siakaramalegos is amenable.

One suggestion for you all that may help draw in new contributors would be to post to your professional networks that we're still looking for someone experienced with resource hints to author this chapter and to reply to this issue if interested.

[siakaramalegos]

@rviscomi if needed, I can make it work. Would still love to find an author for this chapter though. Will post again!

[rviscomi]

I spoke with @kevinfarrugia offline and they volunteered to author this.

@kevinfarrugia thanks for your interest in authoring this chapter! As the content team lead, you'll be responsible for the scope and direction of the chapter and keeping it on schedule. We automatically monitor the staffing and progress of each chapter based on the state of the initial comment so please keep that updated as you add new contributors and meet each milestone.

We've created a Google Doc for this chapter, which you're encouraged to use to collaborate with the content team on the initial outline, metrics, and ultimately the final draft.

Next steps for this chapter are:

• Due May 31: Complete Milestone 0: Form the content team—you can check this off now since you've already got at least one author, reviewer, and analyst ✨
• Due June 15: Get started on Milestone 1: Plan content by brainstorming some content ideas in the doc (you may need to request edit access)

There's not currently a section coordinator for this chapter, so I'll be periodically checking in with you directly to make sure the chapter is staying on schedule. Reach out here in this issue if you have any questions about the process.

More information about the content team lead and author roles and responsibilities are available for reference in the wiki if needed.

To anyone else interested in contributing to this chapter, please comment below to join the team!

[kevinfarrugia]

Hey everyone, thanks for volunteering to contribute to the Resource Hints chapter team! I created a channel in the HTTP Archive Slack for this chapter - please join in for chat/discussions.

TODO

@siakaramalegos @Zizzamia @samarpanda @Nithanaroy

• Join the Slack channel #web-almanac-resource-hints
• Request edit access to the Google doc
• Please add your name and email address to the Content Team portion of the draft Google doc.

If you're new:

• You can find detailed descriptions of each role in the Chapter Lifecycle article in the wiki.
• Last year's methodology: https://almanac.httparchive.org/en/2020/methodology

[kevinfarrugia]

@rviscomi are you able to send me a link of last year's Google Doc please?

[tunetheweb]

@rviscomi are you able to send me a link of last year's Google Doc please?

Here's the chapter tracker from last year: #989 with all the links.

[tunetheweb]

@pmeenan is it possible to get console warnings from the crawl? Specifically these two:

The resource https://fonts.googleapis.com/css2?family=Robot was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

and

A preload for 'https://example.com/fonts/roboto.woff2' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

I don't think there's a Lighthouse error for this (maybe there should be!)

[pmeenan]

@tunetheweb It should be possible. We report the actual console log as well as the audits/interventions reports but if you happen to have an example page where it fires I can check and see where it ends up.

[kevinfarrugia]

I'll prepare a couple of sample pages with the errors.

[pmeenan]

Looks like the HAR files didn't used to report the console log output. I just added it so it should be available with the June crawl. I see regular log messages and intervention messages showing up but we should still test these specific cases just to be sure.

This is what it looks like:

"_consoleLog": [
    {
        "source": "intervention",
        "level": "info",
        "text": "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/baloothambi2/v2/cY9cfjeOW0NHpmOQXranrbDyu7hADpI.woff2",
        "timestamp": 1621947411946.331,
        "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        "lineNumber": 20,
        "stackTrace": {
            "callFrames": [
                {
                    "functionName": "k",
                    "scriptId": "6",
                    "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
                    "lineNumber": 20,
                    "columnNumber": 1423
                }
            ]
        }
    },
    {
        "source": "intervention",
        "level": "info",
        "text": "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/baloothambi2/v2/cY9ffjeOW0NHpmOQXranrbDyu7CzLYe-RB4.woff2",
        "timestamp": 1621947411947.563,
        "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        "lineNumber": 20,
        "stackTrace": {
            "callFrames": [
                {
                    "functionName": "k",
                    "scriptId": "6",
                    "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
                    "lineNumber": 20,
                    "columnNumber": 1423
                }
            ]
        }
    },
    {
        "source": "intervention",
        "level": "info",
        "text": "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/baloothambi2/v2/cY9ffjeOW0NHpmOQXranrbDyu7CfKoe-RB4.woff2",
        "timestamp": 1621947411948.13,
        "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        "lineNumber": 20,
        "stackTrace": {
            "callFrames": [
                {
                    "functionName": "k",
                    "scriptId": "6",
                    "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
                    "lineNumber": 20,
                    "columnNumber": 1423
                }
            ]
        }
    },
    {
        "source": "intervention",
        "level": "info",
        "text": "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/baloothambi2/v2/cY9ffjeOW0NHpmOQXranrbDyu7D7K4e-RB4.woff2",
        "timestamp": 1621947411948.3818,
        "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        "lineNumber": 20,
        "stackTrace": {
            "callFrames": [
                {
                    "functionName": "k",
                    "scriptId": "6",
                    "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
                    "lineNumber": 20,
                    "columnNumber": 1423
                }
            ]
        }
    },
    {
        "source": "intervention",
        "level": "info",
        "text": "Slow network is detected. See https://www.chromestatus.com/feature/5636954674692096 for more details. Fallback font will be used while loading: https://fonts.gstatic.com/s/baloothambi2/v2/cY9ffjeOW0NHpmOQXranrbDyu7DnKIe-RB4.woff2",
        "timestamp": 1621947411948.7568,
        "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
        "lineNumber": 20,
        "stackTrace": {
            "callFrames": [
                {
                    "functionName": "k",
                    "scriptId": "6",
                    "url": "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js",
                    "lineNumber": 20,
                    "columnNumber": 1423
                }
            ]
        }
    }
]

[pmeenan]

For debugging purposes, if you click on the screenshot in the WebPageTest results, below the screenshot it displays the console log messages: https://dev.webpagetest.org/result/210525_ZiDcBA_c3fe4286cf3f4082d652b5fb211fb6d9/1/screen_shot/#step_1

[tunetheweb]

Awesome - thanks @pmeenan !

[kevinfarrugia]

Perfect. Thank you @pmeenan .

Demo URLs:

• https://kevinfarrugia.github.io/resource-hints/preload-unused-resource
• https://kevinfarrugia.github.io/resource-hints/preload-incorrect-request-credentials

@tunetheweb anything further needed to have the console output available for query, or is everything in the HAR already available?

[kevinfarrugia]

Looks like it's working well:

_consoleLog: [
{
source: "other",
level: "warning",
text: "A preload for 'https://kevinfarrugia.github.io/resource-hints/fonts/roboto-regular.woff2' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.",
timestamp: 1621951673550.989,
url: "https://kevinfarrugia.github.io/resource-hints/preload-incorrect-request-credentials"
}
]

[tunetheweb]

@tunetheweb anything further needed to have the console output available for query, or is everything in the HAR already available?

@pmeenan I presume this will just go into the payload column of the pages table so we'll be able to query this so nothing else required now you'd done your magic?

[pmeenan]

I believe so. It'll be interesting to see how much bigger the pages table queries get with the console logs included now.

[rviscomi]

@kevinfarrugia the outline is coming along very nicely! Thanks for keeping on that. Just a reminder that it should be completed by June 15, but it looks like you're in good shape to meet that milestone.

Could you also please update the top comment to check off Milestone 0 now that your content team is fully staffed with authors/reviewers/analysts? Keeping the chapter metadata up to date is helpful for us to monitor everyone's progress at a glance in #2179. Thanks!

[rviscomi]

Hey @kevinfarrugia, how are you feeling about the outline? Looking like a lot of great content in there now, but just not sure if you're still working on it. Please check off Milestone 1 above when you're satisfied with it. Thanks!

[kevinfarrugia]

Thank you @rviscomi . I will be going through the queries together with @Nithanaroy and if we're happy with them I will check off Milestone 1.

[Zizzamia]

Hey @kevinfarrugia let me know if you need any help from connecting the data from last year to this year. Or you need any insights on the how we wrote the doc from last year.

[kevinfarrugia]

@pmeenan I can confirm that the _consoleLog is available in the payload column in the pages table (and also sample_data since this was updated to the June crawl). 🎊

[rviscomi]

👋 Hi @kevinfarrugia @Nithanaroy, just checking in on the chapter progress. How is the analysis coming along?

[kevinfarrugia]

We are communicating on Slack and will be splitting up the effort. Hopefully we will have some good progress soon.

[rviscomi]

@kevinfarrugia @siakaramalegos @Zizzamia @samarpanda @Nithanaroy

Thank you all for your hard work getting this chapter over the finish line in time for the pre-release! Congratulations on finishing the chapter, and I'm excited to see us launch the rest of the chapters along side it on Wednesday 🎉

When you get 5 minutes, I'd really appreciate if you could fill out our contributor survey to tell us (the project leads) about your experience. It's super helpful to hear what went well or what could be improved for next time. 🙏