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
- Prioritize visible content
- 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
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!