How to improve page speed of WordPress website

Latest statistic shows 34% of websites are powered by WordPress in 2019, 4% higher than previous year. Among these websites, there’s no lack of famous brands, companies or government, such ason the dashboard Techcrunch, Sony Music, Whitehouse, Reuters Blog. WordPress is getting popular for its open source nature. Developers all over the world are keeping working to create new themes and plugins to enrich its functionalities. On the other hand, excessive use of the plugins could result in slow loading speed, which would have negative impact on user experience and search engine ranking. So how to improve page speed of WordPress website has become one of the practical problems facing website owners.

Factors influencing loading speed include network latency, DNS look up, TCP handshake, negotiate the TLS tunnel, server response time, etc. For WordPress users, it’s fine not to be familiar with all the details of the metrics. But it’s important to know the ways to improve performance in terms of page speed.

1. Upgrade your PHP and WordPress to the latest version

Not only does the new version remove some security risks but also improve its performance and make website faster. Before upgrading, backup data and files so that you have chance to reverse. Upgrading to the latest WordPress and PHP version will greatly boost server response time and fundamentally speed up website.

2. Remove dead links of resource files

If there are dead links of resource files on the page, the page will wait until timeout, page speed will be greatly influenced even for a small favicon file. So be aware of the resource file with 404 status when you are doing speed testing in Chrome browser.

Chrome page test - 404 deadlink for favicon

3. Use cache plugin to make webpage static

WordPress web pages are dynamically created by the software, which consumes time to run PHP codes. WordPress cache plugin generate static file for each page and redirect the request to the static file. Popular cache plugins include W3 Total Cache, WP Super Cache, Cache Enabler, WP Fastest Cache, LiteSpeed Cache, etc. These plugins either insert apache redirect code in .htaccess file or use PHP code to redirect request to cached file.

4. Reduce number of HTTP calls to improve page speed

The more plugins used, the more css and Javascript files are likely embedded in the webpage, which results in more http calls. Reducing number of these files could effectively speed up your website. Fast Velocity Minify plugin could merge Javascript and CSS files into groups so as to reduce the number of HTTP requests. But the best strategy should be removing unnecessary JS or CSS files as it makes your page light. And there’re many such opportunities in the real world. Here I give some examples.

1) Remove Gutenberg Block CSS Library

The Gutenberg block editor is the feature introduced in WordPress 5.0. Its CSS file is supposed to be used in admin page but appears in normal pages. To remove the Block CSS file from single page, add the following code in the function.php file of the theme.

function remove_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'remove_block_library_css' );

2) Remove JS and CSS of Contact Form plugin

Contact Form plugin is quite popular as it’s important for a website to have an interface to receive feedback from users. Its JS and CSS files are supposed to work only on the page of contact but appear on each of single page, which creates additional http calls. If your contact page is named as ‘contact-us’, add the following code in the function.php file to remove the JS and CSS files.

function deregister_cf_js() {
if ( !is_page('contact-us')) {
wp_deregister_script( 'contact-form-7');
}
}
add_action( 'wp_print_scripts', 'deregister_cf_js' );

function deregister_cf_css() {
if ( !is_page('contact-us')) {
wp_deregister_style( 'contact-form-7');
}
}
add_action( 'wp_print_styles', 'deregister_cf_css');

3) Disable CSS and JS files of emoji’s

Emojis use cute icons to add emotions or moods to the content. This feature was introduced in introduced with WordPress 4.2, but the casual style may not be applicable to every site. If you do not use it, you can disable the emojis using the following code.

function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );

// Remove from TinyMCE
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
* Filter out the tinymce emoji plugin.
*/
function disable_emojis_tinymce( $plugins ) {
if ( is_array( $plugins ) ) {
return array_diff( $plugins, array( 'wpemoji' ) );
} else {
return array();
}
}

Besides above examples, there are still many opportunities to remove unused JS and CSS files from webpage. Not only the number of http calls, but also the size of files is reduced.

