Home / Tutorials / Tools to Improve Website Page Speed

Tools to Improve Website Page Speed

When it involves rising website page speed, less is commonly additional. It will be to a small degree of a frightening task to chop down on the various page speed intake areas, thus fortunately there are some website optimization tools out there to help!

Improving your website page speed not solely helps users convert, however it can even have an enormous influence on your search rankings moreover. several websites neglect the additional tedious initiatives that facilitate improve page speed and overall website quality, like a routine web site maintenance and security audits.

Overall, rising page speed will boost the quantity of search traffic returning to your website, and it can even increase the prospect that the traffic converts into paying customers.

Categorization of Toos

If you’re looking for a specific tool, you can skip to each section this way:

Without further delay, here’s the full list of tools!

Tools for Measuring Page Speed

You won’t know how to improve until you actually start measuring your website’s load time. There are dozens of helpful tools out there, but we don’t have time to talk about all of them. Instead,  So here are our favorites!

1. Pingdom Website Speed Test

 

pingdom

Pingdom provides a pretty quick and simple measurement of your website’s speed. A handy waterfall of all the requests made from the browser can give you some really good clues as to what is causing such a slow load time.

2. GTmetrix Performance Report

GTmetrix

GTmetrix also provides a simple waterfall report of what is loading and contributing to your page speed. Clicking each element will show additional recommendations as to what should be improved.

3. Google Chrome – Inspect Element

If you prefer to see the major contributors to your page speed within your browser, try viewing the Network tab of the Inspect Element tool for Chrome.

Right click anywhere on webpage -> Inspect Element -> Network

Google Chrome

 

This will give you a similar waterfall view as Pingdom and GTmetrix will, except it will be in the bottom of your browser on the page you are analyzing rather than going to a different website and entering the URL.

4. Google Analytics – Site Speed Page Timings

 

Google Analytics

When analyzing your site, Google Analytics might be the best route in actually measuring your pages load times. GA will actually list which pages are loading the slowest over time, allowing you to track your progress as you continue to improve your page speeds.

Suggestions for Improvement

The tools for measuring page speed might basically just tell you “wow, your load times are awful.” But where do you go from here?

Again, thankfully, there are some MORE tools out there to help you start the whole process. What’s your game plan? More often than not, especially if you’ve never looked at improving your page speed, there are some pretty simple fixes that can give your site a boost.

However, some of these tools can get pretty technical. If you don’t know JavaScript or how to edit your server settings, it may be best to avoid messing around those areas until you either feel comfortable making those changes, or have found someone who can.

Fortunately, tools 5-7 will most likely point out some very simple fixes that may quickly improve your load times.

5. Google Page Speed Tools – PageSpeed Insights

When it comes to measuring your website’s page speed, Google provides a perfect plan of attack from within the PageSpeed Insights tool.

Google Page Speed Tools

This tool will produce a score out of 100 based on several different page speed factors that are known to cause slow loading times. Mobile and desktop versions show separate scores depending on how well your site displays on different devices. It’s everything you could need to tell you how to improve website speed.

Inside the results, you’ll find a few different valuable pieces of info that you may consider in your next step of page speed improvement. Wherever you see a “Show how to fix” arrow is where you should take inventory of places to improve.

Google also provides a few different areas for you to access PageSpeed Insights in a more efficient and measurable way.

6. PageSpeed Insights Chrome Extension

It’s just easier to have access to the same data right in your browser rather than going to Google’s tool all the time to check your pages. Luckily, good ol’ Google made a way for that to happen with an easy-to-install Chrome extension.

When on any webpage, a simple right click followed by “Inspect Element” will give you a glance under the hood. With the extension installed, you can also view additional information on that page’s load time.

 PageSpeed Insights Chrome Extension

Upon clicking “Analyze,” you can now see all those great suggestions on how to increase website speed from before, right in your browser and on the same page.

7. Google Analytics – Site Speed Suggestions

Yet again, Google Analytics can provide some additional help for boosting your page speed. Actually, all it does is show the PageSpeed Insights score and suggestions within your GA dashboard. It’s technically not a different web page speed tool, but it is helpful to see it in a different way.

Site Speed Suggestions

A great way to use this tool is by sorting by load time or page views. You can then see which of your pages needs the most help, or view highly visited pages that might need improved. Analyzing your highly visited pages can quickly show you how you might gain an increase in conversion rate upon speeding up their loading times.

Okay, so you’ve measured your page speed with a website speed tool. You’ve even found some areas that need improving. It’s time to actually crack down and get your hands dirty. The next set of tools will help you do just that, depending on what you’re working on. We’ll touch base on the common (easier) areas that may need improvement and the tools you’ll need to make it happen.

Image Optimization Tools

