[wp-trac] [WordPress Trac] #58810: Allow giving priority to a block style for wp_maybe_inline_styles()

[WordPress Trac]

#58810: Allow giving priority to a block style for wp_maybe_inline_styles()
---------------------------+--------------------------
 Reporter:  asafm7         |       Owner:  (none)
     Type:  enhancement    |      Status:  closed
 Priority:  normal         |   Milestone:
Component:  Script Loader  |     Version:
 Severity:  normal         |  Resolution:  maybelater
 Keywords:                 |     Focuses:  performance
---------------------------+--------------------------
Changes (by westonruter):

 * status:  new => closed
 * resolution:   => maybelater
 * milestone:  Awaiting Review =>


Comment:

 > This should be further tested.

 I tested this by spinning up two identical vanilla sites on InstaWP,
 `sans-external-styles.instawp.xyz` and `with-external-styles.instawp.xyz`,
 with the latter also having this plugin active:

 {{{#!php
 <?php
 /**
  * Plugin Name: Load styles from sans-external-styles.instawp.xyz
  */

 add_filter(
         'style_loader_src',
         static function ( $src ) {
                 $origin = parse_url( home_url(), PHP_URL_HOST );
                 if ( parse_url( $src, PHP_URL_HOST ) === $origin ) {
                         $src = str_replace( "//{$origin}", '//sans-
 external-styles.instawp.xyz', $src );
                 }
                 return $src;
         }
 );
 }}}

 == Without Network Throttling

 {{{
 $ npm run research -- benchmark-web-vitals -u https://sans-external-
 styles.instawp.xyz/ -n 100 -o csv

 URL,https://sans-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),181.2
 LCP (median),181.2
 TTFB (median),122.6
 LCP-TTFB (median),61.4
 }}}

 {{{
 $ npm run research -- benchmark-web-vitals -u https://with-external-
 styles.instawp.xyz/ -n 100 -o csv

 URL,https://with-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),205.8
 LCP (median),205.8
 TTFB (median),137.15
 LCP-TTFB (median),64.35
 }}}

 Here the site without the external stylesheet has a LCP-TTFB that is
 '''4.58% faster'''.


 == With Network Throttling

 {{{
 $ npm run research -- benchmark-web-vitals -u https://sans-external-
 styles.instawp.xyz/ -n 100 -c "Slow 3G" -o csv

 URL,https://sans-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),2250.4
 LCP (median),2250.4
 TTFB (median),328.45
 LCP-TTFB (median),1921.8
 }}}


 {{{
 $ npm run research -- benchmark-web-vitals -u https://with-external-
 styles.instawp.xyz/ -n 100 -c "Slow 3G" -o csv

 URL,https://with-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),2247.75
 LCP (median),2247.75
 TTFB (median),126.1
 LCP-TTFB (median),2123.05
 }}}

 Here the site without the external stylesheet has a LCP-TTFB that is
 '''9.48% faster'''.

 == With All Styles Inlined

 Lastly, I re-tested when all stylesheets are inlined such as via the
 following plugin:

 {{{#!php
 <?php
 add_filter( 'styles_inline_size_limit', static function () {
         return 1000000000000;
 } );
 }}}

 === Without Network Throttling

 {{{
 $ npm run research -- benchmark-web-vitals -u https://with-external-
 styles.instawp.xyz/ -n 100 -o csv

 URL,https://with-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),186.3
 LCP (median),188.95
 TTFB (median),124.75
 LCP-TTFB (median),62
 }}}

 The LCP-TTFB above with the external stylesheet was 64.35ms, and here it
 is 62ms when inlined. So that is '''3.65% faster'''. However, when the
 stylesheet was not externalized the LCP-TTFB was 61.4ms, so in this case
 the LCP-TTFB actually ''increased'' by ~1%.

 === With Network Throttling

 {{{
 $ npm run research -- benchmark-web-vitals -u https://with-external-
 styles.instawp.xyz/ -n 100 -c "Slow 3G" -o csv

 URL,https://with-external-styles.instawp.xyz/
 Success Rate,100%
 FCP (median),2269.85
 LCP (median),2303.45
 TTFB (median),120.9
 LCP-TTFB (median),2179.85
 }}}

 The LCP-TTFB above with the external stylesheet was 2123.05ms, and here it
 is 2179.85ms when inlined, which is actually slower but a negligible
 difference. However, when the stylesheet was not externalized (and not
 inlined) the LCP-TTFB was 1921.8ms which is 11.84% more than when it was
 inlined, puzzlingly.

 ----

 In short, I can confirm that if a block's stylesheet is coming from an
 external origin (such as via a CDN) then it is definitely better to inline
 the stylesheet. Nevertheless, I'm confused still why inlining the
 stylesheets seems actually to be slower than when stylesheets are not
 external. In any case, loading block stylesheets from external origins is
 not something that core does. It is the domain of plugins. Therefore, it
 seems it should it be the responsibility of plugins to inline such
 stylesheets.

 For this reason, I'm going to close this as maybelater.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/58810#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform