Skip to content

Instantly share code, notes, and snippets.

@dotherightthing

dotherightthing/pagespeed-wordpress.md

Created November 1, 2018 11:02
Show Gist options
  • Save dotherightthing/d7fe8f6f20966245042698b71823df58 to your computer and use it in GitHub Desktop.
Save dotherightthing/d7fe8f6f20966245042698b71823df58 to your computer and use it in GitHub Desktop.
Download ZIP
[PageSpeed] WordPress Cheatsheet. #wordpress #performance
Raw
pagespeed-wordpress.md

PageSpeed

JavaScript

  1. load using official WordPress mechanism (wp_enqueue_script, $in_footer)
  2. use Autoptimize plugin to move any header scripts into the footer, and to concatenate all footer scripts into a single minified file. Don't exclude js/jquery/jquery.js. Note that files that are named *.min.js aren't (re)minified by Autoptimize.
  3. use vanilla JavaScript for essential page transformations, to bypass wait time for jQuery load and setup

CSS Stylesheets

  1. load using official WordPress mechanism (wp_enqueue_style)
  2. use Autoptimize plugin to concatenate all stylesheets into a single minified file. Note that files that are named *.min.css aren't (re)minified by Autoptimize.

Webfonts

  1. Use modpagespeed's Inline Google Fonts API CSS, if possible. This determines which font format is required by the browser.

Otherwise:

  1. use the Web Font Loader, with the asynchronous syntax
  2. use html hook to hide fonts during replacement, to prevent FOUC
  3. use html hook to control line-height during replacement, to prevent reflow

Images

  1. Run images through ImageOptim (free, MacOS), compress large JPEGs to 90%

Hosting

  1. Use dedicated rather than shared hosting, if possible
  2. Enable mod_pagespeed, if possible (Apache)
  3. Use a CDN if possible
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment