Your cart is currently empty!
Tag: gst reporting
WP Speed Tip #3 – Use WebP Instead of JPG or PNG
Why It Matters
JPEGs and PNGs are old school. WebP images are 25% to 40% smaller than JPG/PNG — with the same quality.
That means:
- Your site loads faster
- You reduce bandwidth
- You score higher on PageSpeed and Core Web Vitals
Most modern browsers (including Chrome, Firefox, Safari, Edge) fully support WebP. There’s no excuse now.
The Fix: Convert Images to WebP Before Upload
Tools to Convert:
- Squoosh (again, the best)
- Drag your image → select WebP → adjust quality (~75%)
- ImageMagick CLI (for batch processing):
magick input.jpg -quality 75 output.webpWordPress Plugin (if you must):
- WebP Express (lightweight)
- ShortPixel (for automated bulk conversion)
Folder Tip: Keep Originals If Needed
Store original JPGs in a
/raw-assetsfolder. Only upload the WebP version to WordPress. That way, you keep a clean media library.What WebP Does Technically:
- Uses both lossy and lossless compression
- Supports transparency (like PNG)
- Creates smaller files with faster decode time
Real-World Impact:
Format Size Time to Load PNG 1.2MB 3.1 sec JPG 850KB 2.2 sec WebP 490KB 1.0 sec Source: GTmetrix tests on same image. Got WooCommerce?
If you’re running a product-heavy store, converting images to WebP alone can cut 1–2 seconds off load time.
Bookmark this tip. Tomorrow:
“Tip #4 – Install LiteSpeed Cache (or WP Super Cache) for Serious Gains”WP Speed Tip #2 – Resize Images Before Uploading
Why It Matters
Uploading raw 3000px or 5MB images straight from your phone or DSLR? You’re tanking your site speed.
Even one oversized image can kill your PageSpeed score and frustrate mobile users on slow networks.
The Fix: Resize Before Upload
📏 Recommended Image Sizes:
Use Case Max Width (px) Blog content 1200px Full-width banner 1920px Product image 800–1200px Thumbnails 400px or less How to Resize (Free Tools):
On Desktop:
- Squoosh (best pick)
→ Resize + convert to WebP + compress - GIMP / Photoshop
→ Export at correct dimensions and quality (70–80%)
On Mobile:
- Use “Photo Resizer” or “Lit Photo” (Android) / “Image Size” (iOS)
Pro Workflow:
- Export all images as
.webpfrom Squoosh. - Set width ≤ 1200px for main images.
- Compress to <200 KB (unless high-detail needed).
- Only upload resized + optimized images.
What It Actually Does:
- Reduces load time dramatically (esp. on mobile)
- Improves Google PageSpeed score
- Lowers bounce rate from users who give up on slow sites
Extra Tip:
If you already uploaded big images, use a plugin like:
- Regenerate Thumbnails (only when needed)
- ShortPixel (free 100 images/month, WebP support)
Then fix future uploads at source — no plugin needed.
Bookmark this tip. Tomorrow we tackle:
“Tip #3 – WebP: The Image Format That Speeds Everything Up”- Squoosh (best pick)
WP Speed Tip #1 – Ditch the Page Builder – Use Gutenberg Blocks Instead
Most WordPress sites are slow because they’re running 500KB+ of CSS and JavaScript they never asked for. The culprit? Page builders like Elementor, Divi, or WPBakery. You don’t need them anymore.
The Fix:
Use the native Block Editor (Gutenberg) + free block patterns + minimal themes (GeneratePress, Blocksy, Kadence).
You’ll save:
- 500KB+ of CSS/JS
- 3–5 external font or script calls
- Tons of DOM elements that slow rendering
Why It Works:
Modern themes + Block Editor can now build headers, footers, product pages, even dynamic layouts. The difference? They use native WordPress code, not bloated frameworks.
Extra Tip:
Use the “Patterns” tab in the Editor. It’s like drag-and-drop without the lag.
Bookmark this. Tomorrow’s tip: “How to Resize Images Before Uploading — The Right Way”
© 2025 the-playbook.in. All rights reserved.