Speed Up Your Website

20 Tips to Speed up your Website

What is Page loading speed?

Page load time is a web performance metric. It is the time it takes to download and display the entire contents of a web page in the browser window.

image 27

Fact Check
Google has indicated site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages.

Factors affecting Page loading Speed

  • Hosting Server
  • Amount of Bandwidth in Transit
  • Web Page Design
  • ​Number, Type and weight of the elements on the page
  • Location, device and browser type

image 25

Why website loading speed matters?

  • Low speed turns off visitors
  • High Speed = Low Bounce Rate
  • Fast websites rank higher in organic search
  • Gives Better user experience
  • Higher conversion rate
  • Higher engagement

Fact Check
A page slowdown of 1 second could cost Amazon $1.6 billion in sales each year.

image 7

Fact Check
Obama’s fundraising campaign during the 2011 Presidential Elections raised an additional $34 million when the Obama for America website shrunk page load time from 5 seconds to 2 seconds – that’s 14 percent increase in donation conversion with mere 3 seconds of website performance improvement!

image 6

Fact Check
When Mozilla increased page speed by 2.2 seconds, Firefox download figures rose by 15.4 percent or 10 million per year! 

image 8

Fact Check
Financial Times (digital news publisher) found that 1 second delay in page load time led to 4.9% drop in the number of articles read, while a 3 second delay had 7.2% drop.

image 26

Fact Check
Walmart found that every 1 second of load time improvement equalled a 2% conversion rate increase.

image 9

How to Measure it?

Slow speeds kill conversions

Ways to Speed Up your Website

Minimize HTTP requests

  • According to Yahoo, 80% of a Web page’s load time is spent downloading the different parts of the page, like images, stylesheets, and scripts.
  • 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.

image 1

Use a Content Delivery Network (CDN)

  • 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.
  • With CDN, user requests are redirected to the nearest server
  • Content is delivered to a user in a quicker manner
  • If you want to start using a CDN, your best options are MaxCDN and Cloudflare.

image 10

Fact Check
47% of consumers expect websites to load in two seconds or less — and 40% will abandon a page that takes three or more seconds.

Choose the right hosting option for your needs

  • Shared hosting (Common Option) = You share CPU, disk space, and RAM with other sites that also use this server
  • Virtual Private Server (Faster Option) = Uses multiple servers for content distribution
  • Dedicated Server (Faster than VPS) = your own physical server

image 11

image 12

Use external hosting platforms

  • In addition to hosting your site’s files on a CDN, you can also use external hosting platforms for some of your larger files. This is particularly valuable for videos.
  • Host your video on a third-party service like YouTube, Vimeo, or Wistia. Then, embed the video on your site.

Streamline the Size of Images on your site

image 13

Fact Check
In one survey, 66% of consumers said they wanted to see at least three product photos before buying.

image 14

  • JPG is generally your best option for photos. It uses lossy compression, which means that some of an image’s data is lost when saved in this format. 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. This means that when you save an image as a PNG, you don’t lose any data, and the resulting file size is larger than a JPG. 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.
  • 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.

Reduce the number of Plugins

  • More plugins = More resources are needed to run them
  • Delete Unnecessary Plugins
  • Try to avoid plugins that load a lot of scripts and styles or generate a lot of database queries
  • Eliminate plugins for tasks you can do manually

Minify and Combine files

  • Lots of JavaScript and CSS files leads to a large number of HTTP requests when your website visitors want to access particular files. These requests are treated individually by visitor’s browser and slow down the website work

image 28

HTML provides the basic structure of sites, which is enhanced and modified by other technologies like CSS and JavaScript.

CSS is used to control presentation, formatting, and layout.

JavaScript is used to control the behavior of different elements.

  • Minifying a file involves removing unnecessary formatting, whitespace, new line characters, comments and code.
  • Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.
  • Group all JavaScript into one and also do so with all CSS files. This will reduce the overall number of HTTP requests
  • There are a lot of tools to minify HTML, CSS, and JavaScript files quickly. For instance, you can use  WillPeavy, Script Minifier, or Grunt tools. if your site runs on WordPress, plugins like WP Rocket (paid) and Cache Enabler make the process fairly simple.

image 15

Optimize CSS delivery

  • CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: In an external file, which loads before your page renders, or inline, meaning it is in the HTML document itself.

image 16

  • External CSS files are the main way that CSS is being used in webpages

link rel=”stylesheet” type=”text/css” href=”http://yoursite.com/main.css” media=”screen” title=”style (screen)” />

  • This calls your CSS file and these are called external because the CSS instructions are in a separate file than your HTML. Having an external CSS file is the defacto way to handle your CSS.
  • If you’re not sure how your CSS is currently set up, you can use this CSS delivery tool to find out. Enter your URL, and you’ll see a report with all of external your CSS files.
  • If you have more than one CSS file they should be combined into one file

