As a developer, I helped a few friends speed up their site from 20s to 2~3s, in general, what I will do it minify js and css and html, enable gzip compress, optimize images, reduce http requests numbers and reduce http requests size, add expires headers, enable CDN, switch php verion to php7.x, optimize mysql, enable database cache, object cache …. and …. and more. For speed up these performance optimization work, I used a few tools to get help me work more faster, I am happy to share them with you, my dear friends. 🙂
There are many site speed tools, for me, a useful online web performance tool is varvy.com, it is free, I use this online tool to audit client’s webpage for front-end issues.
Let’s use my site as a bad example — I designed my original theme at 2008, I did not upgrade my theme in many years, so it is a good example to show front-end problems. In the current time, after 8 years? my theme is still works, at the bottom of the page, you can find w3c validator is still living, but it is too old, I will upgrade my theme to follow wordpress new API standard and add new features and share it on wordpress.org.
Page Speed Check
let’s Open https://varvy.com/pagespeed/, don’t worry, it’s a great tool which alexa rank is 31046. Input your site URL, and click test button, the report of page speed optimization will shown very quickly, it looks like this:
You can see the summary of page speed optimization told you a few problems on your site, for me, it is:
images not optimized, css not minumized, js not minifiled, browser caching issues, this is not good.
Also in the top right, the report shown screenshot of my site and give us a resources report. Scroll down, let see more details:
The “CSS delivery” section tell us front-end problems:
too many external css files, render blocking css files, 1 css file were called using @import, In element css found, css not minimized
My god, too bad, I hate this.
Also the report use red color to tell me which js file size is too large:
addthis_widget: 347.015 kb
jquery: 97.184 kb
datepicker: 75.876 kb
The report let me know what is js and css problems quickly, the site is very FAST, although if you check their page source, you will find they did not minified html at all. Some other online tools need wait about 30s ~ 100s for get a result, this is a reason why I use it first to fix most obvious issues.
Next section is “Image optimization”, report said: “Image performance issues found.”
It lists all images which Not Optimized in the checking page, for example:
3d-tag-cloud.png | Not Optimized | Could save 155.2KiB if optimized (94%)
Optimize this image can save 94%, it is great help for speed up my site, I can’t wait to reduce size of these images!
Also the tool will told us “Browser caching”:
Browser caching not enabled for all resources, also it tell me details about this issue:
You can find on my domain speed up your site via , the report said: .bz
No caching errors found for resources served from origin domain.
What caused the problem?
Browser caching not enabled from these domains called from this page:
Yes, I using addthis plugin, I hope my posts can be shared with readers, if it is a little helpful. 🙂
And then next is optimized sections lists:
Compression is enabled for all resources
Server responded in less than 200 milliseconds
And so on. Site owner is a gentleman, he said “Thanks for using this tool”, Thanks for https://varvy.com/, you built a great tools to help webmasters and developers like me. 🙂
Mobile Friendly Test
Goodbye? No, no, wait a moment, varvy.com have another good feature — test your site on mobile, because my theme is designed at 2008, I did not add mobile features, so my theme is a good sample for show errors on mobile, please don’t miss-understanding me, I am not ignored mobile users, in some country and in some sites, 70% users is come from mobile devices, I have designed many themes which is support mobile devices, also I have customized many child themes to let plugins support mobile devices, all of them is get A rank or score 100 / 100 in speed test sites, once I have time from my hard works, I will re-design my theme to support mobile user and share it with you, if you have any ideas, please tell me, I am happy to add it into this theme.
Now please just open home page on https://varvy.com/, and in the top left, there are mobile test link, just click it and enter your site URL and wait about 15s, you will get mobile report like this:
You can find my site just get 64 / 100 on Mobile friendly, and there are details about issues:
- Font size is small
- Viewport not configured
- Tap targets are small
- Browser caching issues
- Render blocking CSS and/or JS
- CSS not minimized
- Images not optimized
It is useful to get a glance of problems on mobile devices.
On the home page of varvy.com, there are another tool I like to use: seo tool, if you enter your site URL, you will get a seo diagnosis report:
Based on this report, I found I do ignored a few SEO points.
This is section one of “WordPress Tips: Tools for how to find out what is slowing down your site and make it faster“, I will share other tools in next articles, thanks for read my posts, if you have any great thoughts, please don’t hesitate to me and other reader. Have a happy day with your family. 🙂