Blog

Inside the Minds of the Machine

Talking Tech, WordPress Tips and Tricks

Front-End performance goals when building new WordPress websites

thirteen-hp

From the start of the development process we must think about website speed. It’s one of the most important features of your new site especially now that search engines are ranking faster and properly optimized web sites higher.

Here are some of the best practices we use when developing light weight WordPress themes.

HTML

Some things are fairly straight forward like using the latest HTML5 tags and conventions, limiting reliance on JS for anything that can be done natively by the browser, and planning out the big picture from the start so you can best account for elements that can be re-usable across your templates.

CSS

I like to start with a “reset stylesheet” like normalize. This helps to equalize browser rendering behavior. You can expect your CSS styles to layout mostly the same across browsers after applying the resets. When writing CSS use shorthand when naming your CSS selectors, use descendant selectors whenever possible, and group selectors with common declarations. I like to use SCSS to compile and compress CSS files. The combined SCSS file may be a little larger than separate viewport files, but the tradeoff is worth it as it greatly eases coding. Since the CSS only needs to be downloaded once by the browser it’s not a performance hit on subsequent page views. A combined file is also beneficial in that it’s less HTTP requests.

IMAGES

Add a WP filter for JPG compression levels. 70% is generally good enough. Use JPGs for photographs, use PNGs for theme components like logos and navigational elements. Only load images that are necessary with responsive design. (Example: don’t load a page’s background image if it isn’t visible at the current viewport size.) TinyPNG and TinyJPG are great online tools for compressing image assets.

WORDPRESS QUERIES

We use the debugging tools of W3 Total Cache to check our pages “total queries” and “total query time”. The acceptable range of queries for optimal page performance falls somewhere between 40 and 150. The fewer the number of queries per page the better the site’s performance will be. Total query time should always be under 0.2 Seconds. Don’t forget to turn debugging off when the site moves to production.

WORDPRESS PLUGINS

Plugins can be serious server and browser resource hogs, they can also inject all kinds of scripts and styles into your page source. Limit the use of new plugins which aren’t ones you regularly use, don’t add new plugins to your site without vetting them for performance and security on development servers before deploying to a production server. When making your own plugins, make sure they don’t enqueue scripts/styles on pages when they’re not needed. For example, if your plugin is a short code function you can test for the presence of the short code on the page/post before enqueuing. If you don’t need the CSS or JS to be on every page, don’t add it.

CDN RESOURCES

Use CDN hosted scripts/styles when possible. You can enqueue CDN hosted versions of things like Font Awesome and jQuery. This is really helpful because the visitor probably already has the CDN version cached on their device from visiting another popular website. When we embed it locally from our server the user’s device needs to download the resource again for every theme we place it in. A great example of this is Font Awesome which comes in around 100-400k depending on your device, it’s nice to avoid that download when possible.

THIRD PARTY SCRIPTS / WIDGETS

Third party scripts/trackers/widgets can slow the rendering of pages, avoid adding ones that aren’t necessary to our page. Sometimes third party scripts can block the rest of the page from loading until they have completely rendered. Be sure to test performance. When possible use “defer” or “async” loaded versions of the scripts.

ADDITIONAL TIPS

  • Bounce rates go up when page load times are slow. Ideally all pages should load in less than 2 seconds.
  • Google ranks faster and properly optimized mobile sites higher. New sites and template revisions should be run through Google’s PageSpeed Insights tool for tips on improvements that could be made to your page based upon their ranking algorithms.
  • Make design/content changes in order achieve optimal page load times.
  • Check to see if your pages are mobile friendly with Google’s Mobile-Friendly Test.
  • Use your favorite browsers developer tools “network” and “timeline” tabs to see detailed page loading times.