Wordpress » Performance » WIP DUMP

Wordpress » Performance » WIP DUMP


Pagespeed: WP Interactivity API

WordPress introduced some unnecessary bloat called “Interactivity API” in version 6.4, which is essentially a pile of JS and CSS that could potentially harm SEO.

While the impact is not critical, it would be beneficial to find a way to remove it. Currently, WordPress does not offer a native solution for this.

The base script for the API, which contains the functionality which is shared across all blocks, is over 30kb but is only loaded when there is a block on the page which will need it.

@wordpress/interactivity - npm

WordPress Contributors Propose New Interactivity API for Frontend Blocks – WP Tavern

Interactivity API Prepares for its Official Debut in WordPress 6.5 – WP Tavern


Async or inline CSS

async css, css async, defer css

Vrlo bitno - kako da narediš CSS da možda bude inline ili ne, kroz native WP metodu wp_maybe_inline_styles: Improve front end performance with just one line of PHP - Spacedmonkey

Technique to load CSS async

is same as loading a font async. Obe stvari zvanično to ne mogu, ali blokiraju rendering ako ne uradiš nešto.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!-- Optional, if we want the stylesheet to get preloaded -->
<link rel="preload" href="style.css" as="style">
<!-- Other media type (print) until load -->
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<!-- Fallback when JavaScript is disabled -->
<noscript><link rel="stylesheet" href="style.css"></noscript>

<!-- Ako hoćeš preload, prve se dve mogu pisati kao jedna -->
<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Oficijelno čak: https://web.dev/articles/defer-non-critical-css

html - How to load CSS Asynchronously - Stack Overflow Asynchronous CSS Loading For Page Speed

HTTP/2 Push, Async JavaScript, Defer Render Blocking CSS, HTTP2 server push, HTTP3 push je sasvim korektan plugin za sve namene, dok je CSS JS Manager, Async JavaScript, Defer Render Blocking CSS supports WooCommerce je isti autor, ali inferiorniji plugin ali sa naglaskom da radi i na Woo.

Async JS and CSS

omacranger/async-css-js: Adds required tags for Async CSS & deferred JS automatically to all enqueued WordPress scripts & styles.

za inline css

wp_maybe_inline_styles

Ovaj fajl je za sve takve: magazin/wp-includes/script-loader.php (wp_make_link_relative) Za manupulaciju url i fajlovima: magazin/wp-includes/class-wp-http.php (make_absolute_url)

Falcon plugin podžava Asynchronous load CSS i to baš koristi tehniku media=print/onload=all falcon/src/LazyLoadCSS.php at master · elightup/falcon koja je i najbolja.

Async CSS loading hack -

A u WP to je:

/**

  • Function to make CSS load asynchronously
  • Run after you register and enqueue style, in a enqueue scrpts hook
  • Add ‘media=print’ attribute and ‘onload=this.media=‘all’’ (async) attribute *
  • @param string $stylesheet : CSS file identifier (slug) */ function async_load_stylesheets(string $stylesheet) { wp_style_add_data( $stylesheet, ‘media’, ‘print’ ); wp_style_add_data( $stylesheet, ‘onload’, “this.media=‘all’” ); };

/**

  • Enqueue Stylesheets with Async Loading *
  • This function is intended to be used after stylesheets are registered and enqueued.
  • Sets ‘media’ to ‘print’ and ‘onload’ attribute to ’this.media=‘all’ to load CSS async.
  • Hook it to ‘wp_enqueue_scripts’ action. *
  • @param string $style_slug : The unique identifier (slug) of the enqueued stylesheet. */ function load_stylesheet_async(string $style_slug) { wp_style_add_data( $style_slug, ‘media’, ‘print’ ); wp_style_add_data( $style_slug, ‘onload’, “this.media=‘all’” ); };

Async JS

async js, add defer and async attributes to JS

Or

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

function defer_parsing_of_js( $url ) {
        if ( is_user_logged_in() ) return $url; 
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Ovo dodaje defer na JS

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
add_filter('script_loader_tag', function ($tag, $handle) {
  if (is_admin()) return $tag;

  $exclude_handles = [ 'heartbeat', 'wp-hooks', 'wp-auth-check', 'jquery', 'jquery-core', 'jquery-ui-core', 'wp-i18n' ];

  if (in_array($handle, $exclude_handles)) {
    $tag = $tag;
  } else {
    $tag = str_replace('>', ' defer>', $tag);
  }
  return $tag;
}, 10, 2); 
  1. Async Fonts = add font-display: swap
  2. Async JavaScript = add defer or async attributes to sctipt tags
  3. Async CSS = trick on script tags like media=print but onload becomes all

Async Fonts

Async font loading is just enabling font-display: swap that enables async loading and I don’t have to do anything else. More optimisation is preloading, but that doesn’t really change things.

For font “swapping”, you can add ‘fontDisplay’ = ‘swap’ in theme.json, but this setting does not exist in the GUI.

Savršeno objašnjeno:

The Fastest Way To Load Google Fonts In WordPress

1. Preloaduješ. Moraš i “preload” da bi počeo rano, a moraš i async - da ne bi čekao na font. Async zvanično ne postoji - pa ide ta fora sa promenim kad se čita

2. Ah, sad kapirm: Browser ništa ne prikazuje dok ne učita font. Ali ako mu daš display swap - onda stavi nešto serif, pa zameni.

In PerfMatters it can be enabled from within its Fonts tab and Flying Press features a Optimize Google Fonts option.


Takođe, preloading

korišćenje relative URL je u redu - provereno.

Technique for Async Font Loading

1
2
3
4
5
6
7
add_filter('style_loader_tag', function ($html, $handle) {
  if ( $handle === 'google-fonts' ) {
    return str_replace("rel='stylesheet'",
      "rel='preload' as='style' onload=\"this.rel='stylesheet'\"", $html);
  }
  return $html;
}, 10, 2);

Asynchronous Google Fonts For Page Speed

Ne razumem kakve sve nebuloze ljudi rade My function to async load web fonts (real WOFF and WOFF2, not base64 behemots), cache them to localStorage and reuse on next visits

In Wordpress

A za sve to je najbolji hook wp_preload_resources koji je dodat u WordPress 6.1 Adding preload links with PHP code in WordPress – wordpress – GloomyCorner


Load only needed assets

So, this is how it is, and it should be like this so that you can assess what assets you need. Therefore, block themes apply the the_content filter before the wp_enqueue_scripts action runs. So, it’s not a bad idea to register them in wp_default_scripts/wp_default_styles and then enqueue them when blocks are rendered.


Featured Image

What to do with featured image?

  • <link rel="preload" as="image" href="..."> Ovo je pravi preloading i to ide obavezno za featured image

  • <img loading="eager" dodaj na sliku, ali samo na featured image

  • <img decoding="async"not very important, but leave it Since WordPress 6.1 adds attribute decoding=“async” to all images returned by the core WordPress thumbnail functions as well as the image block. For elements in the original HTML src, there don’t really seem to be many downsides. I argue not as many upsides either, but if no downsides then why not just do it? This is why we see platforms like WordPress have added this by default - What does the image decoding attribute actually do? | Tune The Web

  • <img fetchpriority="high" is just a hint to the browser, and leave it Optimizing resource loading with the Fetch Priority API

A kako to da menjamo u WordPress? Image loading optimization enhancements in 6.4


date 24. Feb 2024 | modified 15. May 2024
filename: Wordpress » Performance » WIP DUMP