Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update practices and cleanup of the Performance section #474

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update practices and cleanup of the Performance section #474

wants to merge 1 commit into from

Conversation

josebolos
Copy link
Contributor

  • Change advice against using WOFF
  • Remove Lighthouse from the list of recommended performance testing tools
  • Add bold to the "concatenate files EVEN IF USING HTTP2" bit
  • Add links backing up some of the performance-related claims
  • Simplify language to help readability
  • Make headings use sentence case consistently
  • Improve unordered lists formatting
  • Add missing TOCs
  • Whitespace fixes

@josebolos
Update practices and cleanup of the Performance section
05cf3b3 
- Change advice against using WOFF
- Remove Lighthouse from the list of recommended performance testing tools
- Add bold to the "concatenate files EVEN IF USING HTTP2" bit
- Add links backing up some of the performance-related claims
- Simplify language to help readability
- Make headings use sentence case consistently
- Improve unordered lists formatting
- Add missing TOCs
- Whitespace fixes
jon-stevens
jon-stevens reviewed Mar 14, 2024
View reviewed changes
performance/images.md
* Use progressive encoding. Progressive JPEGs provide a better user experience and, most of the time, are smaller than baseline. See this [yeoman issue](https://github.com/yeoman/yeoman/issues/810) for further details.
* Use [4:2:0](https://en.wikipedia.org/wiki/Chroma_subsampling#4:2:0) [chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling) whenever possible. This encodes the colour information at half the resolution of the luma, which may result in a perceptible loss of colour accuracy. This will usually generate much smaller images, so we suggest to create both of them and compare them for any loss of quality. For tools that can help you with this, see: [Comparing the quality of images](#comparing-the-quality-of-images), below.
* Use progressive encoding. [Progressive JPEGs provide a better user experience and, most of the time, are smaller than baseline](https://github.com/yeoman/yeoman/issues/810).
* Use [4:2:0](https://en.wikipedia.org/wiki/Chroma_subsampling#4:2:0) [chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling) whenever possible. This encodes the colour information at half the resolution of the luma usually generating smaller images. It may however result in a perceptible loss of colour accuracy, so we suggest to create both 4:4:4 and 4:2:0 versions of an image and compare them for any quality loss. See [Comparing the quality of images](#comparing-the-quality-of-images) below for tools that can help you with this.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Use [4:2:0](https://en.wikipedia.org/wiki/Chroma_subsampling#4:2:0) [chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling) whenever possible. This encodes the colour information at half the resolution of the luma usually generating smaller images. It may however result in a perceptible loss of colour accuracy, so we suggest to create both 4:4:4 and 4:2:0 versions of an image and compare them for any quality loss. See [Comparing the quality of images](#comparing-the-quality-of-images) below for tools that can help you with this.
* Use [4:2:0](https://en.wikipedia.org/wiki/Chroma_subsampling#4:2:0) [chroma subsampling](https://en.wikipedia.org/wiki/Chroma_subsampling) whenever possible. This encodes the colour information at half the resolution of the luma, usually generating smaller images. It may however result in a perceptible loss of colour accuracy, so we suggest to create both 4:4:4 and 4:2:0 versions of an image and compare them for any quality loss. See [Comparing the quality of images](#comparing-the-quality-of-images) below for tools that can help you with this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great to me, apart from an extremely pedantic suggestion 😄

dotcode
dotcode requested changes Apr 3, 2024
View reviewed changes
Copy link
Contributor

@dotcode dotcode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic work, as ever, just some minor tweaks :)

performance/font-loading.md

WOFF2 has the superior compression. However, unfortunately [it does not cover all of our Enhanced browsers](https://caniuse.com/woff2) at the time of writing. Therefore consider serving both formats.
WOFF2 has a superior compression, and [is supported by all of our Enhanced browsers](https://caniuse.com/woff2), so there's no need to serve fonts in WOFF format.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the impact for our other browsers?

performance/images.md
@@ -32,10 +32,9 @@ Most best practices described in this document apply to both categories unless o

A number of more modern image formats can also be used to deliver images:

* [WEBP](https://en.wikipedia.org/wiki/WebP) is a replacement for JPEG, PNG, and GIFs, but improvements to encoders like mozjpeg means that WEBP file sizes are only marginally smaller than JPEG. It's supported by almost all major browsers ([Safari supports it partially](https://caniuse.com/webp)) and can be used only as an enhancement to another better supported format.
* [WebP](https://en.wikipedia.org/wiki/WebP) is a replacement for JPEG, PNG, and GIFs, but improvements to encoders like [mozjpeg](https://github.com/mozilla/mozjpeg) means that [WEBP file sizes are only marginally smaller than JPEG](https://siipo.la/blog/is-webp-really-better-than-jpeg). It's supported by almost all major browsers ([Safari supports it partially](https://caniuse.com/webp)) and can be used only as an enhancement to another better supported format.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* [WebP](https://en.wikipedia.org/wiki/WebP) is a replacement for JPEG, PNG, and GIFs, but improvements to encoders like [mozjpeg](https://github.com/mozilla/mozjpeg) means that [WEBP file sizes are only marginally smaller than JPEG](https://siipo.la/blog/is-webp-really-better-than-jpeg). It's supported by almost all major browsers ([Safari supports it partially](https://caniuse.com/webp)) and can be used only as an enhancement to another better supported format.
* [WebP](https://en.wikipedia.org/wiki/WebP) is a replacement for JPEG, PNG, and GIFs, but improvements to encoders like [mozjpeg](https://github.com/mozilla/mozjpeg) means that [WEBP file sizes are only marginally smaller than JPEG](https://siipo.la/blog/is-webp-really-better-than-jpeg). It's supported by almost all major browsers ([Safari supports it partially](https://caniuse.com/webp)) and must be used only as an enhancement to another better supported format.

Presume "must" was intended, due to the "only" qualifier on "can".

performance/images.md
@@ -82,7 +81,7 @@ For content images, we encourage using an on-premise or cloud-based image server
* Ensure that all images are optimised automatically.
* Ensure that the appropriate cache headers are always set.

Additionally, future improvements to these tools will result in improvements to the images being served automatically, without the images having to be manually re-encoded.
As an additional benefit, future improvements to these tools may result in improvements to the images being served automatically, without the images having to be manually re-encoded.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
As an additional benefit, future improvements to these tools may result in improvements to the images being served automatically, without the images having to be manually re-encoded.
As an additional benefit, changes to these tools may result in improvements to the images being served automatically, without the images having to be manually re-encoded.

Just tweaking it to remove some redundancy and improve the way it reads.

Separately, is there any link that can explain why this statement is made?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jon-stevens jon-stevens jon-stevens left review comments

@dotcode dotcode dotcode requested changes

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
browser support good practices performance
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@josebolos @dotcode @jon-stevens