20 Tips to improve your page speed for User Experience and SEO

As technology improves, we have become less patient. Today, we expect to find the information we’re looking for in seconds. We want websites to load quickly, regardless of which device we’re using, and if they don’t, we will leave.

Just how impatient are we? According to Kissmetrics, 47% of consumers expect a webpage to load in 2 seconds or less and 40% of people will abandon a website that takes more than 3 seconds to load. So, if your website is too slow, it’s costing you money.

Slow load times can cost you before someone even reaches your site. That’s because Google includes page speed in its ranking algorithm. Websites that don’t load quickly will appear lower in search results.

AVERAGE WEBSITE SPEED in the Travel Industry

A study by Pingdom of the Top 100 travel websites found that the average homepage load time is 3.39 seconds. The fastest website had a load time of just 0.18 seconds, and the slowest took over 10 seconds. That means the fastest site could load 58 times in the same amount of time it takes the slowest page to load once.

As part of its study, Pingdom looked at the size of each homepage and found that the average was 2.27 MB. The smallest homepage size was 0.16 MB and the largest was 56x lager at 6.12 MB.

You can see how your hotel website matches up by running a test through Google’s WebPagetest. If your website is ranking significantly lower than the industry average then your website is due for an update. Here are 3 easy fixes to start with to improve your website’s speed.

How your website speed influences visibility

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.

This is especially true now that it is rolling out its mobile-first index. As of December 2017, the search engine has started ranking all search results based on the mobile versions of pages.

Mobile searches outnumbered desktop searches for the first time in 2015, and its share of overall search only continues to grow.

This means that it’s in Google’s best interest to cater its search results to mobile users. They don’t want to direct their users to sites that won’t load or function well on their devices.

As a result, mobile user experience will now play a major role in search rankings — even in desktop search results.

This is a the exact opposite of how the index used to work.

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.

This is no longer the case.

Now, pages are indexed and ranked based on the experience they provide mobile users.

speed up your website mobile

So if you want to maintain (or improve) your rankings and visibility, it’s essential to know how to reduce loading time of website. You must have a site that provides a quick, easy user experience — on any browser or screen size.

1. Leverage browser caching

“Expires headers tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache. When you set an expires header for a resource, such as all jpeg images, the browser will store those resources in its cache. The next time the visitor comes back to the page it will load faster, as the browser will already have those images available,” says CJ Patrick in a nice article about how to use expire headers to set cachingExpires Headers for SEO

Unfortunately, it seems that SEOmoz doesn’t use expiration for stylesheets and images.

 

2. Enable Keep-Alive

“A Keep-Alive signal is often sent at predefined intervals and plays an important role on the Internet. After a signal is sent, if no reply is received, the link is assumed to be down and future data will be routed via another path until the link is up again,” says wikipedia.

In fact, HTTP Keep-Alive allows TCP connections to stay alive and it helps reducing the latency for subsequent requests. So contact your hosting provider and tell them to think twice about this! Most hosting companies disable this feature, (including SEOmoz’s host) because it’s an optional feature (whenever it transfers less than 60 bytes per request).

1. Optimize Images

Images are one of the most common bandwidth hogs on the web.

The first way to optimize your images is to scale them appropriately.

Many webmasters use huge images and then scale them down with CSS. What they don’t realize is that your browser still loads them at the full image size.

For example, if you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser must load ten times more than necessary.

Scale your images before you upload them to your site, so you don’t ask for more from your visitors than you should.

Take a look at the size difference when we scaled down one of our images:

speed-01-scaling

The second way to optimize your images is to compress them.

There are several free online tools for image compression, such astinypng.com, that can reduce your image sizes dramatically without losing quality. You can see size reductions anywhere from 25% to 80%!

If you use WordPress, you can use a plugin likehttps://premium.wpmudev.org/project/wp-smush-pro/https://premium.wpmudev.org/project/wp-smush-pro/ to compress your images.

2. Browser Caching

Why make visitors download the same things every time they load a page?

Enabling browser caching lets you temporarily store some data on a visitors’ computer, so they don’t have to wait for it to load every time they visit your page.

How long you store the data depends on their browser configuration and your server-side cache settings.

To set up browser caching on your server, check out the resources below or contact your hosting company:

 

3. Compression

Enabling compression is like putting your website into a zip file.

Compression can dramatically reduce your page’s size and thereby increase its speed. According to varvy, compression can knock off 50 – 70% from your HTML and CSS files! That’s a ton of data your visitor won’t have to download.

Compression is a server setting, so how you implement it will depend on your webserver and its settings. Below are some resources for the most common webservers. If you don’t see yours, contact your hosting company to see what they can do.

 

4. Optimize Your CSS

Your CSS loads before people see your site. The longer it takes for them to download your CSS, the longer they wait.

Optimized CSS means your files will download faster, giving your visitors quicker access to your pages.

Start by asking yourself, “do I use all of my CSS?” If not, get rid of the superfluous code in your files. Every little bit of wasted data can add up until your website’s snail-pace speed scares away your visitors.

Next, you should minimize your CSS files. Extra spaces in your stylesheets increase file size. CSS minimization removes those extra spaces from your code to ensure your file is at its smallest size.

So how do you minimize your CSS files?

First, see if your CMS already minimizes your CSS or if there’s an option for it. HubSpot, for example, already minimizes your CSS by default whereas WordPress websites require an additional plugin such ashttps://premium.wpmudev.org/project/wp-hummingbird/https://premium.wpmudev.org/project/wp-hummingbird/ to optimize those files.

If your CMS does not have a minimize CSS option, you can use a free online service like CSS Minifier to minimize your files. Simply paste in your CSS and hit “Compress” to see your newly minimized stylesheet.

Minimizing your resource files is a great way to knock some size off your files. Trust me—those little spaces add up quickly.

speed-02-minification

5. Use a CDN

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.

Plus, for users who are physically farther away from your server, load times are higher because the information has a farther distance to travel — even when you aren’t experiencing lots of traffic.

A CDN, or Content Delivery Network, can help you eliminate these issues.

With a CDN, you cache your site on a global network of servers. When a user’s browser requests files from your site, that request is routed to the closest server.

For example, let’s say your origin server is in California, but uses a CDN to host files globally. Your network might look something like this:

cdn map

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.

In one experiment, VentureHarbor reported decreases in load time ranging from 20-51% — for 20 minutes of work.

ventureharbor cdn

The exact improvements vary between page, with pages that have lots of large images benefitting the most from a CDN.

If you want to start using a CDN, your best options are MaxCDN and Cloudflare.

 

6. Reduce DNS lookups

Reduce DNS lookups

DNS lookups take a meaningful amount of time to look up the IP address for a hostname. The browser cannot do anything until the lookup is complete. Reducing the number of unique hostnames may increase response times. Just look at how a DNS lookup can take about 3 seconds of load time in SEOmoz. You can measure yours, by using Pingdom Tools. I do want to mention that when I re-tested the homepage of SEOmoz.org from a server in Dallas, it showed better results than it did before I started writing this article.

Note: Sprite your images. This means put images that are loading every page of your site together to reduce your DNS lookups. SEOmoz combined lots of its images into one, like this sprite image. You can find more information on SpriteMe

 

7. Move your site to a superior host

There are three conceivable sorts of facilitating:

Shared facilitating

Virtual Private Servers (VPS) facilitating

Devoted server

The most famous kind of facilitating that is utilized everywhere throughout the world is sharing facilitating. That is the least expensive approach to get your website online in a brief span and for a low charge. It’s basic to pick the quick web host to guarantee better advancement. With shared facilitating, you share CPU, circle space, and RAM with different locales that likewise utilize this server. This is the principle motivation behind why shared facilitating isn’t as quick as VPS or a committed server.

