cncf
/
cncf.io
mirror of https://github.com/cncf/cncf.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Optimise image loading 

Signed-off-by: James Hunt <10615884+thetwopct@users.noreply.github.com>
This commit is contained in:
James Hunt 2024-11-29 14:14:41 +07:00 committed by Chris Abraham
parent a78fa3674d
commit de6e3bee1f
4 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
web/wp-content/themes/cncf-twenty-two/classes/class-lf-utils.php
View File

@ -264,11 +264,11 @@ class LF_Utils {
} }
if ( $image_srcset ) { if ( $image_srcset ) {
$fetchpriority = ( 'eager' === $loading ) ? ' fetchpriority="high"' : '';
$html = '<img width="' . $size[1] . '" height="' . $size[2] . '" loading="' . $loading . '" decoding="async" class="' . $class_name . '" src="' . $image_src . '" srcset="' . $image_srcset . '" sizes="(max-width: ' . $max_width . ') 100vw, ' . $max_width . '" alt="' . $alt_text . '">'; $html = '<img width="' . $size[1] . '" height="' . $size[2] . '" loading="' . $loading . '" decoding="async" class="' . $class_name . '" src="' . $image_src . '" srcset="' . $image_srcset . '" sizes="(max-width: ' . $max_width . ') 100vw, ' . $max_width . '"' . $fetchpriority . ' alt="' . $alt_text . '">';
} else { } else {
$attributes = array( $attributes = array(
'loading="' . $loading . '"', 'loading="' . $loading . '"',
'class="' . $class_name . '"', 'class="' . $class_name . '"',
@ -276,6 +276,10 @@ class LF_Utils {
'alt="' . $alt_text . '"', 'alt="' . $alt_text . '"',
); );
if ( 'eager' === $loading ) {
$attributes[] = 'fetchpriority="high"';
}
$width = (int) $size[1] ?? null; $width = (int) $size[1] ?? null;
$height = (int) $size[2] ?? null; $height = (int) $size[2] ?? null;
@ -287,7 +291,7 @@ class LF_Utils {
$attributes[] = 'height="' . $height . '"'; $attributes[] = 'height="' . $height . '"';
} }
$img = '<img ' . implode( ' ', $attributes ) . '>'; $img = '<img decoding="async" ' . implode( ' ', $attributes ) . '>';
$img_meta = wp_get_attachment_metadata( $image_id ); $img_meta = wp_get_attachment_metadata( $image_id );
$attachment_id = $image_id; $attachment_id = $image_id;
$html = wp_image_add_srcset_and_sizes( $img, $img_meta, $attachment_id ); $html = wp_image_add_srcset_and_sizes( $img, $img_meta, $attachment_id );
@ -297,18 +301,19 @@ class LF_Utils {
$html, $html,
array( array(
'img' => array( 'img' => array(
'src' => true, 'src' => true,
'srcset' => true, 'srcset' => true,
'sizes' => true, 'sizes' => true,
'class' => true, 'class' => true,
'id' => true, 'id' => true,
'width' => true, 'width' => true,
'height' => true, 'height' => true,
'alt' => true, 'alt' => true,
'align' => true, 'align' => true,
'style' => true, 'style' => true,
'media' => true, 'media' => true,
'loading' => true, 'loading' => true,
'decoding' => true,
), ),
) )
); );

2
web/wp-content/themes/cncf-twenty-two/components/header.php
View File

@ -24,7 +24,7 @@ endif;
<?php if ( isset( $site_options['header_image_id'] ) && $site_options['header_image_id'] ) { ?> <?php if ( isset( $site_options['header_image_id'] ) && $site_options['header_image_id'] ) { ?>
<div class="logo"> <div class="logo">
<a href="/" title="<?php echo bloginfo( 'name' ); ?>"> <a href="/" title="<?php echo bloginfo( 'name' ); ?>">
<img loading="eager" <img loading="eager" decoding="async" fetchpriority="high"
src="<?php echo esc_url( wp_get_attachment_url( $site_options['header_image_id'] ) ); ?>" src="<?php echo esc_url( wp_get_attachment_url( $site_options['header_image_id'] ) ); ?>"
width="210" height="40" width="210" height="40"
alt="<?php echo bloginfo( 'name' ); ?>"> alt="<?php echo bloginfo( 'name' ); ?>">

2
web/wp-content/themes/cncf-twenty-two/components/report-single.php
View File

@ -38,7 +38,7 @@ $classes = LF_Utils::merge_classes(
<?php if ( get_post_thumbnail_id() ) : ?> <?php if ( get_post_thumbnail_id() ) : ?>
<figure class="is-style-rounded-corners"> <figure class="is-style-rounded-corners">
<?php <?php
LF_Utils::display_responsive_images( get_post_thumbnail_id(), 'newsroom-776', '590px', 'lazy', get_the_title() ); LF_Utils::display_responsive_images( get_post_thumbnail_id(), 'newsroom-776', '590px', 'eager', get_the_title() );
?> ?>
</figure> </figure>
<?php endif; ?> <?php endif; ?>

22
web/wp-content/themes/cncf-twenty-two/functions.php
View File

@ -197,7 +197,27 @@ function lf_update_styles_with_filemtime( $styles ) {
add_action( 'wp_default_styles', 'lf_update_styles_with_filemtime' ); add_action( 'wp_default_styles', 'lf_update_styles_with_filemtime' );
/** /**
* Disable OpenVerse from Media. Some dumb change to trigger a new build. * Adjusts the lazy load image threshold based on post type.
*/
function lf_lazyload_threshold_by_post_type() {
$thresholds = array(
'lf_case_study' => 1,
'lf_human' => 1,
'lf_kubeweekly' => 0,
'lf_project' => 1,
'lf_report' => 1,
'lf_webinar' => 0,
'page' => 1,
'post' => 0,
);
$post_type = get_post_type();
return isset( $thresholds[ $post_type ] ) ? $thresholds[ $post_type ] : 0;
}
add_filter( 'wp_omit_loading_attr_threshold', 'lf_lazyload_threshold_by_post_type', 10, 0 );
/**
* Disable OpenVerse from Media.
* *
* @param array $settings Settings. * @param array $settings Settings.
*/ */