Contents

WordPress slow? This is how performance optimization works in 2019 – Get to know all important settings in WordPress, image compression, caching and web hosting in our guide to loading time and PageSpeed ​​optimization.

The speed of your website is an important ranking factor : In addition to simple operation, appealing and extensive content as well as a positive reputation, fast loading times are the be-all and end-all to be found better in the search engine.

Your website should load a maximum of 3 seconds. Under 2 seconds loading time and page speed of over 90% (desktop and mobile) are very good.

The loading time of your page can also affect your financial success, as the following example shows: For every 100 milliseconds that Amazon loads faster, the turnover of the online retailer increases by one percent ( source ). This is of course an extreme example, but it shows how important a fast website is.

To speed up your WordPress project, I have put together the most important tips for performance and PageSpeed ​​optimization that I have collected with WordPress over the past ten years and update about every 6 months for this post. If you need support for loading time optimization, contact us: Our programmers are PageSpeed ​​experts and will be happy to help you with performance optimization.

  1. Contact
  2. Performance-Tests
  3. Basics
  4. Caching
  5. Hosting
  6. Conclusion
  7. Performance-Tests

At the beginning of your performance optimization, you should first determine how fast your page is at all. The easiest way is with the  Google PageSpeed ​​Insights . I recommend that you only check your homepage, but always check the URLs of the most important subpages or layouts during optimization.

Google PageSpeed ​​Insights for our free WordPress theme

Google rates the PageSpeed ​​on the one hand through a live test, on the other hand through saved test results from the Lighthouse Audit – a loading time test of the Google Chrome browser, which you can also start directly in the developer tools and use as a professional to optimize your loading time:

Chrome Lighthouse Audit

However, since Google’s PageSpeed ​​test only gives a score on a scale of 1-100 (0-49 = bad, 50-89 = medium, the loading time is good from 90) and only provides information on the real measured loading time for larger websites , I recommend you  to measure your loading time in seconds with and WebPageTest .

As with the Google PageSpeed ​​Test, you first enter the URL to be checked (start page at the beginning of PageSpeed ​​optimization, later the most important sub-pages) and then select a meaningful “Test Location”. It makes sense to have a location that is as close as possible to your customers. I prefer to use Frankfurt for German-language websites and New York for English-language, international websites.

WebPageTest evaluates the loading time with American school grades: A corresponds to the German grade 1, F to grade 6. If an X is there it means that a certain measure has not been taken. That doesn’t necessarily mean something bad, just that an option for loading time optimization could be used. In my screenshot this is a CDN, a so-called “Content Delivery Network” or server network, over which I could have my WordPress project loaded in addition to my own server (actually only recommended for international projects with slow servers). But since I already have a very good loading time (everything under 2s is very good, but the “Load Time” should be a maximum of 3s), I can save myself that. Also important: The server response times – called “first byte” – should be less than 0.5s.Question hosting .

Another important statement that WebPageTest makes is which elements contribute to the deterioration of the loading time. If you click on one of the “Waterfall” diagrams under the “Test Results”, the broadest bars indicate the measured loading time of the respective element:

WebPageTest

In my example , this is a JavaScript file (you can recognize it by the file extension .js in the left column) that takes 996ms. This is an important file in my project and therefore not too bad. However, if you notice that there are some more elements that are quite wide, it is recommended to optimize the files. The most important measure for page speed optimization is the image optimization explained below.

Basics

The fuller your website is with media, plugins and widgets, the slower it will be. Incidentally, even a complex layout can worsen your website, since then browsers and search engines take longer to display (“render”) them, and user friendliness and SEO success can suffer as a result. So: focus on the essentials on your website – mandatory information and visible content.

Action

Measure every view (e.g. homepage, offer page, blog article) at peak times.

Take a measurement after every optimization and setting and check carefully in an incognito window of your browser whether there are any visual restrictions.

Repeat the performance tests every three to six months.

Pictures

Pictures are 80% the biggest performance killers. Therefore, first make sure to save images in the correct dimensions and file format on your website or replace your existing images with optimized ones:

You export photos and graphics with many colors as JPG files with the lowest possible quality for the web. Save them in Photoshop with about 60-80% quality.

You can include graphics with fewer colors as PNG, GIF or SVG files (vector graphics) on your website. With PNG and GIF files, you reduce the number of colors when “save for web” to the bare minimum.

