Short answer
We convert images to modern formats with fallbacks, serve sizes that match the screen, prioritize the main image and lazy-load the rest. For scripts, we defer or delay anything not needed for the first view, remove unused code and move non-essential tags out of the critical path.
Why images and scripts come first
On many pages the biggest file is an image, and the biggest source of delay after a tap is JavaScript. HTTP Archive's 2024 Web Almanac, as cited by web.dev, found that 73% of mobile pages have an image as their LCP element [1]. JavaScript affects both loading and responsiveness, because the browser has to download, parse and run it on the main thread before it can respond to the visitor. Working on both at once usually produces the clearest improvement for the effort.
Image work
Formats
MDN recommends that "for raster images, prefer WebP or AVIF" because they generally compress better than PNG, JPEG and GIF [2]. Its figures put lossy WebP at 25 to 35% smaller than JPEG at similar quality, and lossy AVIF at around 50% smaller [2]. Because older browsers vary, MDN advises providing a fallback using the picture element [2]. We generate the modern formats, keep a JPEG or PNG fallback, and use SVG for logos and icons where possible.
Sizes
A 2400-pixel photo shown in a 400-pixel card wastes bandwidth on every visit. web.dev's guide on responsive images says serving desktop-sized images to mobile devices can use two to four times more data than needed [3]. We create several widths and use srcset and sizes so the browser can choose the right one.
Priority and lazy loading
The main image should be found early and fetched with high priority; everything below the first screen can wait. We add fetchpriority to the likely LCP image, preload it if it is referenced only from CSS, and lazy-load images further down the page. We never lazy-load the LCP image, following web.dev's guidance [4]. Shopify's theme documentation gives the same rule: apply lazy loading "only to images outside the initial viewport" [5].
Dimensions
Every image gets width and height attributes or a CSS aspect ratio, so the browser reserves space and the layout does not jump when the file arrives [6].
Script work
Load less, later
We list every script on your key templates, who added it and what it does. Scripts needed for the first view stay; the rest are deferred, delayed until interaction, or loaded only on the pages that use them. Shopify's guidance sums up the aim as "load only what's needed, only when it's needed" [5].
Third-party tags
Analytics, chat, review widgets and advertising pixels often account for more main-thread time than the site's own code. web.dev recommends that unused tags "should be paused or removed rather than blocked through use of a trigger exception", and that non-essential tags fire after the window has loaded [7]. The same article notes a correlation between larger tag managers and poorer INP [7]. We review the container with whoever owns marketing tracking, so nothing important disappears.
Breaking up long tasks
Where your own code does a lot of work in one go, for example a large search filter or a page builder's startup script, we split it into smaller tasks and yield to the main thread between them [8].
What you receive
- A before and after record of image weight and script time on each template, with test dates.
- A short list of the image settings used, so future uploads follow the same rules.
- A script inventory with an owner and a reason for each tag, plus what was removed or delayed.
- Notes for your team on uploading images in future, so the gains last.
Things we check before removing anything
Removing a script can break tracking, consent tools or features that are only used on one page. We confirm each change with you, test conversions and forms on staging, and keep a record of what was changed so it can be reversed if needed.
A typical before and after
As an illustration, consider a fictional product template. Before: the main product photo is a 2.4 MB JPEG at 3000 pixels wide, served to every device; eight images further down the page load immediately; a review widget, a chat tool and two advertising pixels all start during load. After: the main photo is served as AVIF or WebP at a width matched to the screen, prioritized and never lazy-loaded; images below the first screen load as they approach the viewport; the review widget loads when its section is reached, the chat tool after the visitor interacts, and the pixels after the window has loaded. Nothing the visitor uses has been removed. The page simply asks for less, in a better order.
Fonts count too
Web fonts are often overlooked in image and script work, but they compete for the same bandwidth early in the page load. We check how many families and weights load, whether they use WOFF2, and whether the most important ones are preloaded. web.dev's font guidance favors WOFF2, subsetting where the license allows and fewer font files overall [9]. Font swaps can also shift text, which feeds into Cumulative Layout Shift [6], so font changes are tested for stability as well as speed.
Platform notes
On WordPress, image work usually means checking the sizes WordPress generates and making sure the theme uses them, plus converting uploads automatically. On Shopify, the platform handles much of the image delivery, so the work concentrates on how the theme requests images and on app scripts [5]. On WooCommerce, the store's own guidance covers formats, compression, lazy loading and sizes [10]. On custom sites, we can add build steps that generate image sizes and formats automatically.
Questions about image and script work
Will modern image formats look worse?
Not at sensible settings. We compare output visually on key images before release, and you can ask for a higher quality setting on photography that matters to your brand.
Do I need an image plugin or service?
Not always. Some platforms and CDNs convert and resize images automatically. We check what you already have before adding anything new.
Can you remove a marketing tag we no longer use?
Yes, once whoever owns the tag confirms it. We pause it first so it can be restored quickly if someone still relies on it.
Sources
Opened and checked on November 3, 2026.
- The most effective ways to improve Core Web Vitals, web.dev. Primary documentation (cites HTTP Archive and Chrome data), last updated October 31, 2024.
- Image file type and format guide, MDN Web Docs. Reference documentation, last updated October 8, 2026.
- Serve responsive images, web.dev. Primary documentation, last updated November 5, 2018.
- Optimize Largest Contentful Paint, web.dev. Primary documentation, last updated March 31, 2025.
- Performance best practices for Shopify themes, Shopify developer documentation. Primary platform documentation, checked November 3, 2026.
- Optimize Cumulative Layout Shift, web.dev. Primary documentation, last updated February 7, 2025.
- Best practices for tags and tag managers, web.dev. Primary documentation, last updated August 24, 2022.
- Optimize Interaction to Next Paint, web.dev. Primary documentation, last updated September 2, 2025.
- Best practices for fonts, web.dev. Primary documentation, last updated October 4, 2022.
- How to optimize performance for WooCommerce stores, WooCommerce developer docs. Primary platform documentation, checked November 3, 2026.