WordPress Performance Improvements – Part 1/3 (Basics)

Most of the time, performance is not taken into consideration while designing and developing a website. Once fully developed, it is managed using caching plugins and CDNs; it’s a reactive approach. At Vikreed Solutions, we take a proactive approach and keep performance in mind while designing and developing a website.

Website performance has a vast number of aspects to it; here is a list of few items

  • Javascript files
  • DOM
  • Graphical Content
  • Server locations
  • Allotted server resources
  • Server software and setup
  • Allocated Bandwidth
  • Visitors geographic locations
  • Browsers
  • Vistors internet speed

and more

Performance improvement is a huge topic in itself; it is offered as a separate service too. Here in this series of articles, we are covering major WordPress-related aspects of website performance.

Performance Measurement Tools

Traditionally major performance metric used for website development was page load time. However, in 2020 Google introduced a new way of measuring website experience called “Web Vitals. “ Web Vitals are more of “User Centric” metrics; these are meant to measure performance from the user perspective than the technical parameters.

Web Vitals metrics represent the most important facets of page experience; loading, interactivity, and visual stability…

Web Vitals
  • Largest Contentful Paint (LCP) – Measures loading performance. LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID – Measures interactivity, pages should have an FID of 100 milliseconds or less.
  • Cumulative Layout Shift (CLS) – Measures visual stability; pages should maintain a CLS of 0.1 or less.

Most performance measurement tools have changed their measurements and reporting methods based on Google’s Web Vitals. For example, Google PageSpeed Insight now uses the Lighthouse platform to assess website performance.

Here are the most common website performance measurement tools

  • PageSpeed Insights
  • GTmetrix
  • WebPageTest
  • Chrome Developer Tools
  • Pingdom

Why performance matter?

As per Google (Google/SOASTA Research, 2017), 53% of mobile users abandon sites that take longer than 3 seconds to load, whereas the average load speed is 22 seconds. Such a high number of user abandonment costs to the website owner regarding the loss of leads, conversions, and sales. Therefore, user abandonment due to slow websites can consume a major part of the marketing budget.

Google

Let’s start with the most common culprits; in the next two articles, we will cover the rest of the audit-based points.

A. Graphical Content

One of the common mistakes which hit the page load performance most is the usage of unoptimized images. Graphical content like photos, icons, illustrations, charts, graphs, vectors is an essential part of web design. Graphical content accounts for 60 to 85% of typical website bandwidth, which is huge. Most of the time, optimizing graphical content solves the basic website performance issues.

1. Remove Unnecessary Images

It is crucial to ask whether the image is essential for that location? Is it communicating the value proposition? Is it conveying any message or representing a brand? Questions like these should be asked at the design phase itself.

By avoiding unnecessary images above the fold, you can improve your page performance by a huge margin.

“The fastest image is one you don’t have to download; every image you remove speeds up your page load time.“ – Google Developers.

2. Choose Appropriate Image Types

PNG should be only used when transparency is required in the image, or else JPEG should be used. This is because JPEG takes less space than PNGs. Let’s test it out.

PNG – 752 KB – 1022 by 534 pixels
JPEG – 160 KB – 1022 by 534 pixels

Here in this example, both images have the same dimension and no compression used, but JPEG format (with lost transparency) saved 593 KB for a single image.

WebP is a modern image format introduced by Google; it provides superior lossless and lossy image compression. WebP lossless images are 26% smaller than PNGs, and WebP lossy images are 25-34% smaller than JPEG images.

AVIF is the newest image format in the market which offers 70 to 80% of compression. Though it is not yet fully supported by all browsers except Google Chrome.

Note: WordPress does not offer direct support for these new image types, including WebP, which is almost a decade old.

3. Remove Image Metadata

Photos taken with a camera or a phone adds a good amount of metadata. It can include geolocation, dimension, date and timestamp, file format, resolution, and more. On top of it, image editors add more metadata like author name, copyrights information, or app information.

Metadata can be removed with free online tools like Verexif.

4. Resize Image

Generally, or as bad coding practice, larger images are used and later rendered with smaller dimensions via CSS. This should be avoided by using the right image sizes.

5. Crop Images

