easystrapper (for youtube)

OndryGames12
2024-08-13T22:16:10Z

Balanced YouTube loading optimizations with lazy loading, smart preloading, hover previews, and scrubbing control.

EasyStrapper v2: YouTube Loading Optimizer

Overview

EasyStrapper v2 is an advanced Tampermonkey script that accelerates YouTube’s browsing experience by optimizing when and how resources load. It combines smart thumbnail handling (lazy loading + upgrading quality near the viewport), persistent preloading, hover previews, network connection hints, and UI “trims” that reduce unnecessary page work—all while continuously adapting to YouTube’s dynamically injected content.

What’s New in This Release

This release expands beyond basic lazy loading and script deferral with:

Hover preview thumbnails (animated preview on hover with a short delay)

Scrubbing control (reduces “scrub”/animated thumbnail behavior offscreen)

Network preconnect + DNS hints (faster connections to YouTube image/CDN hosts)

Persistent preload cache (remembers preloaded assets during the session)

UI trims (optional removal of miniplayer, related sidebar, skeletons, shimmer effects)

Prefetch trimming (removes unrelated watch-page prefetch hints)

Continuous optimization loop (interval + scroll-triggered refresh + MutationObserver for new content)

Static UI image preloading (avatars, logos, guide icons, etc.)

Idle-time script preloading (preloads a small number of scripts during idle time)

Features

1. Smart Thumbnail Loading (Lazy + Upgrade)

What It Does: Thumbnails are tuned for low-priority loading initially, then upgraded to higher quality when they approach/enter the viewport.

Benefit: Faster initial load with crisp thumbnails exactly when you need them.

2. Near-Viewport Thumbnail Preloading

What It Does: Preloads high-quality thumbnail images when they’re close to appearing (using a generous “preload margin”).

Benefit: Reduces “pop-in” and makes scrolling feel instant.

3. Persistent Session Preload Cache

What It Does: Stores a session-level record of recently preloaded URLs (via sessionStorage) to avoid redundant preloads.

Benefit: Smoother navigation within the same session, less repeated network work.

4. Hover Preview Thumbnails

What It Does: After a short hover delay, swaps the thumbnail to YouTube’s preview WebP (when available) and preloads it.

Benefit: Quick video “peek” without clicking, while still keeping bandwidth controlled.

5. Scrubbing / Animated Thumbnail Softening

What It Does: If an offscreen thumbnail is using animated/scrub formats, it’s replaced with a static high-quality thumbnail.

Benefit: Less background network activity and reduced distraction/performance cost.

6. Network Connection Hints

What It Does: Adds preconnect and dns-prefetch hints for key YouTube hosts (e.g., i.ytimg.com).

Benefit: Faster image and resource fetches by reducing connection setup overhead.

7. Idle-Time Script Preloading

What It Does: Preloads a small set of script resources during idle time (requestIdleCallback fallback supported).

Benefit: Helps smooth out later interactions without blocking initial render.

8. Static UI Image Preloading

What It Does: Preloads key “chrome” images (avatars, guide icons, top bar/logo/search UI assets).

Benefit: Faster UI rendering and fewer delayed icon/avatar loads.

9. Dynamic Content Handling (Always-On)

What It Does: Uses a MutationObserver to detect newly injected nodes and re-apply optimizations automatically.

Benefit: Works consistently as you scroll, browse, and navigate across YouTube.

10. Continuous Optimization (Interval + Scroll)

What It Does: Periodically re-checks and optimizes the page, plus triggers optimization on scroll in a throttled way.

Benefit: Keeps performance benefits active even as YouTube changes the DOM constantly.

11. Optional UI Trims

What It Does (configurable):

Disable miniplayer

Hide related sidebar

Remove skeleton loaders

Disable shimmer animations

Benefit: Less UI noise and fewer expensive visual effects; can reduce CPU/GPU churn.

12. Prefetch Hint Trimming

What It Does: Removes prefetch/prerender/preload(fetch) hints for unrelated watch pages.

Benefit: Prevents wasted bandwidth and background loading you didn’t ask for.

How It Works

On page load and YouTube SPA navigations (yt-navigate-finish), EasyStrapper:

1. Applies network hints to speed up future requests.

2. Injects optional UI trims to reduce extra rendering/animation cost.

3. Tunes images globally (lazy loading, async decoding, low fetch priority).

4. Observes thumbnails with IntersectionObservers:

Near viewport → preload the high-quality thumbnail

In viewport → upgrade thumbnail to high quality and raise priority

Offscreen → soften scrub/animated previews back to static

1. Preloads key static UI images (avatars, icons, topbar assets).

2. Enables hover previews with a configurable hover delay.

3. Keeps optimizing continuously via MutationObserver + interval refresh + scroll triggers.

4. Persists preload history in sessionStorage to reduce duplicate work during the session.

Why Use EasyStrapper?

Faster Browsing

Less upfront loading, fewer wasted requests, and smarter preloading makes Home/Search/Subscriptions feel snappier.

Smoother Scrolling

Preloading thumbnails before they appear reduces jank and “blank” placeholders while you scroll.

Reduced Background Noise

Optional UI trims and scrub softening reduce unnecessary animations and background network churn.

Better Use of Bandwidth

Prefetch trimming + lazy loading ensures fewer “guessy” downloads and more intentional resource use.