For SVG files you currently need a code extension of your functions.php file  or an extra SVG plugin that supports the SVG files in WordPress – otherwise you cannot load SVGs into the media library. We actually want to avoid unnecessary plugins, so I always recommend extending them by code.

In addition, you should compress your JPG and PNG files manually before uploading with TinyPNG (up to 20 images at once) or automatically when uploading using the TinyPNG WordPress plugin . Post-server compression is not as strong as the two tools. Therefore, if necessary, I download all images from a website using an FTP program, compress them and then overwrite them again on the server. I risk image rankings, but users who come to our website through image search results do not play a significant role – they simply do not buy anything and only skim content.

Compressor.io is often even more powerful than TinyPNG , but images can only be compressed individually here. Compressor.io also compresses SVG files for this.

Plugins & Slider

Avoid all unnecessary plugins. These include sliders (especially the slider revolution), because they are not only slow, but hardly anyone takes the time to look at all the slides. Even Google therefore explicitly advises against sliders (source: Google UX Playbook, page 8 ).

At bachelorprint.de , the slider revolution takes 3.3 seconds to load in total 2.3 seconds.

Better use your own animations or videos instead of sliders. For example, it is possible to create HTML5 and GIF animations using Animatron and only load them when the elements scroll into the visible area. The same applies to embedded YouTube content.

Tracking-Tools, iframes and YouTube

Most tracking tools are similarly bad for your PageSpeed. This means less web analysis such as Google Analytics, etracker or Matomo (formerly Piwik), but rather advertising tracking like Facebook pixel or mouse tracking like hotjar. Avoid such tracking tools as far as possible or only let them load under certain conditions – the topic is very complex and goes beyond the scope of this manual, we would be happy to advise you personally.

I put iframes such as Google Maps in the same category as tracking tools. Because every time a URL is called up, data is also transmitted to external servers that slow down your site. It is best to link cards statically in your content.

Iframes are inevitable and embed codes for YouTube, Vimeo & Co. are inevitable. Video embedding is almost always better than locally hosted videos. By the way: If you embed videos via YouTube, you can have them loaded – similar to pictures – and additionally optimize them with structured data .

Google fonts

Google fonts are similar to tracking tools, iframes or YouTube videos. However, since they are often an important design element, I cannot simply recommend removal, although that would be the best choice. By the way: System fonts like Helvetica and Arial or Georgia and Times are not that bad (I use them here too). You can use any font in graphics. This is also how Amazon does it.

If you want to use Google Fonts, reduce the number to a maximum of two fonts or styles (e.g. bold and italic) and do one of the following:

It’s best to host the Google fonts locally on your server. This requires either a WordPress plugin or some programming. I explained this embedding exactly in a blog post of our WordPress theme .

Alternatively, let the fonts load faster (“asynchronously”) using a caching plugin. More on that later.

Comments

Another performance killer from WordPress is the avatar system of the comment function. This is because an external service called Gravatar is used by default, which is called up each time a URL that contains comments or the comment function is loaded.

Gravatar not only slows down your website, but is at least questionable in terms of data protection law , since we don’t know what Gravatar does with the data of your website visitors. If you have activated the WordPress comments (in the Settings under Discussion), I strongly recommend deactivating the avatars:

WordPress Avatar

By setting paginated comments (“wrap comments in pages”) and archives, you can usually save additional loading time on the corresponding pages.

Caching

According to the basic settings in WordPress, you should use the server and browser cache of your visitors (cache) to let your WordPress page play even faster. The advantage of a cache is that all important files are available in the right place for your visitors and your content is displayed much faster than if the CMS has to pull each individual file from the theme or the database.

Before I introduce you to working with caching plugins and settings, a small but important reminder: after each setting, please test your website in an incognito window of your browser and clear your browser cache if you get things displayed differently than others Tester or user.

I prefer to use the premium plugin WP Rocket for caching , because it is the strongest and easiest to use cache plugin. The cost is from € 49.00 for a website – I have a larger license because I optimize many projects, so the individual website costs less. Alternatively, I recommend using the free versions of WP Fastest Cache (also easy to use, unfortunately not multisite compatible, often a bit slower than WP Rocket) or W3 Total Cache (very complex but just as strong and sometimes even stronger than WP Rocket) ,

Setup of WP Rocket

I explain the setup of WP Rocket , WP Fastest Cache works in principle similar. If you are not a professional, but want to use W3 Total Cache, I recommend the paid setup service from the W3 team.

