To evaluate a website performance, people often use tools like Google PageSpeed Insights or Ping Dom. These online tools analyze your site content and give a grade based on various indexes such as Server Response Time, Optimize Images or Minify CSS. A good grade is above 85 for Google PageSpeed and 90 for PingDom. Below are some tips to get higher score with Google PageSpeed (and consequently, Ping Dom)
- Server Response Time
Server response time measures how long it takes to load the necessary HTML to begin rendering the page from your server, subtracting out the network latency between Google and your server. The only way to improve this index, is to upgrade your server. A stronger server will process faster and return results quicklier. Two components you should be aware of are CPUs and RAM. A SSD storage is even better (than normal HDD one). How many are enough? It depends on your site features. A shopping site is of course needs more CPUs than a personal blog. Try to upgrade your server until the response time goes below 1sOf course, make sure your theme and plugins code is optimized before looking for a stronger server. If you feel your site response is too long abnormally, it may come from the code itself. Try to disable theme and plugins one by one to detect the reason and switch to a better one. - Minify HTML, CSS and HTML, enable Compression, Caching
These indexes are quite easy to get high grade. Most caching plugins can do this for you automatically, such as W3 Total Cache or Super Cache plugin. Just install the plugins and turn on the cache & minify options, then you are ready to go.You can combine using Autoptimize plugin to minify HTML, CSS and HTML before caching. This plugin works very well with above two. One small note is that, sometimes there is a javascript file (or CSS, or HTML) which has improper piece of code. After minifying, the minified file breaks. As a result, the site doesn’t work. In one case, there is a missing ; (semicolon) at the end of the line so the minified lines is not valid anymore. You will need experience to detect the file having the issue, fix it, or ignore the file from minified files list.If you use a shared host (such as Google Daddy Managed WordPress), there is case that the caching setting doesn’t work. That’s because the caching module is not installed on your server. Readmore about this issue here. If you can, change the server. - Prioritize visible content
Google says: “If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser”. It is tricky. In many cases, you cannot do anything. It depends on your site design alot. It means the first 14.6kB compressed content of your site must be enough to render first page so visitors can see content quickly. So for example, if you leave a big image in the top of the page, browser will try to load the image instead of loading other text content. If you use a lot of javascript to generate page layout, then visitors must way until all assets (image, javascript files) are downloaded before they can see anything. That will make “Prioritize visible content” index get a bad gradeTo improve this, there are 2 ways:- Structure your HTML to load the critical, above-the-fold content first. Don’t let your content and layout be mostly affected by javascript
- Reduce the amount of data used by your resources, by compressing, minifying, or reduce number of images
- Optimize Images
This index is both easy and difficult. To get higher grade in this index, make sure your images are compressed (enough to look good on web) before uploading to your WordPress site. In addition, use proper image size (without resizing using CSS). For example, you should use 1280×900 px images in a place where it only needs 600x400px. That will give you bad grade in PageSpeed.That sounds easy? Yes. However, today we talk a lot about responsive website. It means the site must look good on mobile or smaller screens, at the same time page size must not be too big. On a responsive site, sometimes an image turn from 50% width into 100% width to adapt with new screen size. As a result, sometimes we need to prepare bigger image size than it actually needs. That will downgrade your PageSpeed scrore! A technical solution is to use responsive image (with srcset property). Basically you declare many sizes in a single place. When browser detects different screensizes, it will choose to load appropriate image sizes. Read more here. However, it’s not a perfect solution. When you resize your browser (on PC), there are cases at which the width does not match with any of previously declared values. Browser will still use small images at bigger places (or vice versa), thus images are stretched or shrinked making your site looks bad.
Therefore, you will need exchange the responsiveness of your site with getting higher grade in this index. Re-design the layout in different screens so you can reduce number of image sizes needed. A great tip for you: focus on screen 1280px (HD screen), it is the size that Google PageSpeed grades your site.
Well, one more good tip: if you already compress your images before uploading, but you still see warnings about a list of images which need to be compressed, don’t be panic. It’s because Google has a better compress algorithm than the tool you use. It thinks images can be compressed more. To overcome that, look for the link at the end of the result
“Download optimized image, JavaScript, and CSS resources for this page.”
Click on that link, you will be able to download optimizes resources that Google prepare for you. Re-upload images and you will get better result
Final words: although getting a higher grade at Google PageSpeed is a good thing, don’t let it fool you. There are many debates or dicussions saying that, the score doesn’t has any meaning. The only one that you need to focus is the loading speed and user experience. Anyway, the tool gives you indications to improve your sites, that’s great enough!