Generally speaking, you don’t want your website to load a gigantic image, only to have it shrunk down by the HTML. This causes unnecessarily high page speeds! Optimizing your images is a great way to improve your page times, and this can be done in multiple ways. Tools 8-18 will help!

Image Resizing Tools
We couldn’t pick just one tool for this important step. Basically, you want your images to be exactly the same width and height that is needed on your site. That means you don’t want to have an image that is 1200 pixels wide, but shown on your blog at 300 pixels. You need to resize the actual image file to 300 pixels. This will cut down the size of your images and dramatically reduce load times.

Here’s a list of tools and tutorials you can do this with:

8. Resizing an image in Photoshop
9. Resizing an image in Paint
10. Resizing an image in Microsoft Picture Manager
11. Pixlr
12. Web Resizer
13. Shrink Pictures
14. Pic Resize

Image Compression Tools

Likewise, there are just as many compression tools out there as well! Image compression will combine similar colors and take out a lot of extra junk that your images don’t need. This sounds brutal, but you usually can’t tell a difference between images that are and aren’t compressed!

Image Compression Tools

You can also do this in Photoshop, but we found a few bulk compression tools online that might be easier to use:

15. Kraken.io (pictured above)
16. TinyPNG
17. An additional way to do this is with the PageSpeed Insights tool within the Google Chrome extension. Within the Optimize Images section, “See optimized content” links will appear next to each suggestion. You can open these, then save them for use on your website!

PageSpeed Insights tool

18. Lazy Load Images

You can go a step further in speeding up your images. In fact, you could just not load them at all! … that is, until the visitor actually needs to see them.

Lazy loaded images are prevented, via JavaScript, from loading until a certain event happens. This event can be time based, or it can be based on where your visitor is looking. For example, an image won’t load until the user scrolls far enough down the page to actually see it. This prevents your page on having to wait for an image to load that isn’t even going to be seen until several seconds (or even minutes) later.

Lazy load can be a complicated topic, but there are many lazy load WordPress pluginsand jQuery plugins that aren’t too difficult to set up if you know your way around HTML and JavaScript.

CSS Sprite Tools

Your site may have some images and icons that you made or found online to use throughout your site. A great way to save some space is by combining these images into CSS sprites (no, not the drink).

A CSS sprite allows you to have several images combined into one, saving the amount of times a browser has to talk to the server. Then some simple CSS divides the image up into sections to display the correct part where it is needed on the site.

CSS Sprite Tools

Combining the images and finding the correct dimensions for each section can be an annoying process. However, some cool folks made a few tools here and there to help ease the process!

19. Spritecow
20. SpritePad
21. Spritebox (pictured above)

Technical Optimization Tools

Okay, if you aren’t into the technical stuff, you may want to skip this part. Though, this isn’t too advanced and you may learn from it!

Upon optimizing the content you have created for your website, it may be time to take a look into areas of your framework that houses the content for areas of improvement.

22. W3 Total Cache

W3 Total Cache

If you use WordPress, you will greatly appreciate this free plugin. W3 Total Cache will take nearly every behind the scenes detail and optimize it for you. This includes cache control, CDN management, and code minification.

There’s a lot that W3 Total Cache can do, and it’s one of the most powerful plugins out there. That being said, it might be best to follow some in-depth tutorials on how to use it!

23. CloudFlare CDN

A CDN will shorten the distance between your website’s hosted server and the user trying to access it. This logistical improvement will speed up your website as it dynamically feeds your site via the shortest route to anyone around the world.

CloudFlare CDN

 

There are several CDNs out there, but CloudFlare’s is one of the best. It also just so happens to have a free plan for anyone to use!

CloudFlare is something that can easily intimidate users, as it is another super powerful tool for website management. But don’t fear: there are plenty of tutorials on getting it set up properly!

Tools to Minify Your Site’s Code

There is a lot of unnecessary space in the files included in your website. Browsers don’t really care about spaces beyond actual body copy, making all that easy-to-read code just wasted space. Minifying code will strip out all the extra whitespace. This condenses the file size, making it extremely hard to read, but still functional.

24. YUI Compressor can be used to minify your CSS and JavaScript.

YUI Compressor

25. You can also use Google PageSpeed Insights to minify your HTML. Just click “See optimized content” in the corresponding areas like described above for optimizing images.

26. If you use WordPress, there are several plugins to minify your code, including W3 Total Cache.

 

 

About cmadmin

Web Developer & Designer | Android App Developer

2 comments

  1. I seriously love your website.. Great colors & theme.
    Did you develop this website yourself? Please reply back as I’m wanting to create my own personal website
    and would love to know where you got this from or what the theme is named.
    Thanks!

  2. tani kredyt gotówkowy

    Thank’s great post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH