| render-blocking-resources - Eliminate render-blocking resources | |
|---|---|
| Lighthouse | Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles. Learn more. |
| WordPress | There are a number of WordPress plugins that can help you inline critical assets or defer less important resources. Beware that optimizations provided by these plugins may break features of your theme or plugins, so you will likely need to make code changes. |
| AMP | Use tools such as AMP Optimizer to server-side render AMP layouts. |
| Magento | Disable Magento's built-in JavaScript bundling and minification, and consider using baler instead. |
| uses-responsive-images - Properly size images | |
|---|---|
| Lighthouse | Serve images that are appropriately-sized to save cellular data and improve load time. Learn more. |
| WordPress | Upload images directly through the media library to ensure that the required image sizes are available, and then insert them from the media library or use the image widget to ensure the optimal image sizes are used (including those for the responsive breakpoints). Avoid using Full Size images unless the dimensions are adequate for their usage. Learn More. |
| Angular | Consider using the BreakpointObserver utility in the Component Dev Kit (CDK) to manage image breakpoints. Learn more. |
| AMP | The amp-img element supports the srcset attribute to specify which image assets to use based on the screen size. Learn more. |
| offscreen-images - Defer offscreen images | |
|---|---|
| Lighthouse | Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive. Learn more. |
| WordPress | Install a lazy-load WordPress plugin that provides the ability to defer any offscreen images, or switch to a theme that provides that functionality. Also consider using the AMP plugin. |
| AMP | Ensure that you are you using valid amp-img tags for your images which automatically lazy-load outside the first viewport. Learn more. |
| Magento | Consider modifying your product and catalog templates to make use of the web platform's lazy loading feature. |
| unminified-css - Minify CSS | |
|---|---|
| Lighthouse | Minifying CSS files can reduce network payload sizes. Learn more. |
| WordPress | A number of WordPress plugins can speed up your site by concatenating, minifying, and compressing your styles. You may also want to use a build process to do this minification up-front if possible. |
| React | If your build system minifies your CSS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. Learn more. |
| Angular | If you are using Angular CLI, ensure that builds are generated in production mode. Learn more. |
| AMP | Refer to the AMP documentation to ensure all your styles are supported. |
| Magento | Enable the "Minify CSS Files" option in your store's Developer settings. Learn more. |
| unminified-javascript - Minify JavaScript | |
|---|---|
| Lighthouse | Minifying JavaScript files can reduce payload sizes and script parse time. Learn more. |
| WordPress | A number of WordPress plugins can speed up your site by concatenating, minifying, and compressing your scripts. You may also want to use a build process to do this minification up front if possible. |
| React | If your build system minifies your JS files automatically, ensure that you are deploying the production build of your application. You can check this with the React Developer Tools extension. Learn more. |
| Angular | If you are using Angular CLI, ensure that builds are generated in production mode. Learn more. |
| Magento | Use Terser to minify all JavaScript assets outfrom from static content deployment, and disable the built-in minification feature. |
| unused-css-rules - Remove unused CSS | |
|---|---|
| Lighthouse | Remove dead rules from stylesheets and defer the loading of CSS not used for above-the-fold content to reduce unnecessary bytes consumed by network activity. Learn more. |
| WordPress | Consider reducing, or switching, the number of WordPress plugins loading unused CSS in your page. To identify plugins that are adding extraneous CSS, try running code coverage in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the stylesheet. Look out for plugins that have many stylesheets in the list which have a lot of red in code coverage. A plugin should only enqueue a stylesheet if it is actually used on the page. |
| unused-javascript - Remove unused JavaScript | |
|---|---|
| Lighthouse | Remove unused JavaScript to reduce bytes consumed by network activity. Learn more. |
| WordPress | Consider reducing, or switching, the number of WordPress plugins loading unused JavaScript in your page. To identify plugins that are adding extraneous JS, try running code coverage in Chrome DevTools. You can identify the theme/plugin responsible from the URL of the script. Look out for plugins that have many scripts in the list which have a lot of red in code coverage. A plugin should only enqueue a script if it is actually used on the page. |
| React | If you are not server-side rendering, split your JavaScript bundles with React.lazy(). Otherwise, code-split using a third-party library such as loadable-components. |
| Angular | If you are using Angular CLI, include source maps into your production build to inspect your bundles. Learn more. |
| Magento | Disable Magento's built-in JavaScript bundling. |
| uses-optimized-images - Efficiently encode images | |
|---|---|
| Lighthouse | Optimized images load faster and consume less cellular data. Learn more. |
| WordPress | Consider using an image optimization WordPress plugin that compresses your images while retaining quality. |
| Magento | Consider searching the Magento Marketplace for a variety of third party extensions to optimize images. |
| uses-webp-images - Serve images in next-gen formats | |
|---|---|
| Lighthouse | Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more. |
| WordPress | Consider using a plugin or service that will automatically convert your uploaded images to the optimal formats. |
| AMP | Consider displaying all your amp-img components in WebP formats while specifying an appropriate fallback for other browsers. Learn more. |
| Magento | Consider searching the Magento Marketplace for a variety of third-party extensions to leverage newer image formats. |
| uses-text-compression - Enable text compression | |
|---|---|
| Lighthouse | Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. Learn more. |
| WordPress | You can enable text compression in your web server configuration. |
| uses-rel-preconnect - Preconnect to required origins | |
|---|---|
| Lighthouse | Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. Learn more. |
| Magento | Preconnect or dns-prefetch resource hints can be added by modifying a themes's layout. |
| server-response-time - Initial server response time was short | |
|---|---|
| Lighthouse | Keep the server response time for the main document short because all other requests depend on it. Learn more. |
| WordPress | Themes, plugins, and server specifications all contribute to server response time. Consider finding a more optimized theme, carefully selecting an optimization plugin, and/or upgrading your server. |
| React | If you are server-side rendering any React components, consider using renderToNodeStream() or renderToStaticNodeStream() to allow the client to receive and hydrate different parts of the markup instead of all at once. Learn more. |
| Magento | Use Magento's Varnish integration. |
| redirects - Avoid multiple page redirects | |
|---|---|
| Lighthouse | Redirects introduce additional delays before the page can be loaded. Learn more. |
| React | If you are using React Router, minimize usage of the <Redirect> component for route navigations. |
| uses-rel-preload - Preload key requests | |
|---|---|
| Lighthouse | Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. Learn more. |
| Angular | Preload routes ahead of time to speed up navigation. Learn more. |
| Magento | <link rel=preload> tags can be added by modifying a themes's layout. |
| efficient-animated-content - Use video formats for animated content | |
|---|---|
| Lighthouse | Large GIFs are inefficient for delivering animated content. Consider using MPEG4/WebM videos for animations and PNG/WebP for static images instead of GIF to save network bytes. Learn more |
| WordPress | Consider uploading your GIF to a service which will make it available to embed as an HTML5 video. |
| AMP | For animated content, use amp-anim to minimize CPU usage while the content remains offscreen. |
| total-byte-weight - Avoids enormous network payloads | |
|---|---|
| Lighthouse | Large network payloads cost users real money and are highly correlated with long load times. Learn more. |
| WordPress | Consider showing excerpts in your post lists (e.g. via the more tag), reducing the number of posts shown on a given page, breaking your long posts into multiple pages, or using a plugin to lazy-load comments. |
| Angular | Apply route-level code-splitting to minimize the size of your JavaScript bundles. Also, consider precaching assets with the Angular service worker. |
| Magento | Disable Magento's built-in JavaScript bundling and minification, and consider using baler instead. |
| uses-long-cache-ttl - Serve static assets with an efficient cache policy | |
|---|---|
| Lighthouse | A long cache lifetime can speed up repeat visits to your page. Learn more. |
| WordPress | Read about Browser Caching in WordPress. |
| dom-size - Avoids an excessive DOM size | |
|---|---|
| Lighthouse | A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more. |
| React | Consider using a “windowing” library like react-window to minimize the number of DOM nodes created if you are rendering many repeated elements on the page. Learn more. Also, minimize unecessary re-renders using shouldComponentUpdate, PureComponent, or React.memo and skip effects only until certain dependencies have changed if you are using the Effect hook to improve runtime performance. |
| Angular | Consider virtual scrolling with the Component Dev Kit (CDK) if very large lists are being rendered. Learn more. |
| critical-request-chains - Avoid chaining critical requests | |
|---|---|
| Lighthouse | The Critical Request Chains below show you what resources are loaded with a high priority. Consider reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load. Learn more. |
| Magento | If you are not bundling your JavaScript assets, consider using baler. |
| user-timings - User Timing marks and measures | |
|---|---|
| Lighthouse | Consider instrumenting your app with the User Timing API to measure your app's real-world performance during key user experiences. Learn more. |
| React | Use the React DevTools Profiler, which makes use of the Profiler API, to measure the rendering performance of your components. Learn more. |
| font-display - All text remains visible during webfont loads | |
|---|---|
| Lighthouse | Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading. Learn more. |
| Magento | Specify @font-display when defining custom fonts. |