10 Recommended Ways to Increase Your Website Speed | 2018

 Home / Blog /1

10 Recommended Ways to Increase Your Website Speed | 2018


As usage of mobile devices and internet has increased, we expect websites to load quickly and get the information we’re looking for in seconds. According to a source, if web pages don’t load within 3 secs, people will leave the website.


Google has included loading speed as a ranking factor. So slow websites will lose ranking and will appear lower in search results. So, here we have listed down the ways to improve your website speed. Making effort to increase your site speed by even one second can have a major impact on conversions and also you might not lose on your potential customers. Below are 10 recommended ways to increase your website speed:


1. Opt Good Hosting.
2. Avoid too much Tracking Codes and Video Embeds.
3. Use Simple Web Design.
4. First load below-the-fold content.
5. Optimize Your Database.
6. Using CDN (Content delivery network).
7. Optimize your Images.
8. Implement Caching.
9. Optimizing and Minifying your CSS, JS & external files.
10. Avoid or minimize redirects.

1. Opt Good Hosting:


Everybody wants to opt for cheapest possible hosting for their website setup. But careful analyzation and thinking have to be done before you opt for one.

Today there are various types of hosting available such as shared hosting, Cloud-based hosting, Reseller based hosting, VPS (Virtual Private Server), Dedicated server and more. Among them, VPS and Dedicated servers are good for traffic and performance as there are dedicated resources that manage load, speed and functionalities.


Also, Since mobile browsing has increased, attention needs to be given to Mobile page speed, and this is determined by both your web coding and also on your server. Experts at Google recommend your server starts transmitting the first byte of resources within 200 milliseconds of a request.



2. Avoid too much Tracking Codes and Video Embeds:


Tracking codes play a vital role in analyzing your site performance, user behavior on the site. But using too many analytics programs and stuffing your page with too many analytics code can slow down your page speed. So carefully analyze and use the analytics program that is necessary.


Make sure to put the tracking codes at the bottom of the page. That ensures that the page is displayed to the user even if the tracking code hasn’t finished its job yet.


Video embeds are a great tool for keeping your customers engaged. But make sure, you don’t embed too many of them. This is because most video embeds (including YouTube) use iFrames to display the video, this slows down the page as there will be a whole separate page loading within your main page.


3. Use Simple Web Design:


Everybody wants their website to look appealing and hence implement great web designs. But complex web designs can impact on the page load speed. So it is important to keep the balance between the web design and the necessary functionalities.

Simple web design can increase site speed as it reduces the number of HTTP requests your website needs to make to load a web page. Reducing the number of elements such as JavaScript, CSS and image files on your website, reduces the number of HTTP requests made by your site, impacting load times.


The number of HTTP requests your site makes can be checked on Google Chrome, using the Developer Tools.



4. First load the below-the-fold content:


Above-the-fold content is the visible content or the portion of a webpage the users see on their screen before they scroll and below-the-fold content is the content the user must scroll to see.


Google recommends that you “prioritize visible content.” for webpage loading.


This is important for mobile page speed. Your website should load the content a user sees first before the content they would see later. So, coding your web pages in a way that your server sends necessary data first that is required to display above-the-fold content and then the data the user will experience it later. Also, keeping the size of the above-the-fold content minimum helps in faster loading.

 

5. Optimize Your Database:

High-data oriented sites such as e-commerce sites, news site, use databases to store information. This database can impact your page speed. So, it is very important to consider optimizing your database too. You can optimize your database by adding an index, normalizing and denormalizing the database that helps the data return to the page much faster.

Indexing makes the search faster for a specific column in the database by minimizing the number of disk accesses during query processing. Instead of scanning millions of records, the database can rely on an index to narrow down the search to a few hundred.

Database normalization reduces and eliminates unnecessary data and keeps relevant data dependencies that help in avoiding issues when inserting, updating, or deleting data to the database.

Database denormalization is a technique applied after normalization that decreases the time required for select queries by adding redundant data like extra tables or attributes into one or more existing tables. It also avoids costly joins in a relational database. This makes data more accessible.


6. Using CDN (Content delivery network):


CDN is a collection of web servers that are located all over the world to host files and to deliver content efficiently to users,  by spreading the bandwidth across many different servers, and by storing a copy of your website on those servers. This way, It pulls files faster and decreases the server load time, resulting in an increase in the website speed. Also, CDN protects your websites from Denial-of-Service attacks and traffic spikes, as it reduces the load on a single server. So, irrespective of where a user is accessing the site, they’ll have faster access to content from a nearby server based on a measure of network proximity.




