Which loads faster

Loading files asynchronously can speed up your pages because when a browser loads a page, it moves from top to bottom.

If it gets to a CSS or JavaScript file that is not asynchronous, it will stop loading until it has fully loaded that particular file. If that same file were asynchronous, the browser could continue loading other elements on the page at the same time. Deferring a file means preventing it from loading until after other elements have loaded.

If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay. For more information, check out this tutorial on defer loading JavaScript. Time to first byte , or TTFB, is the amount of time a browser has to wait before getting its first byte of data from the server. Google recommends a TTFB of less than ms. Unlike a lot of the front-end performance factors most site owners focus on, this is a server-side concern.

When a user visits your site, their browser sends an HTTP request to the server that hosts it. There are three steps that need to happen between that initial request and the first byte of data:. So the slower your own connection, the slower your server response will appear.

You can also use any number of free third-party tools like WebPageTest test your site from a data center. In general, most issues with slow TTFB are caused by either network issues, dynamic content creation, web server configuration, and traffic. Of these four factors, you have control over two: Dynamic content creation and server configuration. If you have a WordPress site, your pages are most likely dynamic.

One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes. A DNS, or domain name system, is a server with a database of IP addresses and their associated hostnames. You can think of it as your computer looking up a number in a phone book.

It will get an IP address like This step prevents users from needing to memorize long strings of numbers to access information online. The amount of time this step takes depends on how fast your DNS provider is.

If not, it may be time to switch to a faster DNS provider. You can check out this DNS speed comparison report , which is updated monthly, to get an idea of where your provider stacks up, and see which providers offer higher speeds. Switching to a faster DNS provider can speed up the process. Most new site owners choose the cheapest possible option for hosting. There are a great set of the reviews on the best web hosts here.

Shared hosting is the cheapest option and you can often get it for about five dollars per month. And it is possible for your site to be impacted by traffic spikes from other sites using the same server as you. With shared hosting, you share certain resources like CPU, disk space, and RAM with other sites hosted on the same server. This is a good in-between option.

It protects your site from everyone else on your server without the cost required for dedicated hosting. KeyCDN explains this using the analogy of living in an apartment vs. There are also fewer residents in the building. You can look at dedicated hosting, then, as owning a home. With a dedicated server, you have much more space — but you also have more work to do with configuration and technical setup.

Pages with lots of images and other content can often end up being over KB in size. To get a sense of how compression could speed up your site, you can use GIDNetwork to run a compression audit. This tells you the uncompressed size of your page, which you can later use as a benchmark to measure the results of compression.

The smaller your files, the faster your pages will load. Compressing files is one of the easiest ways to reduce load times, and today, enabling compression with Gzip is considered standard practice. Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.

Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:. When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage.

This means that the next time you visit the site, your browser can load the page without having to send another HTTP request to the server. The first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page.

That may be as many as 30 components and 2. But enabling caching can shave off a significant amount of time of returning visitors and provide a better user experience.

This means that when a user returns to your site, it will load faster. If you use a VPS or dedicated server, you can also enable object caching to speed up dynamic elements on your site. Object caching is a resource-intensive process and can end up slowing down your site — the exact opposite of what you want to accomplish with the plugin. You can add lines of code that tell browsers what to cache and how long to store it, which will look something like this :. In general, static resources should have a cache lifetime of at least a week.

Third-party resources like ads or widgets should have a cache lifetime of at least one day. Images can play a major role in your site speed. One of the best ways to get your conversion rate to this level is including lots of helpful product images. This means that if you want to run a successful eCommerce site , images are absolutely necessary.

That also means image compression i s critical — and this is important whether your site includes an eCommerce store or not. You can see how big of an impact images make on any of your pages with a tool like Pingdom. R educing their size could likely have a big impact on how long the page takes to load. One of the easiest ways to reduce image file sizes is cropping your images to the correct size.

For example, if you want an image to appear as px wide, resize the image to that width. This requires your page to load the full image, then adjust it to the appropriate size, slowing your page. If you use the width parameter to make images appear smaller on your site, resizing those images should be a priority. You can also use this plugin to automatically resize all of the new files you upload.

Before adding an image to your site, upload it into this tool and select whether you want lossy or lossless compression. JPG is generally your best option for photos. This data loss is undetectable to viewers in photos, but results in a smaller file size than most image file types. PNGs, on the other hand, use lossless compression. If you need to have clear lines and crisp detail, PNG is the way to go.

This is the best option for logos, screenshots, line art, and other detailed graphics. In particular, make sure to avoid empty image src codes. This can add unnecessary traffic to your servers and even corrupt user data. Fortunately, this is an easy fix to make. Either add the file path of the image you want to include, or remove the extra tags altogether. Beyond the server that hosts your site, you can also use other networks of servers to decrease load times for your visitors.

When your site is hosted on one server, each user who visits it sends requests to that same server. This means that when your site experiences high levels of traffic, the time it takes to process each request increases, slowing down load times for all of them. When you consider that high-traffic times typically present a ton of growth potential for your business, this is far from ideal.

With a CDN, you cache your site on a global network of servers. Your network might look something like this :. If a user from South Africa visits your site, thir browser could download files from a nearby server. The content that user receives is identical, but can load much faster than it would if their browser were making requests to a server that was geographically far away.

This eliminates loading lags and latency issues that users located far from hosting servers sometimes experience. The exact improvements vary between page, with pages that have lots of large images benefitting the most from a CDN. They have more data centers and focus solely on improving load times. The one you choose depends on whether you want those extra features, or just want to focus on improving speed.

Configure expires headers. When a user visits your website, the website files are stored on their computer so that your website loads faster for them the next time they visit. There is an expiration date in the file header that determines how long these files will be stored on their computer, which is usually set to 24 hours by default.

By removing unnecessary line breaks, extra space, and so on, you will speed up parsing, downloading and executing. This simple task can cut bytes of data from your page, and every little bit counts. Lucky for you, we've got just the solution. Check out the new solution by clicking the graphic below! Want to read more? Web Design Trends and Standards for The Benefits of a WordPress Website. Stay in the Loop Join Our Newsletter Stay ahead of the pack with the latest news, web design advice, and digital insights, delivered straight to your inbox.

Please Enter Email. This field is for validation purposes and should be left unchanged. Company About Blog Careers. All rights reserved. You can host the files on your own site and tweak them to suit your own nefarious plans.

We promise not to tell. Questions, bug reports and ideas happen on the mailing list. This version of whichloadsfaster is hosted at a subweb of ZOMDir. Which loads faster? Splash screen About Copyright Features:. Right: GO. How many times?

Copyright Ryan C. All rights reserved.