Mobile site speed tips

// functions.php
add_filter('wp_get_attachment_image_attributes', function($attr) {
  if (is_front_page() || is_singular()) {
    $attr['fetchpriority'] = 'high';
    $attr['decoding'] = 'async';
  }
  return $attr;
}, 10);

– In WP Rocket → **Preload**: add the hero image URL under **Preload** (link rel=preload as=image) if your theme/builder doesn’t do it.

### 3) Brutally reduce JS on mobile
WP Rocket → **File Optimization**:
– ✅ **Load JavaScript deferred**
– ✅ **Delay JavaScript execution**
– If something breaks (menus, above-the-fold sliders), add minimal exclusions in **Delay JS** (example patterns):
– `jquery.min.js`
– `jquery-migrate.min.js`
– your theme’s main JS if it controls the header menu right away
Keep analytics/chat **NOT** excluded so they *stay* delayed.

### 4) Strip unused CSS
– WP Rocket → **Remove Unused CSS** (not just critical CSS). Use **Safe Mode** if needed.
– If a component loses styles, exclude its stylesheet handle or a selector pattern in RUCSS exclusions.

### 5) Fonts (often a silent LCP/INP killer)
– Self-host Google Fonts (WP Rocket → **Optimize Google Fonts**) and ensure `font-display: swap`.
– **Preload** only the 1–2 **WOFF2** files used above-the-fold (regular + bold). Remove extra weights/italics.
– Avoid icon fonts; switch to inline SVG where possible.

### 6) Images & iframes
– WP Rocket → **LazyLoad** images & iframes, and **Replace YouTube iframe with preview image**.
– Ensure **proper sizes/srcset** on images. Kill carousels in the hero if you can (static hero is cheaper).

### 7) Kill WooCommerce cart fragments off product/listing pages

add_action('wp_enqueue_scripts', function () {
  if (function_exists('is_cart') && function_exists('is_checkout') && !is_cart() && !is_checkout()) {
    wp_dequeue_script('wc-cart-fragments');
  }
}, 99);

### 8) Third-party scripts discipline
– Move pixels/chats/heatmaps into GTM with **consent-based** or **interaction-based** triggers.
– Use WP Rocket’s **Delay JS** to postpone them until user interaction.

### 9) Theme/builder specifics
– Remove heavy sliders/animations above the fold.
– Avoid massive CSS frameworks if your builder already ships CSS.
– Split long pages into sections and add `content-visibility: auto;` to below-the-fold containers to cut main-thread work.

### 10) Server & plugin hygiene
– PHP 8.2/8.3, OPcache enabled, HTTP/2/3.
– Trim heavy plugins (A/B testing, visual builders you’re not using, multiple SEO/analytics overlaps).
– Don’t run two optimizers at once (e.g., WP Rocket **and** another optimizer) for the same task.

—

If you share your URL or a PSI link, I’ll pinpoint the exact LCP element, broken scripts to exclude from “Delay JS,” and which CSS/JS files are bloating mobile. Otherwise, applying the 10 steps above typically moves mobile into the 70–90 range on most WP stacks.

### 1) Check prerequisites
– Your domain must be on Cloudflare **nameservers** and orange-cloud proxied.
– On **Free** plan you need to **purchase APO** first; on **Pro+** you can enable it directly. citeturn2view0

### 2) Install the official Cloudflare plugin (in wp-admin)
1. Plugins → **Add New** → search **Cloudflare**.
2. Click **Install Now** → **Activate**. citeturn2view0

### 3) Create a Cloudflare API Token (dashboard)
1. Cloudflare Dashboard → **My Profile** → **API Tokens** → **Create Token**.
2. Choose the **WordPress** template → **Create Token** → **Copy** the token. citeturn2view0

### 4) Connect the plugin & enable APO
1. In wp-admin → **Plugins → Cloudflare → Settings**.
2. Choose **Sign in with existing account**, enter your **email** + **API Token** → **Save API Credentials**.
3. Click **Apply recommended settings**.
4. Toggle **Automatic Platform Optimization** → **On**. citeturn2view0

### 5) Verify APO is really working
Use your browser DevTools (Network → select the HTML document) or run:

curl -svo /dev/null -A "CF" 'https://YOURDOMAIN.com/' -H 'accept: text/html' 2>&1 | grep 'cf-cache-status|cf-edge|cf-apo-via'

You should see:
– `cf-cache-status: HIT`
– `cf-apo-via: tcache`
– `cf-edge-cache: cache,platform=wordpress` citeturn3view0

### 6) WP Rocket compatibility tip
WP Rocket works with APO, but you **must** have the **official Cloudflare plugin connected**. Cache purges will sync automatically. If you keep WP Rocket’s minify, disable Cloudflare Auto-Minify to avoid double-processing. citeturn0search9

If you want, share a URL and I’ll confirm the headers are correct and suggest any APO settings (e.g., “Cache by device type”) for your setup.