High page load time of your website have a positive impact on visitor satisfaction and lead to better search engine rankings. For the popular CMS WordPress, there are several new tools and plug-ins for WP page speed optimization. Use the following tips to improve the performance of your site.
Table of Contents
Google Page Speed Insights – Indicator for speed
First, get an overview of the current state of your WordPress website. How fast does the website load and where can the charging process be accelerated? Answers to all questions are provided by the free Google Page Speed Insights tool. Enter your website and have a look at the evaluation. The suggestions for improvement are based on best practices, a value of 100/100 is not always possible and must not necessarily be achieved. A value of 80 is considered very good.
Tip: Install the WordPress Google Page Speed Insights for WordPress plug-in to evaluate your site.
Optimize the images for shorter loading times
Optimized images dramatically shorten the loading time.
Check, Are the images already compressed? The Optimus Image Optimizer plug-in provides a loss-free compression, you do not have to accept quality losses. After the installation, all image files are optimized in one click. The WordPress plugin will then automatically compress the following images as soon as they are uploaded. Another plus: the tool converts images to .webp format, which leads to even faster loading times.
Note: WebP images are about 26 percent smaller than comparable PNGs and up to 34 percent smaller than JPEG images.
Reduce JavaScript and CSS files
Use compressed JavaScript and CSS files to speed up the WordPress page.
In many standard installations, Google Insights also complains about the handling of JavaScript and CSS files and offers improvements for faster loading times. Minimizing the files works with the free plug-in Autoptimize at the push of a button. It combines all script and style files, minimizes and compresses them, and adds an expiration date for the caching. In addition, the plug-in moves style information to the top of the page and script information to the end of the page.
The HTML code is minimized and you benefit from a slim and lightweight page. The developers also recommend installing the WP SuperCache or Hypercache plugins. In addition, the installation of the free WordPress Cache Enabler plugin is recommended to display the .webp image visitors created in the first step. To do this, enable the Create additional cached version for WebP image support plug-in settings.
Render-Blocking JavaScript and eliminate CSS
Does Google Page Speed Insights warn you that JavaScript and CSS resources are above the fold after analyzing your site? For the JavaScript and CSS files, optimization is performed using the Autoptimize plug-in already installed. To do this, in the JavaScript settings, uncheck Force JavaScript in, and then check the CSS settings for Inline all CSS. Fonts are usually the blocking resources, and the FontAwesome CDN plug-in from KeyCDN is very popular for the use of alternative fonts. Copy the following code from the header before the closing tag of the template you are using:
Browser caching: Edit the .htaccess file
The .htaccess file provides various configurations for fast page loading speeds. An effective way is to enable browser caching.
Activate compression
With all plug-ins of KeyCDN, Gzip is already enabled for data compression. Gzip compresses the files and accelerates the loading times. Alternatively, add the following code to the .htaccess file:
IfModule mod_deflate.c
# Komprimiere HTML, CSS, JavaScript, Text, XML und 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
# Browser bugs entfernen (nur für wirklich alte Browser)
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
Conclusion on Page Speed optimization for WordPress
The suggestions of Google Page Speed Insights to optimize the page loading speed are now implemented. In the ideal case, you can achieve a performance score of at least 80 points. You do not have to aim at the 100/100 points rating, but little details cannot always be further improved. Also, consider the information for a better user experience.
We have forgotten an important tool or you have questions or suggestions on the topic of Page Speed optimization for WordPress? Send us a comment. We are looking forward to your feedback.
