Top WordPress website page speed optimization guide for 2017

WordPress website page speed

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.

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

Ashish Sharma is a Key Account Manager, looking after Marketing Strategies and building new business tie ups at WeDigTech - A hub of Skilled Mobile App Developers in India. Focused on helping enterprises Startups from domestic to MNCs.

Leave a Reply

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