How to get 100 / 100 points on Google Pagespeed for your WordPress website

0
1312
pagespeed-insights

Google Pagespeed Insights is the well-known website tool with which you can check and optimize all relevant parameters for the search engine. You can click on the link above, or usually see in the management system, a daily updated value of your page.

In this guide, we'll show you how easy it is Pagespeed score of 100/100 to reach. You can do it too.

For our example, we used a demo website with all sorts of content and a well-known theme, which also includes the usual plugins. So exactly what to create good websites.

super-food-homepage

We are here for the theme The7 decided. It does not really matter which theme you use. Main thing it is up-to-date and offers a few settings options for the creation of the website.

That's what you need for a fast website.

  1. ones have a fast web host with experience
  2. a clean current WordPress
  3. the right settings for the web server
  4. a tool for optimizations and caching

We use in this example WP Rocket, These tools all do the same. You compress text files, collapsing the code, and possibly creating a static page as a copy.

This allows the visitor to quickly access the page.

Static pages are reminiscent of html code from back then. Websites that consist only of simple html code and images are still the fastest. But not dynamic. But with these plugins, the cache is always recreated as soon as something on the page has changed.

Tip: Disable the WordPress Cronjob, It's not really a cronjob in the true sense, it's always called when a visitor comes to the page. How to do that we show you in another article.

Google Pagespeed Insights

Enter your current website at google and watch the performance.

Normally one gets first values ​​in the yellow area so until 85 if the Webhoster has a good server.

In our default installation, PSI showed us 85 / 100 in the desktop view.

PSI Standard WordPress installation

Somewhat misleading, however, is the statement that the server has responded slowly. Here is meant the time to the first byte which is transmitted.

There are many factors that interact here. Often you will reduce the so-called TTFB (Time to First Byte), if you fix all the other points.

Conveniently, Google offers the optimized code to download for many points. At this point, however, I generally recommend only incorporating previously optimized images into the website.

You can even do that for free with the Tinypng Panda take care of.

tinypng-image-compression
Tinypng.com Panda feeds the redundant bytes.

However, most themes also create their own images in different sizes, so that it always comes back to new optimization needs.

It is therefore occasionally advisable simply to re-optimize and overwrite all image files residing on the web server.

Pingdom, GTMetrix and Co.

Of course there are other test pages. Here, however, there is often the problem that the call is from abroad and therefore not meaningful enough to simulate the usual visitor from Germany. It is also important to know that some test programs can not handle http / 2 and exactly ignore the advantage of http / s, ie the parallel transmission of data over a connection and interpret it negatively.

GTmetrix
GTMetrix Performance Report

TTFB or total loading time?

Basically, the result of the total charging time counts. The first byte is dependent on many factors which one can influence only bad. A page that is not compressed usually has a very low TTFB value than a perfectly compressed page. But the total load time with compression is obviously faster on a page with a lot of content. How google evaluates that ultimately is nebulous. We have even pages that load tough because the software is outdated and a PSI value of 68. With 28K organic keywords, but about 1000 visitors come to the site a day. But for comparable sites, the page with the better values ​​will certainly be listed higher.

CDN and acceleration modules

There are also modules that store static data on other servers and deliver it depending on the location of the visitor. This reduces the number of connections to the server and reduces the so-called TTFB. Caches by akamai, cloudflare or incapsula are available here which also offer compression and optimization depending on the service booked. A small (D) Dos protection is also included if the connection is made entirely through these providers.

cloudflare-web-traffic-uebersicht
Cloudflare traffic analysis

Speedkit for Plesk

For example, there is a plugin for Plesk, which can make the website faster with just a few clicks. In my test, however, exactly the opposite was the case. The main problem with such plugins is the fact that the cache only starts when the visitor views the page a second time, or first connects to the system.

The advantage is that you can easily activate it without making any changes to your system. But the disadvantage is then rather the lack of speed with 1 View visitors. For this reason, you can see no change with the usual test programs, because they always visit the site without caching like a brand new user.

Speedkit-website-accelerator-plesk
Speedkit for Plesk is designed to make web pages faster. But probably not always works.

Since most visitors often only come to the site via a link from a search engine, there is no speed advantage for these visitors. With on-board means one gets along well without external caches. In terms of data protection, especially DSGVO and the upcoming ePrivacy Regulation, the use of such services is not suitable. It is already missing a contract for order data processing when ordering these services.

So you make the website faster.

The most important point: the right web host.

Seen from the outside, everyone does Web hosting provider the same. But the difference is so often hidden.

There are webhosts that advertise with cores and dedicated resources, but of which all of this only runs on very weak hardware. A small AMD core from a 10 year old server is not the same as a core on an Intel Platinum Xeon the latest version.