Crop mage to focus on the image’s subject and avoid having image parts that are not conveying the message.

6. Reduce Image Quality

Images size can be saved by reducing its quality to the level where it still retains acceptable visual quality.

7. Compress Images

Image sizes can be further reduced by compressing them without losing their dimension or visual quality. In addition, there are a ton of free tools like tinypng available, which compresses images.

8. Serve multiple image versions

A width descriptor is a way to tell the browser the width of the image. This saves the browser from needing to download the image to determine its size.

<img src=”flower-large.jpg”> is changed to

<img src=”flower-large.jpg” srcset=”flower-small.jpg 480w, flower-large.jpg 1080w” sizes=”50vw”>

9. Use WebP images

WebP images are smaller than their JPEG and PNG counterparts—usually on the magnitude of a 25–35% reduction in file size. This decreases page sizes and improves performance. In addition, webP offers both lossless and lossy compression.

WebP Conversion with cwebp 

Images are converted to WebP with cwebp command-line tool or the Imagemin WebP plugin (npm package).

Convert a single file using a quality level of 50:

1cwebp -q 50 images/flower.jpg -o images/flower.webp

Convert all files in a directory:

1for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

WebP Conversion with Imagemin

The Imagemin WebP plugin can be used separately or with your favorite build tool (Webpack/Gulp/Grunt/etc.). This usually involves adding ~10 lines to a build script or the configuration file for your build tool. Here are examples of how to do that for WebpackGulp, and Grunt.

B. Text Content

10. Minify Your Code

HTML, CSS, JavaScript are text based languages. Minification removes whitespace and unnecessary characters, comments without disturbing codes functionality and validity. It may not be easy to read for humans, but browsers understand the minified code.

You can use simple online tools like minifier.org, but developers use the Node module for Gulp or Grunt.

In the Gulp environment, you can minify HTML with the following command

gulp minify

You can also use minify extension for your favorite text/code editor like Sublime or Visual Studio Code.

11. Compress Text Resources

Like images, the text is also compressible. Gzip (GNU Zip) is best for text compression; on average, it saves 70% of the data. However, Gzip is particularly not useful for non-text resources.

GZIP is based on DEFLATE algorithm and offers lossless compression.

You get the following suggestion on Google PageSpeed for GZIP

How to Check if Gzip is enabled on your server?

  • Chrome Dev Tools – Check content-encoding: gzip response header.

How to enable Gzip for Apache?

mod_filter, and mod_deflate modules are used to enable GZIP on the Apache server.

  1. Find .htaccess file in WordPress root directory.
  2. Make sure that the mod_filter module is active on your server, and then add the following code snippet to the .htaccess file
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Brotli is a new compression algorithm picking the pace; implementing it directly for WordPress is tricky. However, Cloudflare and KeyCDN offer options to choose Brotli compression.

C. HTTP Requests

We have seen methods to improve performance by reducing the amount of data to be downloaded. This is done by cropping, resizing images, compression files, and minifying code, etc. With the next approach, we focus on reducing the download frequency. Each downloaded file takes up one http/s request, and there is a limit on how many parallel HTTP requests the browser and server handle. So by managing the number of HTTP requests, you are improving performance.

12. Combine Text Resources

Multiple smaller files like CSS can be combined in one file to reduce HTTP requests to the server.

13. Combine Graphical Resources

Sprites can be used for smaller images like icons to save HTTP requests.

14. Script Location

One of the common conventions is to add scripts in the header. While loading the page, scripts added in the header block the page rendering. This is the reason behind one of the most common page insight warnings, “render-blocking script.“

We will cover this in detail in the next post.

15. HTTP Caching

If you haven’t enabled browser caching, then you get the following error in Google PageSpeed.

How to enable browser caching?

Add the following code to your .htaccess file:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
        Header set Cache-Control "max-age=84600, public"
</filesMatch>

This snippet should be added before “#BEGIN WordPress” or after “#END WordPress.”

Optionally Expires headers can be added in the .htaccess file.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
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 image/svg "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"
</IfModule>
## EXPIRES HEADER CACHING ##

Check part 2 and part 3 of the series.

About Author

Sorry, Comments are closed!