image 17

  • When you have several external CSS files the browser has to download each one before it can display your page. This causes many roundtrips to get each CSS file which results in your webpage being slow to load. This can be easily changed by combining all the CSS files into one file.
  • To see how many external CSS files your webpage is using go here
  • To get instructions on how to combine external CSS files go here

image 18

image 19

  • Now, your visitors’ browsers only need to download one CSS file instead of multiple, which reduces the overall number of requests and decreases page load time.

Defer JavaScript loading

  • 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.

Enable browser caching

  • Enabling browser caching lets you store a cached version of your site in a visitor’s browser. This means that when a user returns to your site, it will load faster.
  • The web page doesn’t render over and over again for each user.Cached web page doesn’t need to send database requests each time.
  • Enabling caching can shave off a significant amount of time of returning visitors and provide a better user experience.
  • For WordPress for instance, you can use the following plugins: W3 Total Cache or W3 Super Cache.

image 20

Implement GZip Compression

  • Gzip is another form of compression which compresses web pages, CSS, and JavaScript at the server level before sending them over to the browser
  • Gzip has become the de-facto standard for file compression on web hosting servers.
  • In today’s internet world websites contain so much information. Typical websites contain content, graphics, images, video clips, etc. combine all these into one file, and two problems are encountered. One the file size is huge, and second, it takes up a lot of bandwidth in transmission. Gzip compression takes care of all these aspects and compresses the file into manageable chunks which consume less space and bandwidth.
  • The smaller your files, the faster they’ll load — and the lower your overall load times will be.
  • To check if gzip compression is running on your website is quite easy. Go to smallseotools.com from your web browser and scroll to the ‘Check gzip compression’ utility.

image 4

  • If your site runs on WordPress, both WP Rocket and W3 Total Cache plugins support enabling Gzip.
  • Do not use gzip on image files. Instead, compress these in a program like Photoshop where you can retain control over the quality of the image.

Database optimization in CMS

  • Database + Complex Plugins = The database size increases and your website works slower
  • For WordPress, for example, you may consider WP-Optimize.

Prioritize above-the-fold content (lazy loading)

  • Lazy Loading : You can improve user experience by having your above the fold (top of the page) section load faster — even if the rest of the page takes a few seconds to load.
  • If you run your site on WordPress, there are lots of plugins like Lazy Load, BJ Lazy Load , Enable Lazy Load by WP Rocket.

Reduce server response time

  • 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. A DNS lookup, then, is the process of a finding a specific DNS record

image 21

  • 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.
  • If you’re 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.

Reduce the use of web fonts

  • Web fonts add extra HTTP requests to external resources. 
  • Keep character sets down to a minimum
  • Choose only the needed styles
  • Host fonts locally or prefetch
  • You can also move your Google Fonts to your CDN

Fact Check
According to the HTTP Archive, 60% of websites are now using custom fonts. Which is over an 850% increase since 2011

Eliminate 404 Errors

Avoid Redirects

  • Redirects are performance killers. Avoid them whenever possible.
  • Redirects are often necessary when you move and delete pages, and are the best way to eliminate issues with broken links.
  • Website redirects create additional HTTP requests.
  • You can use Screaming Frog to quickly identify redirects.

Minimize time to first byte

  • Time to first byte (TTFB) is the measurement of the responsiveness of a web server
  • 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.
  • TTFB of a website = HTTP request time + Process request time + HTTP response time
  • This is this is a server-side concern.

image 2

  • In general, most issues with slow TTFB are caused by either network issues, dynamic content creation, web server configuration, and traffic.

image 22

  • 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. This means that they need to interact with a database to be “built” with PHP before they are delivered. You can reduce the time that this takes by enabling caching.

image 23

  • By using a CDN, a fast web host, and a reliable DNS provider you can dramatically reduce your overall TTFB
  • If you have a WordPress site, your pages are most likely dynamic. This means that they need to interact with a database to be “built” with PHP before they are delivered. You can reduce the time that this takes by enabling caching.

Updating PHP Version

  • Keeping the various components of a web server up to date is critical for reasons such as security patches, performance upgrades, and so on. If you are using PHP, upgrading to PHP7 can help greatly improve performance as compared to PHP 5.6. As well as taking advantage of HHVM (HipHop Virtual Machine).

image 24

  • Based on the results from the above image, PHP7 is able to handle 204 requests per seconds compared to PHP 5.6’s 96 in WordPress 3.6

Serve Scaled Images

  • Always upload your images at scale and not rely on CSS to size them down.
  • Upload multiple resolutions of your images and serve the right resolution for the right device.

Related Posts: