Recommendations
- Lighthouse
-
- Metrics
- Audits
-
- Avoid an excessive DOM size
- Avoid chaining critical requests
- Avoid CSS @import
- Avoid document.write()
- Avoid enormous network payloads
- Avoid large layout shifts
- Avoid long main-thread tasks
- Avoid multiple page redirects
- Avoid non-composited animations
- Avoid serving legacy JavaScript to modern browsers
- Avoid unload event listeners
- Combine images using CSS sprites
- Defer offscreen images
- Don't lazy load Largest Contentful Paint image
- Efficiently encode images
- Eliminate render-blocking resources
- Enable Keep-Alive
- Enable text compression
- Ensure text remains visible during webfont load
- Keep request counts low and transfer sizes small
- Lazy load third-party resources with facades
- Minify CSS
- Minify JavaScript
- Minimize main-thread work
- Preconnect to required origins
- Preload key requests
- Preload Largest Contentful Paint image
- Properly size images
- Reduce initial server response time
- Reduce JavaScript execution time
- Reduce the impact of third-party code
- Reduce unused CSS
- Reduce unused JavaScript
- Remove duplicate modules in JavaScript bundles
- Replace large JavaScript libraries with smaller alternatives (deprecated)
- Serve images in next-gen formats
- Serve static assets with an efficient cache policy
- Use a <meta name="viewport"> tag with width or initial-scale
- Use a Content Delivery Network (CDN)
- Use explicit width and height on image elements
- Use HTTP/2 for all resources
- Use passive listeners to improve scrolling performance
- Use video formats for animated content
- User Timing marks and measures
- PageSpeed (Legacy)
-
- Avoid a character set in the meta tag
- Avoid bad requests
- Avoid CSS @import
- Avoid CSS expressions (deprecated)
- Avoid document.write (deprecated)
- Avoid Flash on mobile webpages (deprecated)
- Avoid landing page redirects
- Avoid Plugins (deprecated)
- Combine external CSS (deprecated)
- Combine external JavaScript (deprecated)
- Combine images using CSS sprites
- Defer loading of JavaScript (deprecated)
- Defer parsing of JavaScript
- Enable compression
- Enable Keep-Alive
- Improve server response time (deprecated)
- Inline small CSS
- Inline small JavaScript
- Leverage browser caching
- Leverage proxy caching (deprecated)
- Make landing page redirects cacheable (deprecated)
- Minify CSS
- Minify HTML (deprecated)
- Minify JavaScript
- Minimize cookie size (deprecated)
- Minimize DNS lookups (deprecated)
- Minimize redirects
- Minimize request size
- Optimize images
- Optimize the order of styles and scripts (deprecated)
- Parallelize downloads across hostnames (deprecated)
- Prefer asynchronous resources
- Put CSS in the document head
- Remove query strings from static resources (deprecated)
- Remove unused CSS (deprecated)
- Serve resources from a consistent URL
- Serve scaled images
- Serve static content from a cookieless domain (deprecated)
- Specify a cache validator
- Specify a character set early
- Specify a Vary: Accept-Encoding header (deprecated)
- Specify a viewport for mobile browsers (deprecated)
- Specify image dimensions
- Use an application cache (deprecated)
- Use efficient CSS selectors (deprecated)
- YSlow (Legacy)
-
- Add Expires headers
- Avoid AlphaImageLoader filter
- Avoid CSS expressions
- Avoid empty src or href
- Avoid HTTP 404 (Not Found) error
- Avoid URL redirects
- Compress components
- Configure entity tags (ETags)
- Do not scale images in HTML
- Make AJAX cacheable
- Make favicon small and cacheable
- Make fewer HTTP requests
- Make JavaScript and CSS external
- Minify JavaScript and CSS
- Put CSS at the top
- Put JavaScript at bottom
- Reduce cookie size
- Reduce DNS lookups
- Reduce the number of DOM elements
- Remove duplicate JavaScript and CSS
- Use a Content Delivery Network (CDN)
- Use cookie-free domains
- Use GET for AJAX requests
YSlow: Do not scale images in HTML
Overview
Scaling images in HTML can result in unnecessary bandwidth wasted downloading large images.
How does your site score on this recommendation?
Details from Yahoo!
Web page designers sometimes set image dimensions by using the width and height attributes of the HTML image element. Avoid doing this since it can result in images being larger than needed.
Summary
ImagesLow
Moderate
YSlow recommends:
For example, if your page requires image myimg.jpg which has dimensions 240x720 but displays it with dimensions 120x360 using the width and height attributes, then the browser will download an image that is larger than necessary.
Resize your images in an image editor to the actual size you need.