vmware_cluster
A VMWare cluster example

Most providers today also virtualize their entire infrastructure. Often on strange structures such as container systems in which the customer booked cores were booked by 20 other customers. Good and expensive because of the software license cost vendors use right virtualization systems such as vmware or KVM, usually referred to as cloud.

kvm_cluster
A small KVM cluster

Often a shared is enough Hosting out. We ourselves have set up websites with tens of thousands of visitors per month. These also run in a small hosting account, because web hosting machines are usually sized by the provider already very large, so they can serve hundreds of websites.

virtuozzo_cluster
View of a Virtuozzo 7 node

However, most sites will not need the services they have booked, so there is always plenty of power left.

When choosing the webhoster, just look for a trial account and play your website without obligation. You can usually reach them via a subdomain and test the speed. If it is nothing, just switch to another provider.

In this example, the demo page is on one SEO server the webhoster.de AG where you get a Plesk reseller account with 10 IP addresses for your projects.

The hardware used is a Dell R740 server with MLC server SSDs as a RAID array.

The management interface is Plesk Onyx in the current version.

A standard WordPress with the following active plugins was installed:

  • Amazon Affiliate for WordPress
  • NextScripts: SNAP Pro Upgrade Helper
  • NextScripts: Social Networks Car Posters
  • SEO Smart Links Business
  • Ultimate shortcodes
  • Table of Contents More
  • The7 Elements
  • Ultimate Addons for WPBakery Page Builder
  • Page Builder Pagers
  • Yoast SEO Premium
  • WP Rocket

The design template

The theme is the The7.

The design of the page consists of templates of the theme or the page builder. The subpages usually have 2500-3000 words and many pictures and tables.

Therefore, it is always important not only to check the start page, but also the subpages.

Our demo site is called www.super-food.de and is also under this Domain reachable. So you can verify all the tests yourself. In another article, we show just how to build a large website with few resources in no time. Maybe that's something for you too. The website is sometimes copied to other systems for testing purposes to create comparative tests.

How to set the web server through Plesk

First of all, the web server must be set via Plesk. There are always recommendations to use nginx as a pure web server. We do not do that because essentially no .htaccess files are supported and most WordPress functions of the plugins can only be converted with greater effort, otherwise they are ineffective. There is also no speed advantage.

plesk-dashboard-domain
The Plesk dashboard for the domain

PHP settings in Plesk

We use the current php version 7.2.9 with the default settings. Under the menu item PHP settings, you can usually set the options yourself. If not, the web hosting provider has to do it.

plesk-php-version-set-apache-with
PHP settings in the Plesk menu. PHP FPM with Apache web server.

Settings for Apache & nginx

In the case of the settings for nginx or Apache, we only set the values ​​already prepared by the provider. So nothing special. Here the symbolic links are deactivated and the standard compression is activated only for security reasons.

nginx settings as proxy in the Plesk menu

We will only be using nginx as a Proxy Server with the Smart Processing of static files. Basically, you can completely do without nginx. Then http / 2 does not work anymore and other problems occur. So let's just leave it at the default values.

WordPress Dashboard

Our demo site is already running quite well. But in order to reach the 100 / 100 we need some modifications like the Minification, so the summary of CSS and Javascript as Google recommends.

This can not usually copy everything together, so there are useful helpers doing the job.

We are using the plugin WP-Rocket in this review. But most others can.

wp-rocket-booking
The WP-Rocket Dashboard

In the Preferences section, in the File Optimization section, we'll simply click on all items except for those that are harmful to http / 2. Those are the CSS files the "Minify CSS" and "Optimize CSS presentation".

css Minify
WP Rocket CSS Minification

With the javascript settings you have to change the settings "Minimize Javascript" and "Javascript delayed loading"As well as the"Safe mode for jQuery (recommended) ".

Minify javascript
WP Rocket Javascript Settings

That's almost it. With the plugin, the page at the PSI value increases to 94 / 100. Now only a few minor optimizations of the image files or CSS code are missing, which were somehow not compressed in the so-called child theme. Conveniently, google provides these files but optimized, so you can easily replace them by file manager.

In this case we were able to swap the images changed by the theme and place a CSS and Javascript file in the child theme.
Then there was only a small reload to the hoped-for 100 / 100 after all optimizations were performed.

pagespeed-insights

page-speed-100-100
Google Pagespeed Insights with 100 / 100 passed.

We hope our little tutorial helped you with the optimization. So everything is possible. But things are changing every day too. That's why you have to keep your WordPress up-to-date, otherwise new features will no longer be supported.

You will find a complete video on our youtube channel soon.

LEAVE AN ANSWER

Please enter your comment!
Please enter your name here