Lighthouse Performance Tips & Tricks for Your Website

Lighthouse – WordPress Performance & Security Plugin

This is an exhaustive list of technical tips and tricks that will help improve your page speed and increase your performance score.

DNS Lookup & Connection

  1. Check your DNS records and remove any that you don’t need. Use a DNS server, such as Cloudflare, to improve the DNS lookup speed.

TTFB (Time To First Byte)

  1. Upgrade your server software (Apache, Nginx, Litespeed, IIS) to the latest available version.
  2. Upgrade your server PHP to the latest available version (8+).
  3. Upgrade your server database engine (MySQL, MariaDB, Percona, SQLite) to the latest available version.
  4. Create a static robots.txt file to avoid WordPress initializing every time a bot requests it.
  5. Create a static favicon.ico file to avoid slowdowns every time the browser requests it.

Set up a backup server before taking the steps below.

Response Time, Page Speed & Performance

  1. Upgrade your WordPress plugins to the latest available version.
  2. Upgrade your WordPress CMS to the latest available version.
  3. Upgrade your WordPress theme to the latest available version.
  4. Do not use a redirection plugin, if possible. Set your redirects server-side, in your .htaccess file or your Nginx configuration file.
  5. Make sure your database engine is InnoDB.
  6. Make sure your database encoding/collation is utf8mb4.
  7. Increase your WordPress memory constant to 128M+.
  8. Consider disabling revisions – WP_POST_REVISIONS.
  9. Consider disabling the trash – MEDIA_TRASH and EMPTY_TRASH_DAYS.

See code samples inside your Lighthouse plugin → Tips & Tricks tab.

Assets & Resources

  1. Reduce the number of JavaScript resources – use Google Tag Manager to load all external tracking snippets, analytics and more.
  2. Optimize your theme to load all JavaScript resources in the footer.
  3. Reduce the number of JavaScript resources and CSS stylesheets by cleaning up your plugins, refactoring your website’s functionality or finding alternative plugins.
  4. Reduce the number of JavaScript resources and CSS stylesheets by combining them (either by refactoring your theme/plugins or by programmatically concatenating them).
  5. Minify your JavaScript resources and CSS stylesheets, either manually or by using Cloudflare.
  6. Load your custom fonts locally.
  7. Get rid of all unnecessary font subsets (based on your target audience’s language).
  8. Get rid of all font versions, except for WOFF2.
  9. Use resource hints and early hints.
  1. Use server caching (OPcache, XCache, Varnish, Redis, etc.).
  2. Use a caching plugin.

Prefetching

Because dns-prefetch resolves only the domain name but doesn’t preconnect to the remote server or preload the resource, it requires little bandwidth. However, it can significantly improve DNS latency — the total request-response time between the DNS server and the user’s browser.

You’ll only need to use dns-prefetch when the resource is hosted on a different domain, since you don’t need to resolve your own domain name. dns-prefetch is typically recommended when prefetching domain names for: web fonts, such as Google Fonts or custom CDN fonts, analytics scripts, scripts coming from third-party resources, social media widgets or any widget that loads third-party content via the <script> tag, resources hosted on a CDN.

Preconnecting

For the most part, you can use the preconnect resource hint for the same things as dns-prefetch. You should choose it only if you are sure the user will request the script, font, stylesheet, or other resource from the third-party server.

Since preconnect exchanges more data, it also needs more bandwidth. So you have to be more careful with it to avoid slowing down the page and wasting your user’s bandwidth with redundant data.

Be careful to not add too many resource hints, as they could quite easily negatively impact performance, especially on mobile.

Check the Using Resource Hints to Optimize WordPress Performance guide.

Content

  1. Get rid of your current page builder or reconsider its usability. Use the native WordPress block editor instead.
  2. Make sure all your images are lazy loaded.
  3. Replace your vector images and/or icons with inline SVG.
  4. Resize and compress your JPEG images.
  5. Use a third-party service (not a plugin) to optimize your images before uploading them.
  1. Remove (or disable) your lazy-loading plugin (or script). Modern browsers now include native lazy-loading.
  1. Check the WordPress Native Settings Optimization guide to squeeze even more speed from your WordPress site.

Error Logging

Stay on top of errors, warnings, and notices as they occur.

See all errors, warnings, and notices in a file generally called debug.log in wp-content folder. If Apache does not have write permissions, you may need to create the file first and set the appropriate permissions (e.g. 0666).

In order for errors to be logged, you need to edit your wp-config.php file.

See code samples inside your Lighthouse plugin → Tips & Tricks tab.

Find your error log (in document root or in wp-content directory):

Example #1: /home/user/example.com/debug.log
Example #2: /home/user/example.com/wp-content/debug.log

Other

The suggestions below might not apply to your website.

  1. Remove Google Analytics and replace it with a lighter solution, such as Active Analytics.
  2. Remove Google reCAPTCHA and replace it with Akismet or a lighter solution.