Page speed is a problem many developers face when designing unique and engaging sites. The balance between dynamic content and page render time is often difficult to find. Users increasingly have high expectations for site load time when viewing a page. In this article, we’ve put together a list of some key optimizations you can make to your site to help ensure it is able to render quickly for users.
In general, WordPress site performance can be broken down into two main segments:
- The amount of time it takes the server to generate the page
- The amount of time it takes the browser to download the page
In this blog post, we’ll be focusing on the things you can do to improve the render time of your page in the visitor’s browser. Specifically, the elements which might be causing your users to see a blank white screen before your site starts to show content (or “render”).
1. Leverage Browser Caching
When your web server has HTTP headers set up to specify cache expiration time, it also includes browser directives on how long the web page should be cached in your visitor’s browser. This tells your visitor’s browser to download the elements of your website (like CSS, JavaScript, and images) from their machine’s local disk rather than from the network. Since this means the browser has fewer network connections to make, this will help ensure your web page loads faster for them.
It’s also important to ensure your HTTP headers include an expiration date so the browser knows when to get the resources from the network as if they were new, rather than getting them from their local machine.
At WP Engine, we take care of this piece for you since our servers are already optimized to serve WordPress websites. By default, pages are set to expire every ten minutes, and static resources like images, CSS and JavaScript are set to expire every 30 days.
2. Enable GZIP Compression
GZIP compression, also known as “browser compression” is a way of compressing text-based content like your site’s code, into a more lightweight and easily-understandable set of characters for your browser to read.
If you host your site at WP Engine, our server configuration already handles GZIP compression for your website. However, if you host elsewhere you may want to use a plugin that helps optimize this for you, like W3 Total Cache or Check and Enable GZIP Compression. This can also be set in your site’s .htaccess file manually if you prefer.
Remember, GZIP Compression can only work on pages and files served from your site’s server. You cannot control whether external resources like ads, external web fonts, or external images are using GZIP.
3. combine and minify static resources
Minification and combining multiple static resources into one helps for a few reasons: the browser has fewer items to download, and the items that it does download are smaller. This equates to a faster page render time since the browser can download the page content faster.
There are several plugins available to help with optimizing these resources, but the ones we’ve seen work most successfully have been Better WordPress Minify, and Autoptimize. Both have the option to be used with a CDN URL as well so that these resources can be loaded from a server that’s geographically close to the end user.
4. Use a CDN
A CDN can help by loading your site’s static resources like images, CSS, and JavaScript from a network of servers located all around the world. This means when a user in Germany requests an image, it loads the static files from a CDN server closest to that user. CDN is especially important for sites with a worldwide audience.
At WP Engine, CDN is available for an extra cost on Personal-level plans and included on Professional and Business-level plans.
5. Compress Images
Unoptimized images can easily be the largest source of bloat in your site’s load time. You can use a page test like WP Engine’s Page Performance tool, or webpagetest.org to see a waterfall view of your site’s load time. If the longest-loading elements are images, or the tools recommend optimizing images, it may be time to look at an image compression plugin.
Two of the most common ones are WP Smush and EWWW Image Optimizer Cloud. These plugins both offer options for lossy compression, which allows you to compress the image size, while still retaining the same image quality. Not only does this help your page load faster, it also reduces bandwidth usage and helps increase functions like copying your site, or creating backups.
6. Defer Javascript Parsing
If you’ve been using page test tools to test your website’s speed, you may have run across this recommendation which can be difficult to understand. If you look at your page’s waterfall view using a tool like webpagetest.org or Pingdom, you’ll likely see that there’s a number of JavaScript files (.js files) loading before your “start render” line. This is known as “render-blocking JavaScript”.
The core function of JavaScript is to perform an action on a web page, like a popup or rotating images in your slider. In reality, these actions don’t need to be loaded until your site fully loads the content and styles. So by “Defer JavaScript Parsing,” these tools are really saying, “load this stuff later on in your page instead of at the top.”
There are a few plugins out there which can help you in deferring this JavaScript, but one we’ve seen work well is Above the Fold. This plugin also plays nice with Autoptimize and Better WordPress Minify!
7. Lazy-Load Long Pages
For one-page sites and sites which have a long home page, Lazy Loading can be a real time saver. Lazy Loading essentially prevents the elements lower down on your page from being loaded until the visitor scrolls down to see them. By not loading all of the content of your long page at once, this allows your site to begin rendering faster. A common plugin used for this would be BJ Lazy Load.
8. Reduce External Calls
When a web page is loaded, every element on that page has to be requested by your visitor’s web browser. Some sites may have a large number of ads loading, external stylesheets and fonts, or embedded/iframes of elements from other sites. With every external request, a DNS lookup has to be made by the browser and it must download those elements from those external sites. The DNS lookup time can eventually add up to a lot of browser load time. And, if those sites are taking a long time to respond it could affect your own page time as well. Reducing the number of these calls can improve your site load time.
ABOUT THE AUTHOR
Janna Pyles is WP Engine’s Site Performance Subject Matter Expert. She has lived in Austin for the past four years and enjoys hiking with her dog, painting, and both technical and free form writing.
Leave a Reply