Why Page Speed Is Important – The 3-Second Mark Explained!

How fast does your website load? If the answer is anything other than “instantly”, you’ve got some tweaking to do. Metrics like page speed and time to first byte are some of the most crucial numbers surrounding your site’s performance. All it takes is a slight delay for a visitor to turn away. Mobile users are even more finicky, with over 50% calling it quits after just three seconds of waiting. If you want conversions, it’s your job to do everything you can to make sure your site loads fast on every device.

Defining Page Speed

The digital world is filled with vague acronyms and hard to define metrics. Fortunately, page speed isn’t one of them, as it’s a pretty straightforward area to dig into. We’ve broken the issue into a few common categories to help you zero in on the problem at hand.

Time to First Byte

Time to first byte is often considered separately from overall page speed, but the two share so many features it’s worth taking a look all the same. TTFB is a measurement of how much time passes between the moment a user clicks a link to your site and when the first byte of information is delivered. It includes every part of the data request and encompasses a host of individual elements, some of which aren’t even under your control!

As you probably guessed, TTFB is measured in milliseconds. Anything under 100 is considered good, while 200-500 ms is pretty standard. 500 ms to a full second isn’t so great, and if it takes more than a second to reach the first byte, you’ve got some work to do. A good rule of thumb is that if you notice your page doesn’t load right away, your TTFB needs attention.

Loading Times

The heart and soul of page speed lies in content loading times. Once a visitor is on your site you have to make sure they stay there. Assuming your SEO strategy is providing things they want to see, the next goal is to deliver data as quickly as possible. Loading times includes everything from rendering the structure of your site to displaying images and video streams. Click on a link and start the timer. It doesn’t stop until everything is loaded and in place.

Google defines a good content loading threshold as 2-3 seconds. The company itself aims for half a second, though, and that’s probably what you should aim for as well. If the crucial three second mark passes, visitors assume the link is broken and go about their day.

Page Speed and SEO

Did you know Google ranks websites on their overall page speed? Having a fast site can help you climb the search results ladder, all without having to reinvent your SEO strategy from scratch. The company doesn’t provide any details about exactly how speed ties into ranking, only that it does. This tells you one important piece of information: speed is important. Don’t ignore it!

How to Test Page Speed

Whether you think your site is a bit on the slow side or you’re pretty sure you’re in the clear, getting definite page speed numbers is always a good first step. Use the tools below to diagnose load times so you can see exactly what your site is doing each time someone pays a visit.

  • Google’s PageSpeed Tool – Getting information from the source of many web standards is always a good idea. One of Google’s many web developer tools includes PageSpeed. Simply enter a URL and hit enter, then choose between desktop and mobile rendering results. PageSpeed then outlines both speed and optimization, showing you a quick set of graphs along with optimization tips below.
  • YSlow – The open-source YSlow project is an incredibly useful tool for webmasters. The extension is available for a wide variety of browsers and runs in the background while you access your site as normal. YSlow then displays graded categories along with a component breakdown and overall site statistics.
  • WebPageTest – A detailed tool for checking site speed and load times. Gives each area a letter ranking and displays collected information in waterfall charts, allowing you to quickly spot trouble areas and get to work on fixing them.
  • ByteCheck – A simpler tool designed to measure time to first byte (TTFB) and provide a straightforward list of suggestions to make things run faster.

How to Improve Page Speed

The problems have been analyzed, the data has been collected. Now it’s time to regain some page speed and get on the right side of that three second marker!

Minify JavaScript and CSS

When site owners sit down to analyze their page speed, they rarely consider “itty bitty” things like JavaScript and CSS. They’re just small text files, how bad could they be, right? As it turns out, both make a huge difference in how quickly your site loads, especially when it comes to time to first byte.

Minifying JavaScript or CSS is an automated process that strips out unnecessary elements from the associated code to decrease file size and help browsers render things faster. The compression algorithm removes code comments and extra whitespace, things that are useful to humans but not for computers. These simple changes can reclaim a whopping 20-30% of your lost speed.

If you aren’t sure where to start, check out CSS Minifier for compressing CSS code and JavaScript Minifier for JavaScript.

Optimize Images

Aah, images. The delicious icing on your already delicious website cake. Be careful; overdoing it on PNG and JPG files can turn a snappy page into a loading nightmare. If certain elements are necessary for your site to run, though, or if they genuinely enhance the user experience, you should look into optimizing them for the web.

The process works a lot like minifying code above, only instead of removing blank spaces, it streamlines how the image stores information. Automated tools can drop an image’s size in an instant. Set up a script to automate the process for each image you upload, or use a tool like Optimizilla to do it in batches. Either way, you’ll reclaim a lot of file size and page loading speed in the process.

Use Browser Caching

Parts of your site look the same across pages, right? Chances are you use a persistent header and footer, too. If someone clicks around your publication there’s absolutely no need to reload those assets each and every time. This is where browser caching comes into play. By storing common elements in a user’s cache, you can dramatically increase page speed by only serving the unique content.

Google has a full insights page on browser caching, complete with methods and proper procedures. Read it, learn it, implement it.

Use a Content Delivery Network

Content delivery networks, or CDNs, were once reserved for massive publications which served millions of pages a month. Now they’re as easy and convenient to use as any other hosting provider, making them an excellent choice for webmasters looking to take a load off of their own servers.

CDNs store static content displayed on your pages and deliver them faster than most standard service providers. They’re perfect for images and videos, and they let you focus your server’s power on the meat of your publication, pushing all the heavy lifting to dedicated computers elsewhere. Amazon S3 is one of the more affordable and popular CDN storage services and can be a great starting point if you think a CDN is a good idea.

Reduce HTTP and File Requests

Each HTTP or file request your site makes eats up time. If it’s making dozens or even hundreds of requests per reload, you’re looking at adding seconds to a visitor’s wait each time they click. The trick to reducing these requests is to change how you think about your site. Do you really need to load ten different files when a line of CSS code can achieve a similar result? Does that “ok” button really need to be an image, or will a line of text work just as well?

Use Gzip

Running Gzip server-side will compress content before it even hits the internet. It’s the same as zipping a file before e-mailing it to a friend, only it’s much faster and handled quietly in the background. Delivered content is compressed, sent to the user’s browser, then unzipped and displayed in an instant. Most Gzip users can drop around 70% of their content’s file size with this one easy trick.

Not sure if your site is using Gzip? Run the Gzip test to find out.

More Page Speed Improvements

We’re not done yet! Improving site speed is a nuanced business. You can tweak and research and refine for weeks, then stumble upon something newer and better just afterwards! Below are a few extra suggestions to help you stay on top of things.

WordPress Speed Optimizations

If you run your site using WordPress, there are plenty of useful plug-ins you can install designed to speed up page loads and reduce time to first byte. We picked out a few of the best ones below.

  • Autoptimize – A powerhouse of WordPress optimization, this handy tool aggregates, minifies, and caches scripts to dramatically reduce server load. One of the best speed-related plug-ins around.
  • WP Super Cache – If caching is your game plan, WP Super Cache is the solution you should turn to. Developed by the WordPress team themselves, this plug-in generates static files from your dynamic blog and only hits the server for new content when absolutely necessary.
  • WP Image Compression – Reduce the size of your images as they’re uploaded, cutting 65-80% of the file size with practically no data loss.

Use Static Content

Dynamic content is pretty, and it can be useful in certain situations, but do you really need it? Ditch dynamic content whenever possible. If a flat HTML or PHP file serves the same purpose, run with it and don’t look back.

Focus on Hardware

A lot of your speed issues could be related to your hosting company. Run the tests above on different days and see if they change dramatically. You may need to upgrade your plan or even switch companies to improve load times.

Reduce, Reduce, Reduce

Less is more, and less is faster, too. Take a virtual hatchet to your entire website empire and see what you can get rid of.

Page Speed and Mobile Devices

All of the site loading issues mentioned above go double for mobile traffic. Smartphone surfers are impatient, easily distracted, and have limited hardware resources at their disposal. Small delays get to them faster than many desktop users, making them a key target for your speed improvement efforts. Below are a few mobile-specific tips you should pay attention to.

Don’t Use Images

Unless there’s no other option available, get rid of every image on your site. They’re slow to send, they take up a lot of screen real estate, and if they don’t load completely, it might break your site. Switch to CSS for button styling and reserve images for product pictures and the like. Make sure the images you do use are heavily optimized to reduce file size, as well.

Ditch the Modern Tech

Know what kind of page is perfect for mobile devices? An old school HTML file. Incredibly lightweight, easy to look at, identical layout on multiple screens, and so much more. If you don’t need dynamic content or fancy scripts to prop up your site, pretend it’s 1995 and get back to the basics.

Separate Heavy Content

If you’ve got a large video or a graphically intense portion of your site, try splitting it into its own section. This forces users to click to begin the loading process, and it can save your site loading times from the dreaded three second marker.

Forget External Elements

Loading fonts or images from external sources is a bad idea for mobile devices. This increases the number of requests your site makes and makes it more likely that something won’t load correctly. Unless your content is delivered by a CDN, host everything locally, and keep it simple.

Conclusion

Page speed is the invisible backbone that forms the structure of your successful website. Bad page speed ruins everything from conversions to SEO ranking, and good page speed boosts Google Page Rank and keeps users happy. Remember: three seconds is all you have. Aim for less than one and settle for two, but never stop trying to optimize your site’s speed!

mobee

mobee

COMMENTS