Virtual Private Servers and devoted servers are a lot quicker. VPS utilizes numerous servers for substance dispersion. Having VPS you share the server with its different clients and have your own piece of the virtual server where your designs don’t affect different customers. On the off chance that your site has the normal movement or you have the ecommerce site with activity spikes in a few periods, VPS will be the ideal answer for you.

The most costly facilitating choice is to utilize a devoted server which can be your very own physical server. For this situation, you pay a server lease and contract a framework manager to look after it.

Another methodology is to lease committed cloud asset from AWS, Microsoft Azure, Google, or other open cloud supplier. The two methodologies can likewise be joined into a half breed cloud that we talked about as of late. With committed servers, all assets have a place just with you and you gain its full power. Cloud frameworks can likewise include boundless and request versatility under various bundles.

Server less design is one more alternative that evacuates support and server set up methodology out and out. Consider perusing our different article covering server less engineering points of interest and advantages.

 

8. Enhance the span of pictures on your site

Everybody cherishes eye-getting pictures. On account of effective eCommerce locales, pictures are the crucial part. A ton of photographs, pictures, illustrations on your item pages enhance commitment. The negative side of the picture use is that they are generally extensive grinds that back off a site.

The most ideal approach to lessen the picture measure without bargaining its quality is to pack pictures utilizing such devices as ImageOptim, JPEGmini, or Kraken. The strategy may take a touch of time yet it’s justified, despite all the trouble. Another approach to decrease the picture estimate is to utilize the HTML responsive pictures <secret> and <size> traits that alter picture measure dependent on client show properties.

 

9. Diminish the quantity of modules

Modules are basic segments of every site. They include explicit highlights recommended by outsiders. Tragically, the more modules are introduced, the more assets are expected to run them. Accordingly, the site works slower and furthermore security issues can show up. Over the long haul, the quantity of modules develops, while some of them may not be utilized any longer. We suggest looking at all the modules you have introduced and erasing pointless ones. To start with, run the execution tests on your page to discover which modules are backing off your site. Not exclusively does the site speed rely upon the quantity of introduced modules yet additionally on their quality. Endeavor to stay away from modules that heap a great deal of contents and styles or create a ton of database questions. The best arrangement is to keep just the fundamental ones and guarantee that they are stayed up with the latest.

 

10. Limit the quantity of JavaScript and CSS records

On the off chance that your site contains a ton of JavaScript and CSS records, it prompts countless solicitations when your site guests need to get to specific documents. These solicitations are dealt with separately by guest’s program and back off the site work. In the event that you decrease the quantity of JavaScript and CSS documents this will without a doubt accelerate your site. Endeavor to bunch all JavaScript into one and furthermore do as such with all CSS documents. This will lessen the general number of HTTP asks. There are a great deal of apparatuses to minify HTML, CSS, and JavaScript records rapidly. For example, you can utilize WillPeavy, Script Minifier, or Grunt instruments.

 

11. Use site reserving

In the event that there are a great deal of clients getting to the page at one time servers work gradually and require more opportunity to convey the page to every client. Reserving is the way toward putting away the present form of your site on the facilitating and displaying this adaptation until the point that your site is refreshed. This implies the website page doesn’t render repeatedly for each user. Cached page doesn’t have to send database asks for each time.

The ways to deal with site reserving rely upon the stage your site is produced on. For WordPress for example, you can utilize the accompanying modules: W3 Total Cache or W3 Super Cache. On the off chance that you use VPS or a devoted server, you can likewise set up reserving under your general settings. Because of the mutual server, the site storing isn’t typically accessible.

 

12. Asynchronous Loading

CSS and JavaScript can be loaded both Synchronously or Asynchronously. If your scripts load sequentially, they load in the order they appear on the page. If your scripts load asynchronously, few of them will load simultaneously. When a browser loads a page, it moves from top to bottom. If it gets to a script that is synchronous, it will stop loading until it has fully loaded that file. If that file were asynchronous, the browser could continue loading other elements on the page at the same time. This functionality is to make certain elements load without waiting for external resources & without blocking page content.

13.  Popup Windows

Don’t make the already time-starved customers, go through an additional step, which can be clicked on even accidentally, creating a redirect and wasting more time. Often pop-up implementations will pre-load all the information, which may be an enormous amount of data to be loaded, causing the site to slow down considerably.

 

14. Disable hotlinking and leeching of your content

Hotlinking is a form of bandwidth “theft.” It occurs when other sites direct link to the images on your site from their articles making your server load increasingly high.
This can add up as more and more people “scrape” your posts or your site (and especially images) become more popular, as must do if you create custom images for your site on a regular basis.
Place this code in your root .htaccess file:
disable hotlinking of images with forbidden or custom image option
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?sparringmind.com[NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?feeds2.feedburner.com/sparringmind [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L]
You’ll notice I included my feed (from FeedBurner), you’ll need to replace it with your feed’s name, otherwise your images won’t appear correctly there.

 

15. Add an expires header to static resources

An Expires header is a way to specify a time far enough in the future so that the clients (browsers) don’t have to re-fetch any static content (such as css file, javascript, images etc).
This way can cut your load time significantly for your regular users.
You need to copy and paste the following code in your root .htaccess file:
ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
The above numbers are set for a month (in seconds), you can change them as you wish.

 

16. Adjust Gravatar images

You’ll notice on this site that the default Gravatar image is set to… well, nothing.
This is not an aesthetic choice, I did it because it improves page loads by simply having nothing where there would normally be a goofy looking Gravatar logo or some other nonsense.
Some blogs go as far to disable them throughout the site, and for everyone.
You can do either, just know that it will at least benefit your site speed if you set the default image (found in
“Discussion” , under the settings tab in the WordPress dashboard) to a blank space rather than a default image.

 

17. Add LazyLoad to your images

LazyLoad is the process of having only only the images above the fold load (i.e. only the images visible in the visitor’s browser window), then, when reader scrolls down, the other images begin to load, just before they come into view.
This will not only speed you page loads, it can also save bandwidth by loading less data for users who don’t scroll all the way down on your pages.
To do this automatically, install the
jQuery Image Lazy Load plugin.

 

18. Control the amount of post revisions stored

I saved this post to draft about 8 times.
WordPress, left to its own devices, would store every single one of these drafts, indefinitely.
Now, when this post is done and published, why would I need all of those drafts stored?
That’s why I use the Revision Control plugin to make sure I keep post revisions to a minimum, set it to 2 or 3 so you have something to fall back on in case you make a mistake, but not too high that you clutter your backend with unnecessary amounts of drafted posts.

19. Adopt cloud-based website monitoring

There are significant advantages to offloading your website monitoring to a cloud based host – cost, scalability, efficiency, to name a few. Not to mention, this frees you up to focus on growing your business, which matters the most anyway.

If you’d like to get onboard with the latest in cloud based monitoring then you should try a 24/7 monitoring service like Monitis. With its first-class global service, Monitis allows organizations to monitor their network anytime and from anywhere. For instant, with Monitis you can tell when your hosting service goes down, accompanied by timely notifications (via everything from live phone messages, to texts, to email and Twitter). Or you can load test your website to determine at what point it starts creating traffic issues.

 

20. Avoid bad requests

Difference between optimized page and bad request page

Broken links result in 404/410 errors. These cause wasteful requests. Fix your broken URLs (pay special attention to images). Use online broken link checker or use WordPress link checker for free. You can also read about Xenu Link Sleuth and Screaming Frog tools at SEOmoz that can be really helpful.

 

Hope you liked the article. Please let us know did this article helped you or there is some content which is bothering your here in the comment section.
Thanks
Social Dribbler Team.

Comments

  1. Cialis

    Thanks for a marvelous posting! I certainly enjoyed reading it,
    you will be a great author. I will ensure that I bookmark your blog and
    will come back later on. I want to encourage you to definitely continue your great work, have
    a nice evening!