Page speed is one of the most important factors in keeping users engaged on your website. It is so important, that Google even uses it as a ranking factor. You can have the most beautiful site in the world, but if it takes longer than 3 seconds to load, your visitors might bounce before they even get to see it. Don’t worry! We are here to help.

This post is going to cover everything you will need to improve your page speed. A few of the topics we’ll cover are, what tools are the best for testing your site, the biggest steps you can take to improve your page speed, and how to keep your site fast over time.

 

What are the best tools for testing your site?

Here are the best tools for testing your site:

Each tool is different and all of them are useful in their own way.

 

GTmetrix

 

GTmetrix, does an awesome job of displaying everything you need. After running a test, you get performance scores from Google’s PageSpeed and Yahoo! YSlow rulesets. You’ll also see page details such as fully loaded time in seconds, total page size in bytes, and requests. GTmetrix also breaks down the factors that are affecting your page for both PageSpeed and YSlow by showing recommendation, grade, type, and priority. This is great for generating a list of items that you can tackle to improve your page speed.

You can also use the waterfall section to determine any speed bottlenecks that are occurring during page load. This is great for determining large images/videos and too many requests

 

Pingdom

 

Pingdom’s Website Speed Test is a quick way to get a gauge of how your page is performing. Pingdom lets you pick where the test is performed from for better accuracy. When viewing the results, you can see your performance grade out of 100, page size, load time, and requests. Pingdom also gives you areas to improve upon, but their suggestions are much more general compared to the other tools. You can also view the file request waterfall to determine bottlenecks.

 

PageSpeed Insights

 

Google’s PageSpeed Insights is a great tool for seeing what Google determines to be a ranking factor when it comes to page speed. Google gives you a grade on a scale from 0-100 with 0-49 being slow, 50-89 being average, and 90-100 being fast. The most helpful sections in PageSpeed Insights are the opportunities and diagnostics sections. The opportunities section gives you suggestions on how to speed up your page load, while the diagnostics section gives you more general tips on improving speed.

 

WebPageTest

 

And now for Webpagetest. The beast! This tool is the most complex of the four and gives you a ton of advanced testing options. Under simple testing, you can add your URL and select whether you want to run the test on desktop, mobile – 4G, mobile – regular 3G, or mobile slow 3G. The slow option is great if you know you have a lot of users with slower internet connections.

Under advanced testing, you can select device, location, and browser as well as selecting things like number of tests to run and connection type. This allows you to really get down to the nitty gritty and ensure your pages are performing optimally no matter the circumstance.

Webpagetest is also the best for diagnosing issues that could be causing specific pages to load slower than the rest of the site. This is due to how much information you receive after running a test.

Webpagetest gives you five letter grades for first byte time, keep-alive enabled, compress transfer, compress images, and cache static content. You can also use their in-depth waterfall to diagnose problems.

 

Don’t forget about mobile

 

Many page speed tools focus on desktop, which is fine since fixing the issues shown will most likely help improve your mobile speed as well. But what about issues that only affect mobile devices? It is extremely important to also test your page speed on mobile. That is why Google created a Mobile Speed Test powered by Webpagetest. This test shows you loading time in seconds on a 3G network as well as estimated visitor loss (due to loading time). Google also shows you an industry comparison and an estimated load time once the top issues are fixed.

This tool also generates a free report that is sent to you via email. This report includes detailed fixes that you can implement to speed up your site on mobile devices. The report focuses on reducing page weight and reducing the number of requests.

 

The most common ways to improve your page speed

  1. Compress Images – This is the most frequent issue we see slowing pages down. Make sure every single image on your site is compressed. There are a ton of free image compression tools out there, but a few of our favorites here at Element5 are TinyJPG, Shrink Me, Optimizilla, and Kraken. If you are on WordPress, you can also download the plugin WP Smush Image Compression and Optimization to compress your media gallery.
  2. Serve scaled images – Be sure to use the smallest displayed image size depending on the screen size. If your page uses a headshot for a thumbnail, make sure it doesn’t use the 2000×1000 version of the image.
  3. Enable browser caching – Depending on your hosting company, this may be a built-in feature. If not, you can add some code to your .htaccess file to get the job done. Here is some basic browser caching code:

<IfModule mod_expires.c>
  ExpiresActive On
 
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
 
  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
 
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
 
  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

  1. Enable compression – Compressing your files gets the file sizes down without sacrificing quality. Some files may only be compressed by 50KB, but when you add that up over 50 files you start to really save on page size. To enable gzip compression, add the following to your .htaccess file:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

  1. Minify CSS, JavaScript, and HTML – Minifying the code on your site helps reduce the size of files and improves the overall time it takes to load those files. You can also combine all of these files into as few as possible to reduce the number of requests the browser has to make back to the server.
  2. Remove render-blocking JavaScript – Before the browser can begin to render a page, it has to build the DOM tree by parsing the HTML markup. Whenever a script is encountered, the browser has to stop and execute it before continuing to parse the HTML. There are many steps you can take to avoid this. Make sure you inline any small JavaScript, make JavaScript asynchronous, and defer the loading of JavaScript.
  3. Improve server response time – This can be done by using a faster DNS. The faster the server response time is, the shorter amount of time it takes for your requests. We recommend using GoDaddy or Cloudflare for your DNS, but there are also many good options out there.
  4. Use a Content Delivery Network (CDN) – CDN’s help to decrease load times for your visitors by caching your site on a global network of servers. When a user’s browser requests files from your site, the request is routed to the closest server. Your host may offer a free CDN limited to a certain amount of bandwidth. If not, some good options are Cloudflare, MaxCDN, and Fastly.
  5. Reduce DNS lookups and make fewer HTTP requests – Every request that has to be made to the server takes time. Your goal should be to reduce the amount of DNS lookups to as little as possible. If possible, host third-party resources locally such as fonts and scripts. Another good way to reduce DNS Lookups is to remove any unnecessary third-party integrations such as old pixels and tracking scripts.

 

How to keep your site fast over time

To maintain a fast site, it is important to continually monitor your page speeds. This is especially true if there are multiple people making changes to the site over time. Put a plan in place to monitor the speed of the main pages on your site, whether it be monthly, quarterly, or yearly. The more the better!

Some of the suggestions above will automatically keep your site from slowing down such as enabling compression and browser caching. If you are on WordPress you can also add plugins such as Autoptimize to minify and compress files, WP-Optimize to keep your database fast and efficient, and Smush Image Compression and Optimization for keeping your images optimized.

 

I want a fast site, but don’t have time for any of this

If you want a lightning fast site but don’t have the time to get it there, just give us a call or reach out to us. Element5 focuses on creating the fastest sites possible to keep your visitors on the path to converting.

Sort

Author

Nick Fischer

Developer

View All Stories By Nick

    Leave a Reply

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