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
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.
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
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.
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.