CodeVoyager

Wordpress » Performance » WIP DUMP

Edit Page

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 plugin is versatile, but its user interface is clunky, so I refrain from using it. While it offers extensive functionality, the execution lacks visual appeal. Another plugin from the same developer, CSS JS Manager, Async JavaScript, Defer Render Blocking CSS supports WooCommerce, does not include push/preload techniques, focusing mostly on async-loading and similar.

Async JS and CSS

omacranger/async-css-js: Adds required tags for Async CSS & deferred JS automatically to all enqueued WordPress scripts & styles. repo sadrži kod od koga možeš pogledati, iako on implementira i LoadCSS koji meni ne treba.

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);

Defer scripts until they are needed Defer vs Async JavaScript and how this affects the Core Web Vitals

  1. Async Fonts = add font-display: swap
  2. Async JavaScript = add defer or async attributes to script 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 kapiram: 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.

date 24. Feb 2024 | modified 13. Jun 2024
filename: Wordpress » Performance » WIP DUMP
Article Content