5. Enable GZIP compression

To reduce the size of css, Javascript and html files, standard practice is to enable GZIP compression. Compressing data allows your web server to send much smaller files to browser, hence improve page speed. For Apache, you need mod_deflate for data compression. If mod_deflate module is enabled, just add the following codes in .htaccess file to enable GZIP compression for text, html, JavaScript, CSS and XML files.

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

GZIP compression could reduce the size of css, javascript or XML files by 70%, but it’s not applicable to image files as they are already compressed. You can check the compression status in Inspect model of browsers or using the online tool.

6. Enable Lazy Loading

Lazy loading is technique that defers loading of image resources until they appear in the browser’s viewport. That is to say, when there is an image above the fold, it will be loaded immediately with the page. Those off screen will not be loaded until you scroll the page and they appear on the screen. Deferring loading will immediately improve page speed performance because it will significantly reduce initial HTTP calls and data transfer if your site contains a lot of images. Lazy loading function has been embedded in some of famous WordPress plugins, such as W3 Total Cache, WP Fastest Cache, JetPack. You just need to turn on the function on their setting page.

7. Reduce the size of images

Image files could be large in size. It takes longer time not only to transfer in network but also to display on the screen, especially for mobile device. Try to avoid the format like png as the size of png file is uncompressed and normally several times larger than that of jpeg file. You can easily find free tools or WordPress plugins to help you reduce the size of images.

8. Leverage browser cashing

The browser cache is a mechanism used by browsers to store web page resources locally. Leverage your browser’s caching means you can instruct browsers to store the resources for specific time span so that the browser will not need to download the resource files next time when visiting the page. Most caching plugins have the built-in selection for browser caching. So it’s very easy to enable the feature in one plugin. If you need to customize the caching policy, you will need to find Cache-control or Expires rules in .htaccess file provided the plugin uses apache rules (some plugins may use PHP code instead).

Header set Cache-Control “max-age=84600, public”

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

9. Reduce Javascript running

If you access Speed (experimental) in Google Search Console, you will find two metrics for speed performance, FCP and PID. FCP(first contentful paint) is the time from when the user initiate http request (e.g. click) until the browser renders the first visible element. FID (first input delay) is the time from when the user has viewed the content and attempts to first interacts with the page (by click or input) to the time when the browser responds to that interaction. High FID is most likely caused by running of large amount of Javascript codes. A site overwhelmed with Javascript codes may not be problem for desktop devices. But for mobile devices, it could be the cause of bottleneck, esp. in slow network. So it’s important to remove unused JS codes or files from the page.

10. Preconnect external resource

For websites relying on ads for income, there’s little control of the external Javascript codes. Fortunately, modern browsers now support resource hints and we could make use of them to speed up downloading external resources, such as JS files, fonts, etc.

The preconnect link relation type is used to indicate an origin that will be used to fetch required resources. Initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, allows the user agent to mask the high latency costs of establishing a connection.

The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible.

I prefer use of preconnect and dns-prefetch. For example, to speed up Google Adsense, add the following codes in the header of HTML page.

<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="preconnect" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="preconnect" href="//adservice.google.com">
<link rel="preconnect" href="//stats.g.doubleclick.net">
<link rel="preconnect" href="//tpc.googlesyndication.com">
<link rel="preconnect" href="//googleads.g.doubleclick.net">
<link rel="preconnect" href="//www.googletagservices.com">

In conclusion, to make website loading faster, it’s systematic work. Most techniques mentioned above are also applicable to non-Wordpress websites. All of them are actionable, so it’s very easy to implement in your website. Some methods are not mentioned here, e.g., CDN, which could help reduce network latency and bandwidth. However, even if you use CDN, it’s also necessary to do website optimization as CDN provider will not help you do this work.

Leave a Reply

Your email address will not be published. Required fields are marked *