7. Optimize your Images:


Images are powerful communication tools for the website, as they help tell stories, elicit emotions and also help in leads and conversions. But the size of the images can have an impact on the website’s speed. According to a source, images make 54% of the total webpage’s weight. Hence optimizing the images is very much necessary. There are various image formats with its own advantages. JPEG(JPG), PNG is most commonly used. Always choose an appropriate format for images as per requirements.

1. Many use large images and then scale them down with CSS. But browser still loads them at the full image size.
For example, if an image size is 1000 x 1000 pixels, but is displayed only at 100 x 100 pixels, it needs to load 10x more than necessary, impacting load speed. Hence, Optimizing images by uploading that are the same size as they will be displayed is very much necessary. Images could be Cropped according to the screen parameter. Use JPGs where you need to display photographs and high-quality images with lower sizes.
2. Use PNGs for graphics and icons and images that need transparency support, as they do not lose its quality like JPEG does when it is compressed.
3. Make sure, except for the larger images, the size of the images is below 1MB.
4. Do not use Gzip compression tool for compressing images. Use compressor.io or other such tools for a non-Wordpress site. For Wordpress site, there are various plugins like WP Smush, etc.
5. Always specify your image sizes as this can save from browser doing the additional work and saves the loading time.
6. Avoid hotlinking images as it can steal the bandwidth of your website.


8. Implement Caching:


Caching is the nothing but storing certain information temporarily in the cache or a storage area for future use. Caching helps in loading web page faster instead of dynamically creating web pages every time.

There are various caching methods. The ones that are recommended to implement are: 1. Server cache

2. Browser cache

We can implement both methods for faster loading.


Until the release of HTML5, the browser caching capabilities were pretty limited. HTML5 resulted in some major updates on browser caching.


Browser cache: The browser requests all the images, text, scripts, etc. from the website’s server when we visit a web page for the first time. Then, they are stored in the browser’s cache so that when you visit other pages on the site, you only need to download any unique content. The old version of the page is saved as a static file and whenever there is an update, it resets and loads the new content.

For example, the site’s URL, the logo will be the same on every page of the website, so it is cached and the browser can load from it quickly.


Server Cache: Servers are responsible for generating the web page and performing database operations to serve the content of the website. Server caching enables the server to store the information of how a website looks so that it doesn’t have to generate it every time. Also, it saves server time from performing expensive database operations every time when it has to serve the same content to a lot of different users, resulting in faster loading of the web page.



9. Optimizing and Minifying your CSS, JS & external files:  

 

Too much CSS, JS, external files, and data can make web pages heavy. Heavy page weight takes longer to load. So, every web developer must consider optimizing and minimizing assets such as HTML, CSS and JS files.

Gzip is one of the popular compression methods for optimizing and minifying content. Gzipping reduces the page weight almost by 70%, it reduces the size of the HTTP response and also it increases mobile page speed. It is currently supported by the vast majority of browsers.

 

You can enable Gzip by adding the following code to your .htaccess file:


# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

<files *.html>

SetOutputFilter DEFLATE

</files>


Or, use the following PHP code at the top of your HTML/PHP file:


<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>


Minifying a file involves removing HTML comments, CDATA sections, unnecessary formatting, whitespace, and irrelevant code or data without affecting the functionality of the page. This reduces the network latency and speeds up the webpage load time.

The most prominent tools for minification as suggested by Google are:

  • For HTML, HTMLMinifier

  • For CSS: CSSNano and csso

  • For JS: UglifyJS and Closure Compiler.



10. Avoid or minimize redirects:


Redirects take website visitors from one page to another page and are implemented when we move or delete any web pages on our site, and is also effectively used to deal with issues with broken links. But, each redirect takes up more time, as it creates an extra HTTP request creating a slower page load, especially on mobile devices because they often depend on less stable networks. Redirects should be used where it is technically necessary and there is no any alternate solution for it.


Google also said, “We strongly encourage webmasters to minimize the number and ideally eliminate redirects entirely.”



Unsure of How to Implement them?


Speeding up your website is a challenging undertaking, but you will see a significant positive impact on your overall site performance. There are of many ways to speed your website, here we have written about the most important ones that should not be overlooked.


Reducing the website speed even by 1 second can have a huge impact on your conversions and success. If you are unsure of how to implement them, we as a website development and SEO company can help you in increasing your website speed efficiently.



Important Note: Please DON’T FORGET to make a backup of your website before making any of the above implementations :)


Comments
Leave a Comment