There are various performance improvements being worked on for Drupal core, but it can be hard to keep track of how they do or don't fit together.
JavaScript and CSS aggregation/minification
Aggregation outside the main page request: #1014086: Stampedes and cold cache performance issues with css/js aggregation
JavaScript minification with Peast: #3302755: On-the-fly JavaScript minification
Query string compression #3303067: Compress aggregate URL query strings
Replace weights with dependencies: #1945262: Replace custom weights with dependencies in library declarations; introduce "before" and "after" for conditional ordering
defer/async aggregate support: #1587536: JavaScript aggregation should account for "async" and "defer" attributes
Image loading
Width and height for responsive images: #3192234: Apply width and height attributes to allow responsive image tag use loading="lazy"
Responsive image lazy loading: #3167034: Leverage the 'loading' html attribute to enable lazy-load by default for images in Drupal core
UI for loading attribute: #3173180: Add UI for 'loading' html attribute to images
fetchpriority=high: #3322289: [meta] Add fetchpriority=high on certain images/oembeds
Media thumbnail formatter: #2947796: Responsive image format for media
Media entity reference formatter: #3333448: Direct formatter for media items
Theme logo handling: #3345259: Theme logo image is rendered without dimensions
Image compression
Responsive image fallback formats: #3213491: Add fallback format support to responsive images
AVIF support: #3202016: Let GDToolkit support AVIF image format
Use webp in standard profile image styles #3275557: Add webp image conversion to core's install profile's image style
AJAX
Improve AjaxPageState: #3279206: Dynamically determine ajaxPageState based on libraries
Allow GET AJAX requests: #956186: Allow AJAX to use GET requests
Render caching
Abstract render cache and improve hit rate: #2551419: Abstract RenderCache into a separate service that is capable of cache redirects in a non-render array-specific way
Use bundle cache tag in views #3055371: Use new cache tag ENTITY_TYPE_list:BUNDLE in Views to improve cache hit rate
Comments
Comment #2
catchComment #3
heddnComment #4
heddnAs a note on priority, from reviewing the notes in https://web.dev/top-cwv-2023/ we have:
The first bullet, we do already pretty well in Drupal, especially Drupal core. Someone can write bad CSS, but that is out of our control.
The second bullet, we are well along the path to doing a good job. We recently landed a whole litany of lazy loading issues in Drupal 10.1. See #3173180: Add UI for 'loading' html attribute to images as an example. But we still have more work to do.
#3322289: [meta] Add fetchpriority=high on certain images/oembeds is obviously important. And not super complicated given all we learned in those previous lazy load issues.
#3333448: Direct formatter for media items and to a lesser degree #2947796: Responsive image format for media are also important. But it isn't particularly obvious why. But both of these improve the UX for using lazy loading, eager loading, fetchpriority, responsive images, etc. Without something that lowers the bar, few sites will correctly implement these solutions. Resulting in incorrectly labeling something as eager when it should be lazy and high fetch priority when it isn't the LCP. Or not figuring out HOW to make an image responsive. The rest of the items in the meta are important too. But let's pay special attention to these 2 or 3 issues and prioritize getting them across the finish line.
Comment #5
heddnComment #6
heddnAdded a link to #3345259: Theme logo image is rendered without dimensions.
Comment #8
bbralaAdding related issues because that is helpfull, but also to test some things.
Comment #9
catchSpace for one more?