#WebPerfTip

Joan León

@nucliweb.net

6 months ago

GitHub Actions bot comment showing that images were automatically compressed by Calibre’s image-actions. The comment reports a 47.1% reduction in image size, saving 104.46 KB. A table displays one example file (‘Screen Shot 2020-09-17 at 3.29.33 pm.png’) reduced from 221.87 KB to 117.41 KB. It notes that 348 images did not require optimisation, and includes a ‘View diff’ link for visual comparison.

#WebPerfTip

If you need a GitHub Action to automatically compresses JPEGs, PNGs and WebPs in pull requests, IMHO this is the best option

#WebPerf #ImagePerf #PerfTools #Image

Joan León

@nucliweb.net

8 months ago

Screenshot of an SVG file that includes an embedded image using base64 encoding. The image is inserted directly within the <image> tag using the xlink:href attribute, rather than linking to an external file. This means the entire image is stored inside the SVG as base64 data.

#WebPerfTip Avoid embedding raster images directly in SVGs

ℹ️ In this case, the image is a vector graphic

#WebPerf #Perfomance #WPO #ImagePerf

Joan León

@nucliweb.net

10 months ago

A data visualization titled “Interaction to Next Paint (INP) by INP Element Selector” shows how responsive different page elements are based on user interactions like clicks or keypresses. The table lists various INP element selectors on the left, with columns for “% of Page Views,” “Interaction to Next Paint,” “Input Delay,” “Processing Time,” and “Presentation Delay.” • The top element, #search-form, accounts for 63.6% of page views and has an INP of 960ms. • Other elements, shown with long, complex CSS selectors, have lower page view percentages (around 2%–3%) but often higher INP values, such as 1104ms and 1016ms. • Delays are broken down into input, processing, and presentation times, with values color-coded for severity (red indicating worse performance). • A pink border highlights the list of detailed selectors on the left side.

#WebPerfTip RUM's web performance tools help us identify performance issues; please use IDs on the most important elements (elements that can potentially affect the UX) to assist us in debugging web performance

#WebPerf #Performance #WebPerfTools

Joan León

@nucliweb.net

10 months ago

Example showing the correct and incorrect use of <link> tags for preconnect and DNS prefetch. “Do”: Use two separate link tags: <link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com"> “Don’t”: Combine both values in one tag: <link rel="preconnect dns-prefetch" href="http://example.com"> Explanation: Combining preconnect and dns-prefetch in a single tag causes a Safari bug where preconnect gets cancelled. Use separate tags to safely implement the fallback.

#WebPerfTip If you use "rel=dns-prefetch" to support older browsers, use separate link tags to safely implement the fallback.

⚠️ Putting "dns-prefetch" and "preconnect" in the same <link> causes a Safari bug where "preconnect" gets cancelled.

#WebPerf

Joan León

@nucliweb.net

2 years ago

📣 #WebPerfTip
Avoid unnecessarily large images

Serving images that are too large leads to slower requests and wasted bandwidth

"If an image is served as 1000x1000px but is rendered in a 500x500px box, it's 4 times larger than necessary" - DebugBear