Basically, I do not recommend activating cache for registered WordPress users so that you and your logged-in users always see the latest version of your project. For all other users, a cache lifetime is set, after which information “stored” in the buffer automatically expires and the latest version of the website is loaded. WP Rocket recommends a cache time of 10 hours, which is good, but if you publish new content more often than in the interval, I would reduce the duration to the publication intervals. This is only intended to prevent display problems. The cache is always cleared when you change content or publish new content.

Speed Optimization via WP Rocket

Then you try out every option of the file optimization step by step: To do this, after activating each individual function, you test whether there are functional or display errors: CSS optimization is usually a display error, JavaScript optimization is usually a function and animation errors, which can particularly occur with forms and interactive elements. If you find any errors, deactivate the option or define exception rules for certain files. To do this, you can open the waterfall diagram of WebPageTest again and insert the individual file paths according to the specified pattern in the exception fields paragraph-separated or work with the developer tools of your browser (for professionals) to identify all sources of error.

If you use WordPress 5 with the current Gutenberg or block editor, it is often helpful to specify the following path for the CSS exceptions:

/wp-includes/css/dist/block-library/editor.min.css

Speed Optimization via Google Chrome developer tools

Our developers and I mostly use the source, the performance and console tab as well as the Lighthouse Audit, as mentioned at the beginning of this manual.

Finally, you switch to media optimization and activate all options – if possible for your website concept.

I especially recommend using LazyLoading so that pictures, videos and content from external sources are only reloaded if they come into the visible area of ​​the browser. By the way, Google Chrome version 76 , a browser-based reload function, appeared in mid-2019, which hopefully will soon find its way into other browsers. At least until the end of 2020, I would also activate lazy loading in the caching plugin, because there are enough users with outdated browsers that would otherwise not be favored by fast surfing.

Incidentally, I have deactivated the “WordPress Embeds” (embedding function) in our WordPress theme and toolkit websei.de , because I give recommendations in the blog posts about WordPress plugins, which after inserting the links on WordPress.org for additional Information such as thumbnails and download links are automatically added. If this is not important to you, but you want to use emojis, for example, you can change the configuration accordingly. All other WP Rocket options are optional.

 

Hosting

Web hosting also plays an important role in loading time optimization. Especially the well-known mass hosts like Strato or 1 & 1 are often overloaded and have bad reaction times. The reason for this is that a large number of customer pages are on one server and then overload the computers when a customer has more traffic. In my measurements, which I have repeated every three to six months for this manual since it was first drawn up in 2015 (revising this manual at least twice a year), I have also found this phenomenon in Hetzner and Alfahosting. Only HostEurope has always convinced me and so our website is hosted there too. We use a WebServer Supreme SSD there .

If you find in the webpage test that your “first byte time” is less than or equal to grade C or slower than 0.5s, I strongly recommend that you optimize your hosting.

settings

To do this, log into your web hosting and search in the settings for:

PHP version: This should be at least 7.1 in a current WordPress version, better is 7.2 or 7.3 – but please test the whole page after changing!

PHP Memory Limit: This should be set as high as possible. Ideally it is at least 256M (M stands for megabytes), we even set it to 512M in order to store as much data as possible in our working memory – i.e. the server-side cache.

Optionally, you can also activate the APC User Cache (APCu), a module to accelerate the PHP programming language.

Optionally, you can also activate NGINX, a super fast caching.

CDN

If the basic, cache and server settings already mentioned do not help you to get under 3 seconds of loading time, you should consider a more drastic measure: The Content Delivery Network (short: CDN) is usually the easier choice than to a new hoster switch. But:

 

A nationally oriented website with a good host does not actually need a CDN and is usually more efficient without one.

Despite good web hosting, international websites often require a CDN.

In that case, I recommend using Cloud Flare . Linking Cloud Flare to your WordPress site is very easy with WP Rocket. The other plugins also have support for such networks (for WP Fastest Cache e.g. MaxCDN), but the setup is usually more difficult and the providers are usually worse than Cloud Flare in terms of loading time.

The setup of a CDN should only be carried out by very experienced users, since you can shoot entire websites here.

Conclusion

Performance optimization in WordPress is a huge, almost endless topic. However, if you restrict the most necessary functions when designing your website and compress all images before uploading, you are on the right track. Caching and hosting also do a lot.

At the end of every performance optimization, don’t forget the before and after comparison.

LEAVE A REPLY

Please enter your comment!
Please enter your name here