Manofmany.com is an Australian style magazine dedicated to men.
Everyday the team posts cool stuff in style, gadgets, tech, etc.
After a chat with them on Google+, we gave them this simple optimization report.
Loading time
Different tools show different data:
- Chrome SEO toolbar – 7.43 sec
- Pingdom Tools – 12.62 dec
- GTMetrix – 9.86 sec
- Webpagetest.org – 24.14 sec
Page size
Different tools show different data:
- YSlow: 3096.5 bytes
- Pingdom Tools: 4.0 MB
- GTMetrix: 3.88 MB
- Webpagetesst.org: 3.816 KB
I’m gonna use only one tool further, YSlow.
Components
Too many http requests: 51. 51 is not huge but it can be improved.
Javascript
There’s 15 js files, total size 627.1K:
- https://apis.google.com/js/plusone.js – 22.9 k
- http://platform.twitter.com/widgets.js – 80.7 k
- http://www.google-analytics.com/ga.js – 37.3 k
- http://edge.quantserve.com/quant.js – 5.8 k
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13.6 k
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2.7 k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7.1 k
- http://s3.buysellads.com/ac/bsa.js – 16.1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2.1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13.9 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15.1 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6.9 k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129.7 k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93.6 k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178.9 k
JQuery.js could be loaded from Google Library for better speed.
The biggest issue is with the social media JS files; they’re definitely not using the best plugin for social media sharing. It could be done with a single JS of 38.5 k or even scriptless.
That’s going to shave off 249.6K and leave the JS number at 11. It’s a considerable improvement on page size.
CSS
There’s 12 css files with a total size of 63.7K.
The size is not that much but the number is kinda high.
3 files can be combined into one: the theme styles.css and the plugins Easy Columns and Contact Form.
The rest are fonts loaded from Google Library so the question here is : do you really need 9 fonts?
Usually, you should be using 2 fonts: one for headings and one for body text.
PT Sans and Open Sans are not that different so you could be using just one of the 2.
Lora and PT Serif – same as above, use only one or just use Georgia (it’s a beautiful websafe font).
Nixie One – I don’t see it in use on the site.
For fonts that are used rarely it doesn’t make sense to load them every time, just use system fonts: Georgia, Arial, Courier.
That is gonna improve the requests from 12 to just 3-4, size improvements are not that big but it adds up.
Images
That’s the biggest issue of the website with the biggest impact on speed: 18 images, total size of 2597.5 K.
That is huge; they need to optimize the pictures before uploading them.
The biggest image on site has 420K and a simple smush.it shows that it can be improved by 27.6%, that’s 104K right there.
If we can improve all by 25%, that’s over 600K weight loss.
Solutions:
1. Optimizing images
Use Photoshop and Save for the web at 60% and progressive checked. If your visitors use chrome, firefox or IE9 progressive jpgs load superfast. For the rest, it will be a little slower than normal jpgs.
Otherwise just Save for the web at 60%-80% and optimized check. This saves normal jpgs.
After that proceed with uploading images to WordPress.
No Photoshop?
Use jpegmini.com to optimize images before uploading or just use a WP plugin to do it automatically on upload.
2. Serving images
Serve static content from a cookieless domain & parallelize downloads across hostnames.
Those 2 things can be achieved by loading images from a cookieless subdomain, something like images.manofmany.com.
Now, the browser can download multiple items at once improving the speed of the website.
Lazy loading
This means images will load one-by-one and visible to the users only when necessary.
They are loaded when they are visible in browser viewport only.
By loading only images above the fold, the speed gain is significant.
Other stuff you can do
– browser caching
– combine js ( if possible)
– add expires header
– compress with gzip
– using etags
– Profiling plugins to see which impacts the loading time and replace with better plugins
– Use code in functions.php instead of plugins for simple stuff like loading Google Fonts
– solve 404 errors
– minimize redirects
– load javascript at the bottom of the page
– you can use just 5 posts per page instead of 10
– you could use smaller pictures like thumbnails but that means interfering with the design
Conclusion
Most of it, it’s just simple things that can make a huge impact.
For a more advanced optimization, we should look at the theme and plugins and check if there are performance issues.
Leave a Reply