- \n
- 11% fewer page views<\/li>\n\n\n\n
- 16% decrease in customer satisfaction<\/li>\n\n\n\n
- 7% loss in conversions<\/li>\n<\/ul>\n\n\n\n
Your site taking a few extra seconds to load will have a negative <\/b>impact on your ability to engage visitors and make sales.<\/p>\n\n\n\n
There’s no getting around it.<\/p>\n\n\n\n
This means that having a fast site is essential \u2014 not just for ranking well with Google<\/a>, but for keeping your bottom-line profits high.<\/p>\n\n\n\n
How website speed optimization influences conversions<\/h2>\n\n\n\n
Slow sites kill conversions<\/a><\/u>. And can never recover.<\/p>\n\n\n\n
In fact, 47% of consumers expect websites to load in two seconds or less. And 40% will abandon a page that takes three or more seconds.<\/p>\n\n\n\n
If your site takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site.<\/p>\n\n\n\n
Yes, you read that right.<\/p>\n\n\n\n
That alone is a huge <\/em>blow to your potential conversions.<\/p>\n\n\n\n
And for the visitors that decide to stick around, your slow load times can deter them from returning in the future. In one survey, 79% of customers<\/a><\/u> said they would not return to a site with poor performance.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231252\/Pasted_Image_2_9_18__3_10_PM.png\" "\\"speed")
<\/figure>\n\n\n\nIn that same survey, 52% of shoppers said that quick page loading is important to their site loyalty and 44% said they tell their friends about poor site experiences.<\/p>\n\n\n\n
This survey also discovered that a one-second delay can decrease customer satisfaction by about 16%.<\/p>\n\n\n\n
One of the best examples of this is Walmart\u2019s improvement in conversions and revenue after increasing their site speed.<\/span><\/p>\n\n\n\n
During their initial analysis, they found that visitors who converted had received pages that loaded two times as fast as the visitors who did not convert.<\/span><\/p>\n\n\n\n
![\"walmart](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/16155528\/walperform.png\")
<\/a><\/figure>\n\n\n\nThis showed that the faster a page, the more likely a visitor was to make a purchase.<\/p>\n\n\n\n
At the end of their website speed optimization<\/a>, Walmart reported the following results:<\/p>\n\n\n\n
- \n
- For every one second of site speed improvement they experienced up to a 2% increase in conversions.<\/li>\n\n\n\n
- For every 100 ms of improvement, they grew incremental revenue by up to 1%.<\/li>\n<\/ul>\n\n\n\n
In another study, the relationship between load times and conversion rates showed a 25% decrease in conversion rates<\/a><\/u> with just one extra second of load time.<\/p>\n\n\n\n
![\"loading](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231212\/loading-time-conversions.png\")
<\/figure>\n\n\n\nIt\u2019s clear that putting in the effort to increase your site speed \u2014 even by one second \u2014 could have a major impact on conversions.<\/p>\n\n\n\n
How to find out what’s killing your conversions<\/a><\/p>\n\n\n\n
How your website speed influences visibility<\/h2>\n\n\n\n
Now that Google takes speed into consideration when ranking sites your load times can also influence how easily users can find you in the first place.<\/p>\n\n\n\n
This is especially true now that it is rolling out its mobile-first index<\/a><\/u>. <\/p>\n\n\n\n
You have heard about this right?<\/p>\n\n\n\n
As of December 2017, the search engine has started ranking all search results based on the mobile versions of pages.<\/p>\n\n\n\n
Mobile searches outnumbered desktop searches<\/a><\/u> for the first time in 2015, and its share of the overall search only continues to grow.<\/p>\n\n\n\n
This means that it\u2019s in Google\u2019s best interest to cater its search results to mobile users. They don\u2019t want to direct their users to sites that won\u2019t load or function well on their devices.<\/p>\n\n\n\n
As a result, mobile user experience will now play a major role in search rankings \u2014 even in desktop search results.<\/p>\n\n\n\n
This is the exact opposite<\/a><\/u> of how the index used to work.<\/p>\n\n\n\n
User experience has long been a factor in rankings, but prior to this shift, it only took desktop experience into consideration. So even if a site provided a poor mobile experience, it still had a shot at ranking on page one.<\/p>\n\n\n\n
This is no longer the case.<\/p>\n\n\n\n
Now, pages are indexed and ranked based on the experience they provide mobile users.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231137\/mobile-first-180.jpg\")
<\/figure>\n\n\n\nSo if you want to maintain (or improve) your rankings and visibility, it\u2019s essential to know how to reduce loading time of website. You must have a site that provides a quick, easy user experience \u2014 on any browser or screen size.<\/p>\n\n\n\n
Why is my website slow?<\/h2>\n\n\n\n
You\u2019ve conducted a site speed test and found your load time is pretty slow. (If you don\u2019t know how to do a site speed test, I will explain later on in this post). <\/span><\/p>\n\n\n\n
There could be a number of reasons why your site load time is lagging. It could be anything from server load time to image size to the number of redirects you have. <\/span><\/p>\n\n\n\n
That means there are a whole bunch of steps you can take to improve page speed. We\u2019ll look at 20 of them. But before you start troubleshooting to improve website performance, you need to have something to aim for. <\/span><\/p>\n\n\n\n
Let\u2019s take a look at what\u2019s considered a good load time, to give you something to shoot for.<\/span><\/p>\n\n\n\n
What is a good page load time?<\/h2>\n\n\n\n
Before you start working on your site\u2019s speed, it\u2019s a good idea to set a goal for where you want it to be.<\/p>\n\n\n\n
That can be difficult if you aren\u2019t sure what an acceptable page speed is.<\/p>\n\n\n\n
According to Google, best practice is three seconds. Unfortunately, according to its recent benchmark report findings<\/a><\/u>, most sites are nowhere near that.<\/p>\n\n\n\n
In an analysis of 900,000 mobile ad landing pages spanning 126 countries, Google found that 70% of the pages analyzed took nearly seven seconds for the visual content above the fold to display.<\/p>\n\n\n\n
Of all the industries they included, none had an average even close to their recommended best practice of three seconds.<\/p>\n\n\n\n
![\"industry](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231143\/industry-average-speed.png\")
<\/figure>\n\n\n\nThe average time it takes to fully load a mobile landing page is 22 seconds, but 53% of visits are abandoned if a mobile site takes longer than three seconds to load.<\/p>\n\n\n\n
Plus, as page load time goes from one to ten seconds, the probability of a mobile user bouncing increases by 123%.<\/p>\n\n\n\n
![\"bounce](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231133\/bounce-probability.png\")
<\/figure>\n\n\n\nThis means that site owners in general have a lot <\/em>of work to do to get their sites up to par in Google\u2019s eyes.<\/p>\n\n\n\n
But on the upside, it also means that if you put in the work to get your site speed to an acceptable level, you\u2019re well ahead of the pack in terms of user experience.<\/p>\n\n\n\n
As you improve your site, you can use Google\u2019s recommendations and benchmarks to set your goals and measure your performance.<\/p>\n\n\n\n
After all \u2014 as the largest search engine in the world, Google can have a major impact on your success. So using their standards as your <\/em>standards is never a bad idea.<\/p>\n\n\n\n
How to speed up your website<\/h2>\n\n\n\n
There are tons of factors that influence how long each page on your site takes to load, so there are many different steps you can take to increase your speed and improve user experience.<\/p>\n\n\n\n
In this post, we\u2019ll go over 20 tips and best practices you can use to decrease your load times and improve your site\u2019s performance.<\/p>\n\n\n\n
And if that number sounds overwhelming \u2014 don\u2019t worry.<\/p>\n\n\n\n
While all of these tips can help you improve your site speed, you don\u2019t need to do all of them today.<\/p>\n\n\n\n
In fact, if you\u2019ve worked on your site speed in the past, your site may already be in line with some of these best practices.<\/p>\n\n\n\n
With that in mind, let\u2019s get started.<\/p>\n\n\n\n
1. Minimize HTTP requests<\/strong><\/h3>\n\n\n\n
According to Yahoo, 80% of a Web page\u2019s load time<\/a><\/u> is spent downloading the different parts of the page, like images, stylesheets, and scripts.<\/p>\n\n\n\n
An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.<\/p>\n\n\n\n
The first step to minimizing your requests is to figure out how many your site currently makes, to use as a benchmark.<\/p>\n\n\n\n
If you use Google Chrome, you can use the browser\u2019s Developer Tools to see how many HTTP requests your site makes.<\/p>\n\n\n\n
Right-click on the page you want to analyze, and click \u201cInspect,\u201d then click the \u201cNetwork\u201d tab. (If you don\u2019t see the \u201cNetwork\u201d tab, you may need to expand the Developer Tools sidebar by dragging the left border to the left.)<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231324\/chrome-dev-network.png\")
<\/figure>\n\n\n\nThe \u201cName\u201d column shows all of the files on the page, the \u201cSize\u201d column shows the size of each file, and the \u201cTime\u201d column shows how long it takes to load each file.<\/p>\n\n\n\n
In the bottom left corner, you\u2019ll also see the number of total requests the site makes.<\/p>\n\n\n\n
Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary.<\/p>\n\n\n\n
You may not notice anything immediately, but some of them are likely prime candidates for combining \u2014 which we\u2019ll get to in the next steps.<\/p>\n\n\n\n
2. Minify and combine files<\/strong><\/h3>\n\n\n\n
Now that you know how many requests your site makes, you can get to work on reducing that number. The best place to get started is with your HTML, CSS, and JavaScript files.<\/p>\n\n\n\n
These are extremely important files, as they determine your site\u2019s appearance.<\/p>\n\n\n\n
They also add to the number of requests your site makes every time a user visits it.<\/p>\n\n\n\n
You can reduce this number by “minifying” and combining your files. This reduces the size of each file, as well as the total number of files.<\/p>\n\n\n\n
This is especially important if you use a templated website builder. These make it easy to build a website, but they sometimes create messy code that can slow your site considerably.<\/p>\n\n\n\n
Minifying a file involves removing unnecessary formatting, whitespace, and code.<\/p>\n\n\n\n
Since every unnecessary piece of code adds to the size of your page, it\u2019s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.<\/p>\n\n\n\n
Combining files is exactly what it sounds like. If your site runs multiple CSS and JavaScript files, you can combine them into one.<\/p>\n\n\n\n
There are several ways to minify and combine files, and if your site runs on WordPress, plugins like WP Rocket<\/a><\/u> make the process fairly simple.<\/p>\n\n\n\n
If you have this plugin installed, go the \u201cStatic Files\u201d tab and check the files you want to minify and combine.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231308\/pasted-image-0-12.png\")
<\/figure>\n\n\n\nThis can include HTML, CSS, and JavaScript files, as well as Google Fonts.<\/p>\n\n\n\n
Then, hit \u201cSave Changes\u201d to complete the process. You can reload your page and look at Developer Tools again to see the impact that your changes made.<\/p>\n\n\n\n
When it comes to your website, leaner is better. The fewer elements on a page, the fewer HTTP requests a browser will need to make the page render \u2014 and the faster it will load.<\/p>\n\n\n\n
3. Use asynchronous loading for CSS and JavaScript files<\/strong><\/h3>\n\n\n\n
Once you\u2019ve minified and combined some of your files, you can also optimize the way that they load on your pages.<\/p>\n\n\n\n
Scripts like CSS and JavaScript can be loaded in two different ways: Synchronously or Asynchronously.<\/p>\n\n\n\n
If your scripts load synchronously, they load one at a time, in the order they appear on the page. If your scripts load asynchronously, on the other hand, some of them will load simultaneously.<\/p>\n\n\n\n
Loading files asynchronously can speed up your pages because when a browser loads a page, it moves from top to bottom.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Using the same \u201cStatic Files\u201d tab of the WP Rocket plugin, check the options next to \u201cRender-blocking CSS\/JS.\u201d<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231105\/pasted-image-0.png\")
<\/figure>\n\n\n\nClick \u201cSave Changes,\u201d then test your site to make sure that everything loads correctly.<\/p>\n\n\n\n
4. Defer JavaScript loading <\/strong><\/h3>\n\n\n\n
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.<\/p>\n\n\n\n
If you have a WordPress site, you can use the WP Rocket plugin<\/a> mentioned above to easily enable deferred JavaScript loading. Simply check the box next to \u201cLoad JS files deferred,\u201d and you\u2019re good to go.<\/p>\n\n\n\n
If you have an HTML site, you\u2019ll need to place a call an external JavaScript file just before the <\/body> tag, which looks something like this:<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231255\/defer-js.png\")
<\/figure>\n\n\n\nFor more information, check out this tutorial on defer loading JavaScript<\/a><\/u>.<\/p>\n\n\n\n
5. Minimize time to first byte<\/strong><\/h3>\n\n\n\n
In addition to the amount of time it takes for your page to fully load, you\u2019ll also want to take a look at the amount of time it takes to start <\/em>loading.<\/p>\n\n\n\n
Time to first byte<\/a><\/u>, 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 200 ms<\/a><\/u>.<\/p>\n\n\n\n
Unlike a lot of the front-end performance factors most site owners focus on, this is a server-side concern.<\/p>\n\n\n\n
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:<\/p>\n\n\n\n
- \n
- DNS lookup<\/li>\n\n\n\n
- Server processing<\/li>\n\n\n\n
- Response<\/li>\n<\/ol>\n\n\n\n
You can see how long this process takes for your site using either Chrome\u2019s Developer Tools or a third-party tool.<\/p>\n\n\n\n
If you use Developer Tools, it\u2019s important to remember that response time can be affected by your Internet connection. So the slower your own connection, the slower your server response will appear.<\/p>\n\n\n\n
To access this information in Developer Tools, click the \u201cNetwork\u201d tab and mouse over the top item in the \u201cWaterfall\u201d column.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231201\/ttfb-chrome.png\")
<\/figure>\n\n\n\nYou can also use any number of free third-party tools like WebPageTest<\/a><\/u> test your site from a data center.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231226\/webpagetest.png\")
<\/figure>\n\n\n\nIf your TTFB is under 200ms, you\u2019re in good shape.<\/p>\n\n\n\n
If not, there could be a few different issues at the root.<\/p>\n\n\n\n
In general, most issues with slow TTFB<\/a><\/u> are caused by either network issues, dynamic content creation, web server configuration, and traffic.<\/p>\n\n\n\n
![\"ttfb](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231247\/ttfb-causes.png\")
<\/figure>\n\n\n\nOf these four factors, you have control over two: Dynamic content creation and server configuration.<\/p>\n\n\n\n
Unlike with static pages, a server needs to \u201cbuild\u201d a dynamic file before responding.<\/p>\n\n\n\n
![\"static](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231204\/static-dynamic.png\")
<\/figure>\n\n\n\nIf you have a WordPress site, your pages are most likely dynamic. This means that they need to interact with a database to be \u201cbuilt\u201d with PHP before they are delivered.<\/p>\n\n\n\n
You can reduce the time that this takes by enabling caching \u2014 which we\u2019ll get to in a minute.<\/p>\n\n\n\n
6. Reduce server response time<\/strong><\/h3>\n\n\n\n
One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes.<\/p>\n\n\n\n
A DNS, or domain name system, is a server with a database of IP addresses and their associated hostnames. When a user types a URL into their browser, a DNS server is what translates that URL into the IP address that indicates its location online.<\/p>\n\n\n\n
A DNS lookup, then, is the process of a finding a specific DNS record. You can think of it as your computer looking up a number in a phone book.<\/p>\n\n\n\n
For example, let\u2019s say you wanted to visit the URL ubnt.com. You\u2019d type this into your browser \u2014 but that means very little to your computer.<\/p>\n\n\n\n
Your ISP will perform a DNS lookup to find the IP address associated with that URL.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231328\/pasted-image-0-14.png\")
<\/figure>\n\n\n\nIt will get an IP address like 52.40.57.158.443, which tells it where to find the site you\u2019re looking for. This step prevents users from needing to memorize long strings of numbers to access information online.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
You can check out this DNS speed comparison report<\/a><\/u>, which is updated monthly, to get an idea of where your provider stacks up, and see which providers offer higher speeds.<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231139\/pasted-image-0-6.png\")
<\/figure>\n\n\n\nIf you\u2019re using a slow DNS, this increases the time it takes for browsers to locate your site. Switching to a faster DNS provider can speed up the process.<\/p>\n\n\n\n
7. Choose the right hosting option for your needs<\/strong><\/h3>\n\n\n\n
Most new site owners choose the cheapest possible option for hosting. While this is often enough in the beginning, you\u2019ll likely need to upgrade once you start getting more traffic<\/a>. Don\u2019t skimp on your host, get one that you can trust. There are a great set of the reviews on the <\/span>best web hosts here<\/span><\/a>.<\/span><\/p>\n\n\n\n
When looking at hosting, you have three different options:<\/p>\n\n\n\n
- \n
- Shared hosting<\/li>\n\n\n\n
- VPS hosting<\/li>\n\n\n\n
- Dedicated server<\/li>\n<\/ul>\n\n\n\n
Shared hosting is the cheapest option and you can often get it for about five dollars per month. While it\u2019s fine for low-traffic sites, shared hosting does struggle to keep up with traffic spikes and high-volume sites. And it is possible for your site to be impacted by traffic spikes from other sites using the same server as you.<\/span><\/p>\n\n\n\n
With shared hosting, you share certain resources like CPU, disk space, and RAM with other sites hosted on the same server.<\/p>\n\n\n\n
With VPS hosting, you still share a server with other sites, but you have your own dedicated portions of the server\u2019s resources. This is a good in-between option. It protects your site from everyone else on your server without the cost required for dedicated hosting.<\/span><\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231111\/shared-vs-vps-hosting.png\")
<\/figure>\n\n\n\nKeyCDN explains this using the analogy of living in an apartment vs. living in a condo<\/a><\/u>.<\/p>\n\n\n\n
When you live in an apartment, you share certain facilities like laundry rooms and parking lots and have access to the building\u2019s maintenance team.<\/p>\n\n\n\n
When you live in a condo, on the other hand, you don\u2019t use common spaces, and you\u2019re responsible for certain repairs and maintenance. There are also fewer residents in the building.<\/p>\n\n\n\n
You can look at dedicated hosting, then, as owning a home. You don\u2019t share resources with anyone else, and you\u2019re responsible for all maintenance.<\/p>\n\n\n\n
With a dedicated server, you have much more space \u2014 but you also have more work to do with configuration and technical setup.<\/p>\n\n\n\n
![\"vps](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231219\/vps-dedicated.png\")
<\/figure>\n\n\n\nIf you need tons of space and want complete control over your hosting, this is your best bet.<\/p>\n\n\n\n
As you may have guessed, though, it\u2019s the most expensive option.<\/p>\n\n\n\n
If you\u2019re at a point where your traffic levels are slowing down your server response times, it may be time to switch from shared hosting to a VPS, or from a VPS to a dedicated server.<\/p>\n\n\n\n
8. Run a compression audit<\/strong><\/h3>\n\n\n\n
It\u2019s in your best interest to get your files to the smallest they can be, without sacrificing quality. The smaller your files, the faster they\u2019ll load \u2014 and the lower your overall load times will be.<\/p>\n\n\n\n
Pages with lots of images and other content can often end up being over 100KB in size. As a result, they\u2019re bulky and slow to download.<\/p>\n\n\n\n
You can speed up download times by compressing them.<\/p>\n\n\n\n
To get a sense of how compression could speed up your site, you can use GIDNetwork<\/a><\/u> to run a compression audit.<\/p>\n\n\n\n
Just enter your URL and click \u201cCheck.\u201d If the page you enter isn\u2019t compressed, you\u2019ll see something like this:<\/p>\n\n\n\n
![\"gid](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231129\/gid-test.png\")
<\/figure>\n\n\n\nThis tells you the uncompressed size of your page, which you can later use as a benchmark to measure the results of compression.<\/p>\n\n\n\n
Below that, you\u2019ll see an analysis of how much you could potentially reduce the page\u2019s size in terms of both size and percentage using a tool like Gzip (which we\u2019ll get to in the next step).<\/p>\n\n\n\n
![\"gid](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231152\/gid-scenario.png\")
<\/figure>\n\n\n\nThis compression involves HTML, CSS, JavaScript, plain text, and XML files.<\/p>\n\n\n\n
9. Enable compression<\/strong><\/h3>\n\n\n\n
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<\/a><\/u> is considered standard practice.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
This works well with CSS and HTML, because these files typically have repeated code and whitespace.<\/p>\n\n\n\n
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. According to Yahoo, this can reduce download time by about 70%<\/a><\/u>.<\/p>\n\n\n\n
And since 90% of today\u2019s Internet traffic travels through browsers that support Gzip, it\u2019s a great option for speeding up your site.<\/p>\n\n\n\n
If you\u2019re not sure if your site has Gzip enabled, you can use checkgzipcompression.com<\/u> to see. Just enter your site\u2019s URL, and if you have Gzip enabled, you\u2019ll see something like this:<\/p>\n\n\n\n
![\"check](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231135\/check-gzip.png\")
<\/figure>\n\n\n\nIf you don\u2019t <\/em>have Gzip enabled, however, you\u2019ll want to fix this as soon as possible.<\/p>\n\n\n\n
If your site runs on WordPress, both WP Rocket<\/a> and W3 Total Cache plugins support enabling Gzip.<\/p>\n\n\n\n
In W3 Total Cache, all you need to do is check the box next to \u201cEnable HTTP (gzip) compression.\u201d<\/p>\n\n\n\n
![\"w3](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231250\/w3-gzip.png\")
<\/figure>\n\n\n\nIf you have a static HTML site, however, you\u2019ll need to enable Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:<\/p>\n\n\n\n
![\"gzip](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231238\/gzip-apache.png\")
<\/figure>\n\n\n\nThere is also a similar version of the necessary code<\/a><\/u> for NGINX servers.<\/p>\n\n\n\n
![\"Crazy](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/27131522\/sitespeedad.png\")
<\/h3>\n\n\n\n10. Enable browser caching<\/strong><\/h3>\n\n\n\n
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Here\u2019s how Tenni Theurer<\/a><\/u>, formerly of Yahoo, explains it:<\/p>\n\n\n\n
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.4 seconds.<\/p>\n\n\n\n
![\"pasted](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231113\/pasted-image-0-3.png\")
<\/figure>\n\n\n\nOnce the page has been loaded and the different components stored in the user\u2019s cache, only a few components needs to be downloaded for subsequent visits.<\/p>\n\n\n\n
In Theurer\u2019s test, that was just three components and .9 seconds, which shaved nearly 2 seconds off the load time.<\/p>\n\n\n\n
![\"pasted](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231311\/pasted-image-0-13.png\")
<\/figure>\n\n\n\nTheurer says that 40-60% of daily visitors to your site come in with an empty cache, so it\u2019s critical that you make your page fast for these first-time visitors. But enabling caching can shave off a significant amount of time of returning visitors and provide a better user experience.<\/p>\n\n\n\n
The way you set up caching depends on whether you run your site with WordPress or static HTML.<\/p>\n\n\n\n
Increase your website speed in WordPress with W3 Total Cache<\/strong><\/p>\n\n\n\n
If you run a WordPress site, you can use a plugin like W3 Total Cache<\/a><\/u> to easily enable caching.<\/p>\n\n\n\n
Once you\u2019ve installed it, navigate to \u201cPage Cache\u201d under \u201cGeneral Settings\u201d and check the box next to \u201cEnable.\u201d<\/p>\n\n\n\n
![\"w3](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231101\/w3-page-cache.png\")
<\/figure>\n\n\n\nThis simple step on its own should give you a boost in site performance \u2014 but there\u2019s more you can do to improve your results with the plugin.<\/p>\n\n\n\n
Enabling browser caching lets you store a cached version of your site in a visitor\u2019s browser. This means that when a user returns to your site, it will load faster.<\/p>\n\n\n\n
You can enable this option by navigating to General Settings > Browser Cache and checking the box next to \u201cEnable.\u201d<\/p>\n\n\n\n
![\"browser](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231306\/browser-cache.png\")
<\/figure>\n\n\n\nIf you use a VPS or dedicated server, you can also enable object caching to speed up dynamic elements on your site.<\/p>\n\n\n\n
This feature is also under your General Settings.<\/p>\n\n\n\n
![\"object](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231203\/object-cache.png\")
<\/figure>\n\n\n\nIf you\u2019re using a shared server, however, it is best to leave this option disabled. Object caching is a resource-intensive process and can end up slowing down your site \u2014 the exact opposite <\/em>of what you want to accomplish with the plugin.<\/p>\n\n\n\n
Once you\u2019ve configured your settings, you should see improvements in your load times immediately. W3 Total Cache claims that its users have seen 10x improvements in Google PageSpeed results, and up to 80% in bandwidth savings after fully configuring the plugin.<\/p>\n\n\n\n
If you have a static HTML site, you can enable caching by in your .htaccess file.<\/p>\n\n\n\n
You can add lines of code that tell browsers what to cache and how long to store it, which will look something like this<\/a><\/u>:<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231206\/caching-htaccess.png\")
<\/figure>\n\n\n\nThis lets you set the amount of time you want each type of file to be stored in a visitor\u2019s cache.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
For all cacheable resources like JavaScript and CSS files, image files, media files, and PDFs, set caching between a minimum of one week and one year.<\/p>\n\n\n\n
11. Reduce image sizes<\/strong><\/h3>\n\n\n\n
Images can play a major role in your site speed. They\u2019re often very large files, which can slow down page load times.<\/p>\n\n\n\n
But removing them altogether is not an option.<\/p>\n\n\n\n
Consider this: Average ecommerce website conversions hover around 1-3%<\/p>\n\n\n\n
But that number can rise as high as 5 percent for some sites, like NatoMounts<\/a><\/u> \u2014 which sees an average conversion rate around five percent, with roughly 85% of those conversions on mobile.<\/p>\n\n\n\n
One of the best ways to get your conversion rate to this level is including lots of helpful product images. In one survey, 66% of consumers<\/u> said they wanted to see at least three product photos before buying.<\/p>\n\n\n\n
This means that if you want to run a successful ecommerce site<\/a>, images are absolutely necessary.<\/p>\n\n\n\n
That also means image compression is critical \u2014 and this is important whether your site includes an ecommerce store or not.<\/span><\/p>\n\n\n\n
You can see how big of an impact images make on any of your pages with a tool like Pingdom<\/a><\/u>. Run a page speed test, then look at the \u201cRequests by content type.\u201d<\/p>\n\n\n\n
In this example, you can see that images make up over 40% of the content on the page<\/a><\/u>.<\/p>\n\n\n\n
![\"image](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231257\/image-percentage.png\")
<\/figure>\n\n\n\nR<\/span>educing their size could likely have a big impact on how long the page takes to load.<\/span><\/p>\n\n\n\n
In fact, in one study, resizing 22MB of images down to 300KB resulted in a 70% reduction in time to interact<\/a><\/u>, or the amount of time a user needs to wait before they can interact with a site.<\/p>\n\n\n\n
![\"impact](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231243\/impact-image-compression.png\")
<\/figure>\n\n\n\nOne 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 570px wide, resize the image to that width.<\/p>\n\n\n\n
Don\u2019t just upload an image that is 2000px wide and set the width parameter the size you want. This requires your page to load the full image, then adjust it to the appropriate size, slowing your page.<\/p>\n\n\n\n
If you use the width parameter to make images appear smaller on your site, resizing those images should be a priority. It\u2019s an easy way to reduce the total size of each page and can have a major impact on your site\u2019s speed.<\/p>\n\n\n\n
Next, you can compress your image files with a few different tools.<\/p>\n\n\n\n
If your site runs on WordPress, WP Smush<\/a><\/u> is a great option.<\/p>\n\n\n\n
Check the box next to \u201cAutomatically smush my images on upload,\u201d and all of your new images will be compressed without an extra second of work.<\/p>\n\n\n\n
You can also use this plugin to automatically resize all of the new files you upload. Set a maximum width and height, and any images that exceed them will be \u201csmushed.\u201d<\/p>\n\n\n\n
![\"speed](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231123\/wp-smush.png\")
<\/figure>\n\n\n\nIf you don\u2019t use WordPress, you can use a non-WordPress tool like Compressor.io.<\/span><\/p>\n\n\n\n
Before adding an image to your site, upload it into this tool and select whether you want lossy or lossless compression.<\/p>\n\n\n\n
![\"compressor](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231103\/compressor-io.png\")
<\/figure>\n\n\n\n(If you\u2019re not sure which is best, keep reading \u2014 we\u2019ll get to that in just a minute.)<\/p>\n\n\n\n
Then, you\u2019ll be able to see information about how much the file was reduced, and be able to download the new, smaller file.<\/p>\n\n\n\n
![\"compressor](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231235\/compressor-io-results.png\")
<\/figure>\n\n\n\nAfter you\u2019ve saved the new image file, you can upload it to your site.<\/p>\n\n\n\n
Next, you\u2019ll also want to make sure you\u2019re using the appropriate file types for each image. This may seem like a minor concern, but the file types you use can affect each file\u2019s size.<\/p>\n\n\n\n
You have a few different options and the most common are JPG, PNG, and GIF<\/a><\/u>.<\/p>\n\n\n\n
![\"image](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231233\/image-file-types.png\")
<\/figure>\n\n\n\nJPG is generally your best option for photos. It uses lossy compression, which means that some of an image\u2019s data is lost when saved in this format.<\/p>\n\n\n\n
This data loss is undetectable to viewers in photos, but results in a smaller file size than most image file types.<\/p>\n\n\n\n
So if you\u2019re uploading pages with lots of photos, making sure that they\u2019re all JPGs can significantly decreasing load times, without impacting their appearance at all.<\/p>\n\n\n\n
PNGs, on the other hand, use lossless compression. This means that when you save an image as a PNG, you don\u2019t lose any data, and the resulting file size is larger than a JPG.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Finally, GIFs should only be used for small or simple graphics of less than 10×10 pixels, a color palette of 3 or fewer colors, and for animated images.<\/p>\n\n\n\n
Once you\u2019ve got your image sizes and formats right, you can make sure that the code you use to implement them is right, too. In particular, make sure to avoid empty image src codes.<\/p>\n\n\n\n
In HTML, the code for an image includes this:<\/p>\n\n\n\n
<img src=\u201d\u201d><\/p>\n\n\n\n
When there\u2019s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
12. Use a CDN <\/strong><\/h3>\n\n\n\n
Beyond the server that hosts your site, you can also use other networks of servers to decrease load times for your visitors.<\/p>\n\n\n\n
When your site is hosted on one server, each user who visits it sends requests to that same server.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
When you consider that high-traffic times typically present a ton of growth potential for your business, this is far from ideal.<\/p>\n\n\n\n
Plus, for users who are physically farther away from your server, load times are higher because the information has a farther distance to travel \u2014 even when you aren\u2019t <\/em>experiencing lots of traffic.<\/p>\n\n\n\n
A CDN, or Content Delivery Network, can help you eliminate these issues.<\/p>\n\n\n\n
With a CDN, you cache your site on a global network of servers. When a user\u2019s browser requests files from your site, that request is routed to the closest server.<\/p>\n\n\n\n
For example, let\u2019s say your origin server is in California, but uses a CDN to host files globally. Your network might look something like this<\/a><\/u>:<\/p>\n\n\n\n
![\"cdn](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231310\/cdn-map.png\")
<\/figure>\n\n\n\nIf a user from South Africa visits your site, thir browser could download files from a nearby server.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
In one experiment, VentureHarbor reported decreases in load time ranging from 20-51%<\/a><\/u> \u2014 for 20 minutes of work.<\/p>\n\n\n\n
![\"ventureharbor](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2018\/02\/14231240\/ventureharbor-cdn.png\")
<\/figure>\n\n\n\nThe exact improvements vary between page, with pages that have lots of large images benefitting the most from a CDN.<\/p>\n\n\n\n
If you want to start using a CDN, your best options are MaxCDN<\/a><\/u> and Cloudflare<\/a><\/u>.<\/p>\n\n\n\n
MaxCDN is a full CDN, meaning that it only <\/em> offers CDN services. They have more data centers and focus solely on improving load times.<\/p>\n\n\n\n