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

Home optimisations #860

Merged
merged 10 commits into from
Jun 17, 2024
Merged

Home optimisations #860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f55e296
Add webp version of Goldie to home page
thetwopct Jun 16, 2024
7a92787
Remove unused CSS, organise CSS
thetwopct Jun 16, 2024
62adb0d
Use webp image for video poster
thetwopct Jun 16, 2024
179e1c2
Add Slick events next/previous buttons as inline SVGs
thetwopct Jun 16, 2024
5c96b25
Adding decoding async to images
thetwopct Jun 16, 2024
456b4e4
Revert "Remove unused CSS, organise CSS"
thetwopct Jun 16, 2024
1ef54c6
Remove commented out CSS
thetwopct Jun 16, 2024
ea66473
Moving mixins to variables file
thetwopct Jun 16, 2024
a6754ce
Preload the webp poster for hero video
thetwopct Jun 16, 2024
41ca4d1
Add new preconnect URLs
thetwopct Jun 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions web/wp-content/mu-plugins/wp-mu-plugins/lf-mu/public/class-lf-mu-public.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,9 @@ public function change_to_preconnect_resource_hints( $hints, $relation_type ) {
'https://js.hs-analytics.net',
'https://js.hsforms.net',
'https://js.hs-scripts.com',
'https://landscape.cncf.io',
'https://cmp.osano.com',
'https://consent.api.osano.com',
);
// add crossorigin, remove protocol.
foreach ( $add_urls as $url ) {
Expand Down
18 changes: 12 additions & 6 deletions web/wp-content/themes/cncf-twenty-two/components/home-hero.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
?>

<link rel="preload" as="image" fetchpriority="high"
href="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>">
href="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>">

<?php
wp_enqueue_script( 'home-hero', get_template_directory_uri() . '/source/js/on-demand/video.js', null, filemtime( get_template_directory() . '/source/js/on-demand/video.js' ), true );
Expand All @@ -20,9 +20,12 @@
<section class="home-hero">
<div aria-hidden="true" class="home-hero__overlay"></div>

<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
class="home-hero__poster" style="width: 100%; height: 100%;"
alt="Make cloud native ubiquitous" decoding="async">
<picture>
<source srcset="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>" type="image/webp">
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
class="home-hero__poster" style="width: 100%; height: 100%;"
alt="Make cloud native ubiquitous" decoding="async">
</picture>

<div class="home-hero__video-wrapper">
<video class="home-hero__video" loop muted playsinline width="100%"
Expand All @@ -36,8 +39,11 @@ class="home-hero__poster" style="width: 100%; height: 100%;"
<source
src="<?php echo esc_url( get_template_directory_uri() . '/source/videos/hero.mp4' ); ?>"
type="video/mp4">
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
alt="Make cloud native ubiquitous">
<picture>
<source srcset="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.webp' ); ?>" type="image/webp">
<img src="<?php echo esc_url( get_template_directory_uri() . '/images/home-hero-poster.jpg' ); ?>"
alt="Make cloud native ubiquitous">
</picture>
</video>
</div>

Expand Down
2 changes: 1 addition & 1 deletion web/wp-content/themes/cncf-twenty-two/components/home-projects.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ class="has-text-align-right is-style-link-cta"><a href="/projects">ALL Projects<
<div class="home-projects-slider-slide" dir="ltr">
<a title="View <?php echo esc_html( $project_logo['title'] ); ?>"
href="<?php echo esc_url( $project_logo['url'] ); ?>">
<img src="<?php echo esc_url( $project_logo['logo'] ); ?>"
<img src="<?php echo esc_url( $project_logo['logo'] ); ?>" decoding="async"
alt="Logo of <?php echo esc_html( $project_logo['title'] ); ?>">
</a>
</div>
Expand Down
Binary file added web/wp-content/themes/cncf-twenty-two/images/home-goldie.webp
View file
Open in desktop
Binary file not shown.
Binary file added web/wp-content/themes/cncf-twenty-two/images/home-hero-poster.webp
View file
Open in desktop
Binary file not shown.
161 changes: 113 additions & 48 deletions web/wp-content/themes/cncf-twenty-two/includes/shortcodes/home.php
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion web/wp-content/themes/cncf-twenty-two/includes/shortcodes/members.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ function ( $a, $b ) {
<div class="members <?php echo esc_html( 'logo_' . $atts['size'] ); ?>">
<?php
for ( $i = 0; $i < $count; $i++ ) {
echo '<img width="105" height="40" loading="lazy" src="' . esc_url( $members_array[ $i ]->logo_url ) . '" alt="' . esc_attr( $members_array[ $i ]->name ) . '">';
echo '<img decoding="async" width="105" height="40" loading="lazy" src="' . esc_url( $members_array[ $i ]->logo_url ) . '" alt="' . esc_attr( $members_array[ $i ]->name ) . '">';
}
?>
</div>
Expand Down
8 changes: 4 additions & 4 deletions web/wp-content/themes/cncf-twenty-two/includes/shortcodes/metrics.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function add_cncf_metrics_shortcode() {
<div class="metrics__image-wrapper">
<img src="<?php LF_utils::get_svg( 'cncf-icon-kubernetes-distributions.svg', true ); ?>"
width="130" height="110" class="metrics__image"
alt="Icon of Kubernetes against app outline" loading="lazy">
alt="Icon of Kubernetes against app outline" loading="lazy" decoding="async">
</div>

<div class="metrics__text-wrapper">
Expand All @@ -60,7 +60,7 @@ function add_cncf_metrics_shortcode() {
<div class="metrics__image-wrapper">
<img src="<?php LF_utils::get_svg( 'cncf-icon-computer.svg', true ); ?>"
width="130" height="80" class="metrics__image"
alt="Icon of computer" loading="lazy">
alt="Icon of computer" loading="lazy" decoding="async">
</div>

<div class="metrics__text-wrapper">
Expand All @@ -87,7 +87,7 @@ function add_cncf_metrics_shortcode() {
<div class="metrics__image-wrapper">
<img src="<?php LF_utils::get_svg( 'cncf-icon-corporations.svg', true ); ?>"
width="120" height="100" class="metrics__image"
alt="Icon of corporation building" loading="lazy">
alt="Icon of corporation building" loading="lazy" decoding="async">
</div>

<div class="metrics__text-wrapper">
Expand All @@ -113,7 +113,7 @@ function add_cncf_metrics_shortcode() {
<div class="metrics__image-wrapper">
<img src="<?php LF_utils::get_svg( 'cncf-icon-meetups1.svg', true ); ?>"
width="125" height="110" class="metrics__image"
alt="Icon people discussing code" loading="lazy">
alt="Icon people discussing code" loading="lazy" decoding="async">
</div>

<div class="metrics__text-wrapper">
Expand Down
2 changes: 1 addition & 1 deletion web/wp-content/themes/cncf-twenty-two/includes/shortcodes/projects.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function add_projects_shortcode( $atts ) {
title="<?php echo esc_html( the_title_attribute() . $date_accepted ); ?>"
class="project-item__link">

<img width="100" height="100" src="<?php echo esc_url( $logo ); ?>" loading="lazy"
<img width="100" height="100" src="<?php echo esc_url( $logo ); ?>" loading="lazy" decoding="async"
title="<?php echo esc_html( the_title_attribute() . $date_accepted ); ?>"
class="project-item__image">
</a>
Expand Down
1 change: 1 addition & 0 deletions web/wp-content/themes/cncf-twenty-two/includes/shortcodes/radars.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function add_radars_shortcode( $atts ) {
if ( $image ) {
?>
<img src="<?php echo esc_url( $image ); ?>" loading="lazy"
decoding="async"
alt="<?php echo esc_html( $radar_title ); ?>"
class="radar-item__image">
<?php
Expand Down
4 changes: 2 additions & 2 deletions web/wp-content/themes/cncf-twenty-two/source/js/on-demand/slick-events-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ function eventSlider($) {
lazyLoad: "ondemand",
pauseOnHover: true,
pauseOnFocus: false,
prevArrow: '<img alt="Previous" class="slick-prev" src="/wp-content/themes/cncf-twenty-two/images/slider-arrow-left.svg" />',
nextArrow: '<img alt="Next" class="slick-next" src="/wp-content/themes/cncf-twenty-two/images/slider-arrow-right.svg" />'
prevArrow: '<svg alt="Previous" class="slick-prev" fill="none" height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" fill="#fff" opacity=".7" r="18"/><path d="m21.125 25.5566-7-7 7-7" stroke="#15153b" stroke-width="2"/></svg>',
nextArrow: '<svg alt="Next" class="slick-next" fill="none" height="36" viewBox="0 0 36 36" width="36" xmlns="http://www.w3.org/2000/svg"><circle cx="18" cy="18" fill="#fff" opacity=".7" r="18"/><path d="m16 11.5566 7 7-7 7" stroke="#15153b" stroke-width="2"/></svg>'
}
);
}
15 changes: 0 additions & 15 deletions web/wp-content/themes/cncf-twenty-two/source/scss/blocks/_block-quote.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,4 @@ body .wp-block-quote,
font-size: 22px;
}
}
// Not sure where this is/was used?
// &.has-normal-font-size {
// p {
// line-height: 175%;
// letter-spacing: 0.02em;
// font-size: 16px;
// @media (min-width: 1200px) {
// font-size: 22px;
// line-height: 160%;
// }
// }
// cite {
// font-size: 16px;
// }
// }
}
14 changes: 0 additions & 14 deletions web/wp-content/themes/cncf-twenty-two/source/scss/core/_tiles.scss
View file
Open in desktop

This file was deleted.

51 changes: 43 additions & 8 deletions web/wp-content/themes/cncf-twenty-two/source/scss/core/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,19 @@ $cookie-banner-bg: #bff3ff;
$cookie-banner-text: $black;

// font-stacks.
$font-primary: 'Clarity City', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, Roboto,
Ubuntu, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
$font-primary:
'Clarity City',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
Helvetica,
Arial,
sans-serif,
Roboto,
Ubuntu,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol';

$font-code: Hack, 'Fira Code', Consolas, Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter',
'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier,
Expand All @@ -71,7 +82,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Clarity City';
font-weight: 400;
font-style: normal;
src: local('ClarityCity-Regular'), local('Clarity City'),
src:
local('ClarityCity-Regular'),
local('Clarity City'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.woff2') format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-400.ttf') format('ttf');
Expand All @@ -82,7 +95,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Clarity City';
font-weight: 600;
font-style: normal;
src: local('ClarityCity-SemiBold'), local('Clarity City'),
src:
local('ClarityCity-SemiBold'),
local('Clarity City'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.woff2') format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-600.ttf') format('ttf');
Expand All @@ -93,7 +108,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Clarity City';
font-weight: 700;
font-style: normal;
src: local('ClarityCity-Bold'), local('Clarity City'),
src:
local('ClarityCity-Bold'),
local('Clarity City'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.woff2') format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-700.ttf') format('ttf');
Expand All @@ -104,7 +121,9 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Clarity City';
font-weight: 800;
font-style: normal;
src: local('ClarityCity-ExtraBold'), local('Clarity City'),
src:
local('ClarityCity-ExtraBold'),
local('Clarity City'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.woff2') format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/ClarityCity-800.ttf') format('ttf');
Expand All @@ -116,7 +135,8 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Source Serif Pro';
font-style: italic;
font-weight: 400;
src: local('SourceSerifPro-It'),
src:
local('SourceSerifPro-It'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.woff2') format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v11-latin-italic.ttf') format('ttf');
Expand All @@ -128,9 +148,24 @@ $font-serif: 'Source Serif Pro', 'Apple Garamond', 'Baskerville', 'Times New Rom
font-family: 'Source Serif Pro';
font-style: italic;
font-weight: 700;
src: local('SourceSerifPro-BoldIt'),
src:
local('SourceSerifPro-BoldIt'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.woff2')
format('woff2'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.woff') format('woff'),
url('/wp-content/themes/cncf-twenty-two/source/fonts/source-serif-pro-v15-latin-700italic.ttf') format('ttf');
}

// for tiles that go 3-across on desktop.
@mixin tiles3 {
background: $white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}

// tiles that go 2-across on desktop need a larger radius.
@mixin tiles2 {
background: $white;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
1 change: 0 additions & 1 deletion web/wp-content/themes/cncf-twenty-two/source/scss/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
@import 'core/footer';
@import 'core/buttons';
@import 'core/forms';
@import 'core/tiles';

@import 'components/back-to-top';
@import 'components/benefits';
Expand Down