— two shifts of ~0.031 each. * Root cause: critical CSS renders the initial paint with one set of layout rules, * then when bootstrap.css and madara/style.css load async (media=print→all swap), * they apply rules that differ slightly from the critical CSS for the tab-summary area. * * Fix: lock the final-state geometry of .tab-summary and its children from first paint. * These rules match what the full CSS + WPCode snippets produce, so no shift occurs * when the async stylesheets arrive. * * Mobile (≤768px) is the critical path: * - .summary_image switches from table-cell to block at full width * - Cover image needs aspect-ratio to reserve space before load * - .summary_content_wrap switches from table-cell to block */ add_action( 'wp_head', 'manga_single_cls_lock_css', 5 ); function manga_single_cls_lock_css() { if ( ! is_singular( 'wp-manga' ) || manga_is_reading_page() ) return; echo '' . "\n"; } /* ============================================================================= §13 LISTING PAGE OPTIMIZATIONS — inline child style, jQuery to footer ============================================================================= */ /** * Dequeue child stylesheet and inline it on listing pages. * Eliminates one blocking CSS request (the child style.css is typically small). */ add_action( 'wp_enqueue_scripts', 'manga_listing_dequeue_child_style', 99 ); function manga_listing_dequeue_child_style() { if ( is_admin() || ! manga_is_listing_context() ) { return; } wp_dequeue_style( 'madara-css-child' ); } add_action( 'wp_head', 'manga_listing_inline_child_style', 11 ); function manga_listing_inline_child_style() { if ( is_admin() || ! manga_is_listing_context() ) { return; } $file = get_stylesheet_directory() . '/style.css'; if ( ! file_exists( $file ) ) { return; } echo '' . "\n"; } /** * Move jQuery to footer on listing + manga-single pages to cut mobile render delay. * * Safe because neither page type has inline