Caching
LazyLoad
Fonts
Minification
Largest Contentful Paing (LCP)
Image optimization
Imagify – API Key 264b87768c083d9c67fbb027e1c1cc821fa29818
Critical CSS generator
https://www.corewebvitals.io/tools/critical-css-generator
Snippets
Preload element:
<link rel="preload" href="example-image.webp" as="image" fetchpriority="high" />
Browser Caching Rules (.htaccess)
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType application/json "access plus 0 seconds"
# Feed
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/atom+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType image/gif "access plus 4 months"
ExpiresByType image/png "access plus 4 months"
ExpiresByType image/jpeg "access plus 4 months"
ExpiresByType image/webp "access plus 4 months"
ExpiresByType video/ogg "access plus 4 months"
ExpiresByType audio/ogg "access plus 4 months"
ExpiresByType video/mp4 "access plus 4 months"
ExpiresByType video/webm "access plus 4 months"
ExpiresByType image/avif "access plus 4 months"
ExpiresByType image/avif-sequence "access plus 4 months"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType font/ttf "access plus 4 months"
ExpiresByType font/otf "access plus 4 months"
ExpiresByType font/woff "access plus 4 months"
ExpiresByType font/woff2 "access plus 4 months"
ExpiresByType image/svg+xml "access plus 4 months"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
# CSS and JavaScript
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
</IfModule>
add_image_size()
<?php
/**
* Theme image sizes
*
* - Uses after_setup_theme (correct hook for theme features)
* - Prefixes function names (avoid collisions)
* - Demonstrates hard crop, soft crop, and focal-point cropping
* - Shows how to expose sizes in the Media modal (image_size_names_choose)
*
* Notes / Best practices:
* - Don't register excessive sizes; each size costs CPU + disk.
* - If you change dimensions later, regenerate thumbnails (e.g., via a CLI tool).
* - WP automatically builds responsive srcset/sizes for registered sizes
* when you output images with core helpers (e.g., wp_get_attachment_image()).
*/
add_action( 'after_setup_theme', 'mytheme_register_image_sizes' );
function mytheme_register_image_sizes() {
// 1) Hard crop (exact width & height). Center-centered by default.
// Use when you need strict, uniform boxes (e.g., grid cards).
add_image_size( 'card-thumb', 600, 400, true );
// 2) Soft crop (proportional). Image will be scaled to fit within W/H.
// Good for flexible layouts where aspect ratio can vary a bit.
add_image_size( 'content-max', 1600, 1200, false );
// 3) Focal-point / directional crop (array). Since WP 3.9 you can
// specify crop position as an array of x/y: 'left','center','right' and 'top','center','bottom'.
// Example: favor the left/top corner when cropping.
add_image_size( 'hero-crop', 1920, 768, array( 'left', 'top' ) );
// 4) Tall portrait hard crop (example for author cards, etc.).
add_image_size( 'portrait-tight', 400, 600, array( 'center', 'top' ) );
// 5) Ultra-wide letterbox (hard crop). Great for banners.
add_image_size( 'banner-ultrawide', 2400, 900, array( 'center', 'center' ) );
// Optional: If you want to replace the default post thumbnail size:
// set_post_thumbnail_size( 1200, 675, true ); // 16:9 featured image
}
/**
* Make custom sizes selectable in the Media Library (Image Size dropdown).
* Only add the sizes you actually want editors to pick manually.
*/
add_filter( 'image_size_names_choose', 'mytheme_image_size_choices' );
function mytheme_image_size_choices( $sizes ) {
$new = array(
'card-thumb' => __( 'Card Thumb (600×400 hard crop)', 'mytheme' ),
'content-max' => __( 'Content Max (soft, up to 1600×1200)', 'mytheme' ),
'hero-crop' => __( 'Hero Crop (1920×768, left/top)', 'mytheme' ),
'portrait-tight' => __( 'Portrait Tight (400×600, top focus)', 'mytheme' ),
'banner-ultrawide' => __( 'Banner Ultrawide (2400×900)', 'mytheme' ),
);
return array_merge( $sizes, $new );
}
/* -----------------------------------------------------------
* Usage examples in templates:
* -----------------------------------------------------------
*
* Featured image in a loop:
* if ( has_post_thumbnail() ) {
* the_post_thumbnail( 'card-thumb', array( 'class' => 'c-card__image' ) );
* }
*
* Arbitrary attachment:
* echo wp_get_attachment_image( $attachment_id, 'hero-crop', false, array(
* 'class' => 'c-hero__image',
* 'loading' => 'lazy', // WP adds loading=lazy by default for content; explicit here if needed
* ) );
*
* Performance tips:
* - Consider adding `fetchpriority="high"` for the LCP image above the fold:
* echo wp_get_attachment_image( $id, 'hero-crop', false, array( 'fetchpriority' => 'high' ) );
*
* Housekeeping:
* - If you remove or change sizes later, you can prevent backfill generation by filtering:
* add_filter( 'intermediate_image_sizes_advanced', function( $sizes ) {
* unset( $sizes['old-size-handle'] );
* return $sizes;
* } );
*
* - To control very large original uploads (server protection):
* add_filter( 'big_image_size_threshold', fn() => 2560 ); // default ~2560; return false to disable downscaling
*/