Why is it important?
Nobody likes waiting for a slow website. Google uses Page Speed as one of the factors to determine rank. Faster load times will improve your ranking, as well as help you gain more organic traffic. It will deliver higher conversions and higher revenue. Also, with such a widespread use of mobile devices everywhere, website speed is even more important.
- According to a study, done by Radware, 51% of online shoppers in the US say that site slowness is top reason they abandon a shopping cart.
- 46% of users will NOT return to a poorly performing website
- You have 5 seconds to engage a customer before they leave your website.
- Peak Load Time for Conversions is 2 Seconds
- The average page has grown 151% in just 3 years!!!
- 74% of users will abandon a website if it takes longer then 5 seconds to load
People have to pay data fees to view sites on Mobile. The slower the website, the more data is uses. Data is expensive and varies in cost around the world.
What does my site cost shows how much money it costs to load a website on a mobile device in different countries.
How do you measure it
What would be the Optimal Website Speed? It depends on the kind of website and the type of your target audience.
There are many ways to measure your site performance.
Tools like: Webpagetest.org, Google Page Speed, GTMetrix, and Pingdom are some of online tools that measure site performance. They are all somewhat different, though. I would recommend sticking to one while you’re optimizing your site.
If you run tests on multiple tools, it’s kind of like having 4 weight scales in your bathroom, and keep weighing yourself to see which number you like best.
WebPageTest.org is sponsored by Google, and it gives one of the most detailed analysis.
Pay attention to how the site behaves on first load and the second load. If you implemented caching, then the difference between the two should be significant.
If the difference isn’t something like 60%+ faster load, chances are you are missing out on caching opportunities .
Results are presented in a waterfall chart. Waterfall chart is like an X-ray of the browser showing how your page loads. You want waterfall to be as “thin” as possible (short overall loading time) and as “short” as possible (small number of elements to load). You also want waterfalls to be “steep”, meaning they drop down fast vertically. This indicates a high level of parallel loading is happening in your browsers.
How to improve it
- Images
- Browser Caching
- Reduce number of requests
- Gzip
- Use CDN
- Hosting
- Remove query strings
- Avoid Bad Requests
- Use fewer fonts
- Less is better
Compress all images. There are many plugins for this purpose. I like kracken.io. They have a free online tool where you can drag and drop your images and choose which compression method you like best, and then download the result. There is also a WordPress plugin, and it starts at $5/month.
WP Smush is another popular image compression plugin for WordPress.
Besides compressing images, you’ll need to scale them properly. This prevents waiting for the server to re-size images. There are many resources to scale your images. In WordPress, there is a plugin Imsanity. Set the size for future uploaded images, and it automatically resizes them on upload. It can also resize previously uploaded images.
Read step-by-step directions how to fix slow loading images.
Store your website in browser cache, so on return visit, download will be a lot faster. In WordPress, plugins such as W3 Total Cache or ZenCache will cache your website pages.
In .htaccess file add this to leverage browser cache:
# 1 Week
Header set Cache-Control "max-age=604800, public, must-revalidate"
Each image, stylesheet, JavaScript file produces a request. Combine CSS and JavaScript files. Use Grunt or Gulp task processors to combine files into one. Sometimes WordPress plugins load extra files with them. You can use plugins, such as Minqueue or Autoptimize to minify and combine files. This will reduce the number of requests. Here’s an article on CSS-Tricks that discusses how to reduce requests that WordPress plugins load.
With wider use of HTTP/2 protocol, combining files won’t be so much of an issue, since it introduces Multiplexing, requesting multiple files at one.
Gzipping is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip,” says Yahoo.
Insert this code in .htaccess file (Make sure you keep a backup of that file. If you do anything wrong, it will turn your website into a white screen).
CDN is a Content Delivery Network that uploads your files on different servers throughout the world. They cache your site content, such as images, CSS, JavaScript files. When a user visits your site, CDN redirects them to the closest server to their location. It will make your pages load faster.
If your website receives a large amount of traffic at once, it might crash. CDN will help balance it.
Some of popular CDN’s are CloudFlare, KeyCDN, MaxCDN, Rackspace Cloud Files, Amazon Web Services.
Choose hosting wisely. There are many hosting companies out there. Some of them have drawbacks. Shared hosting is less expensive, but you share resources with many websites on the same server. Your server processing speed is now at the mercy of the load and performance of other, unrelated websites.
Use tools, such as Uptime Robot, to monitor and alert you if the site is down. It will send alerts via email, SMS, Twitter, and it will provide reports of uptime, downtime and response times.
Removing query strings will help speed up the website (and make it more secure), because it will hide it’s script version. Most plugins affix query strings to their URLs. Resources with a “?” or “&” in the URL are not cached by some proxy caching servers. You can’t cache a link with a “?” in its URL even if a Cache-control: public header is present.
If you right click on your site and view soure, you’ll see source code with URL’s that look like this:
http://sitename.com/wp-content/plugins/js/some_js?ver=3.4.2
To remove them, you can either use a plugin, Remove Query Strings from Static Resources or add this code to functions.php file:
More information about removing query strings from static resources.
Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use online broken link checker or use WordPress link checker for free.
Every font you load, creates an extra request. It adds time to your page load. Try to use no more then 2 fonts, and load only font-weights that you’ll actually use.
Plugins, Widgets and Ads, all add extra page load time. Remove unused CSS!
Limit file sizes for your ads – require smaller file size from ad providers.
Check how much time each ad network adds to your site:
From the Chrome Browser:
1. Right Click
2. Select “Inspect Element”
3. Click on the “Network” tab
4. Reload the page
You’ll see a bunch of lines pop up, each indicating an element of the page that has to load. Search for any ad networks you know you’re using (you can check for other plug-ins, such as analytics platforms, as well) and note the time associated with each.
In closing, I hope this article will help you better analyze your page performance, and implement some things to make it load faster
