Contact Number

+9501010103

Email Address

contact@oxosolutions.com

Social Icons
Empowering small to large businesses since 2008

Fulfilling all your IT needs at single stop
CIN: U74999PB2016PTC045616​GSTIN: ​​03AACCO3599B1ZO

Uncategorized

Avoid Bad Request

Definition of Bad Requests.

These are requests made by browser to server for resources like HTML, CSS, Images or an HTML file that does not exist.  This means unnecessary round trips are created which slows down the webpage. This is also the source of creating DNS lookups which slows down the page further. 

Codes 404 / 401

  • 404 Not Found errors: This is an HTTP standard response code and is seen many times. This error appears when a user has made a bad request, that is a user attempted to follow a broken or dead link. This means that browser asked the server to send a file that is indicated in the document, but server responded that it doesn’t exist. 
  • 401 Gone error: This means that request is dead and is no longer lives at a specified position.

How to search the Bad Request ?

These are request sometimes obviously visible. To illustrate, when there is supposed to be an image but is missing or they may be in the background but are not appearing immediately. 

There are other times when no visual indication of bad request appears. So, it is recommended to remove unused CSS and to examine all the pages and resources that are being used. 

To find all the error use Page Speed Tool.

How to fix the bad requests?

This issue is a lot easier to remove. Simply, replace the missing resources or remove the code that is calling the resource to fix the bad requests.

Conclusion 

This is imperative to remove all the bad requests. This will not only save you from frustrating the user and will also help in minimizing the wasted resources that are used in finding the non-existent resources. 


Inline Small Javascript

Inline Javascript

When script tag is used in the HTML file, it is called inlined. This means no external JS file is used instead javascript is put into HTML file.

Why inline javascript?

It is recommended to inline javascript to lessen the number of javascript files that the browser needs to download before displaying the web page. 

The thing to consider is that most of the files are tiny and have a few lines of code. It is suggested to link such files to the HTML. 

How to inline Javascript?

You just need to copy the content of your external javascript file and paste them between the script tags of your HTML file.

<script>

YOUR JAVASCRIPT HERE

</script>

Benefits of Inline Javascript.

This is extremely advantageous as it can saves the web browser round trips to the server. This is because it no longer requires external file to download from the server-side.


Minimize Redirects

What is a Redirect?

It is a method that is used to take the visitor from one URL to another URL. Redirecting can be done in several ways but each method affects the page loading speed. 

Reason why redirects are used?

  • To direct the user to the new location of a resource. 
  • Tracking the clicks, and impressions and log referring pages.
  • To retain multiple domains, and allow for “user-friendly” or “vanity” domains and URLs.
  • To create a connection between the various country-code top-level domains, between different parts of a site or application, different security policies, different protocols.
  • Adding trailing slash to URL directory names to make content accessible to browser.

The reason to apply redirects may be crucial from your point of view but it It is imperative to reduce the number of redirects especially for resources that are needed to start your homepage. You should avoid it in every possible case except when it is technically unavoidable. 

How redirects affect the page load speed?

Redirects adds round-trip-time latency and triggers additional HTTP requests and consequently causes the pages to load slower. These are one single most time waster in the code.

Primarily mobile users are greatly affected by the number of redirects because they are not using a reliable network as compared to the desktop users.

Server-Side Redirects (Fast & Cachable)

There are two common redirects 301 (permanent) and 302 (temporary). These both server side redirects that use HTTP in order to explain that a page and resource has moved. Web browser is able to handle these types of redirects quickly than the client-side redirects. 

Client-Side Redirects (Slow & Non-Cacheable)

Redirects such as http-equiv=”refresh” attribute or javascript can create performance issues and add longer waiting times. Therefore, these should be avoided in all the possible cases. 

What type of redirects assist in SEO?

Most preferred redirect on the web is 301 redirect. This type redirects the site from non-www to www version of the webpage. This type of redirect is recommended to aid Google in understanding the site in a better way.

Google suggestions…

  • Avoid linking of linking that has redirect on it. This is the case when you have manually created a link but has not changed the text link pointing to the new resource. 
  • No need to create more than one redirect to get to any of the resources. 

Points to consider…

  • Webpage not only loads the HTML, but it also loads other files such as CSS files, images and external scripts. It is important to ensure that all resources are being called in a manner that they do not create a redirect. This means that if your site is using “www”, ensure that you are calling CSS, JS and other files using “www”
  • Do check the old redirects in .htaccess file or other server configuration files. It may happen that the redirects may exist for content that does not even exist anymore.

How to remove redirects?

To remove the redirects follow the steps below:

  1. Search the redirect.
  2. Check the reason of its existence
  3. Check how it is affecting others or others are affecting it.
  4. Remove if not required
  5. Update the redirect if is affecting others or others are affected by it.
  6. Use HSTS to remove SSL redirect. 

Clean the redirect chains

This means there may be a case when you have a redirect from non-www to www but later on you directed to https version. 

For instance: A user typing “example.com” is redirected to “www.example.com” then redirects to “https:www.example.com”   Here you need to ensure that non-www should not redirect to www but instead to https directly.

Conclusion

This means article discussed the importance of certain redirects and the downsides of keeping a large number of redirects. This article also suggested the ways in which redirects can be avoided and thus becoming a factor in improving the performance of the site. 

Optimize the order of styles and scripts

Arranging the styles and scripts in a particular order is one way to improve the page loading speed. 

It is recommended to keep the style sheets at the top and scripts after them. This is because when browser renders your webpage it first gets the HTML and then comes the CSS, JS, images etc.

When the javascript is downloaded it stops loading all other files until the script tag has been downloaded, parsed and executed. This is the reason that webpages spend around 80-90% of their loading time in waiting for a network. 

The only solution to reduce the wasted time is to remove the patterns that makes the browser to serialize the download of resources. 

How to optimize the order of your styles and scripts?

#Method 1

This is the simplest method. Here you just need to make a few changes in the HTML of your webpage. Styles and scripts are placed in the head section of the HTML. Here is the correct order to follow:

‘ <head>

<title>title</title>

<style>

css code should be here

</style>

<script>

JavaScript should be here

</script>

</head>’

By keeping the files in this order will result in rapid increase of speed. 

#Method 2

Applying Filters to Optimize the script and style order. 

Filters such as ‘Move CSS Above Scripts’ makes sure that scripts do not halt the process of CSS resources loading. 

By using the Apache Server, one enable the file by adding below code in the configuration file. 

ModPagespeedEnableFilters move_css_above_scripts

#Method 3:

Use a WordPress Plugin

Activating a plugin in WordPress is the easiest thing one can do. Autoptimize plugin is a multitasking plugin, whereby it can perform the following functions:

  • Concatenate, Minify  and Cache the styles and scripts file
  • Adds CSS direct into the header
  • Add Javascript into the footer
  • Minify HTML

If the plugin you use dynamically adds JS and CSS you should change it to page caching. Parallely to the Autoptimize you can also use the Cache Enabler, HyperCache, WPSuper Cache, and Comet Cache.

Conclusion

If website performance matters to you, then consider opting one of the ways mentioned in the article. This is the easiest way to get fast running website.

Serve resources from consistent URL

Faster page load speed is what matters if you have online presence. There are several services available online that provides you the performance of your page. The one recommendation that you might have seen is “Serve resources from consistent URl”. 

This article elaborates the meaning of recommendation given by tools like Pingdom, GTmetrix, or Google PageSpeed Insights while describing the ways to tackle the problem. 

Why this recommendation appears?

There are several files associated with the website such as CSS, JS, images and many more. Whenever the visitor opens your website the visitor’s browser requests from the server to send the files. For each file a request is sent which means HTTP request is generated. So, as the number of HTTP requests increases the page loading time also increases. Since both of them are directly proportional to each other. 

Now, sometimes what happens is that a resource is available through multiple hostnames and domains. Consequently, each time the page is loaded the resources gets called and downloaded multiple times from each of the existing URLs. 

This puts bad effect on SEO and page load timings. 

How similar resource URL occurs?

There may be several reasons behind it:

  • When the identical resources are shared between two or more subdomains or subdirectories of the same website or between dissimilar linked websites.
  • When the same external resources or libraries are used by two or more plugins. 
  •  It may result from incorrect indirects.
  • It may also result from misconfiguration in CDN settings or bug in theme. 

How to fix the problem?

#Method 1: Move

Often inconsistent URLs are created by resources such as images, which are shared by multiple subdomains or linked sites. 

For example: If your website newwebsite.com shares an image with the site division subsite.newwebsite.com. This will create two paths for the same file. 

/media/image.png

/subsite/media/image.png

Solution

To fix the problem, serve the file from single hostname, instead of hosting it from the same website and its subdivision. That is, there is a need to host it on. To illustrate, newwebsite.com link to it from subsite.newwebsite.com

This solution also brings benefit when two separate domains are used and works efficiently when they are linked. Although there is a need for additional DNS lookups everytime but the advantage of caching make it worth. It is noteworthy that a DNS lookup will be anyway required due to linking of two sites. 

#Method 2: Rewrite

Duplicate resources are also generated when sometimes is used to speed up the website. This happens by the way in which plugins and themes handle static resources. 

Normally all the media files are moved to the CDN by editing all the static resources URLs manually by using a plugin or creating a C name. 

While this works seamlessly, but your plugin or theme can pull some files, for instance, site’s logo into the site’s code and out of the media library. 

Therefore, the same files are served from your domain (files pulled into theme settings) and CDN (the media library).

Solution

To fix this problem, change the file path in theme’s file. This is done to point to the file on the CDN. This may vary from theme to theme. 

The logo settings are mostly available in the file names header.php. Search line that defines the logo path and match it with the CDN resource URL. Use child theme to make the necessary changes in the theme file. 

To ensure all the links are consistent it is better to use a plugin Better Searcch and Replace

#Method 3: Redirect

When the site exist at www.newsite.com and newsite.com or you have hosted different versions of site on two seperate address. This results in duplicate resources. There may be some practical reason for doing so, but in reality you end up having two websites, one that exists at the root of the domain and other hosted at the subdomain www. 

Consequently, having two websites that are deeply connected but end up with duplicate results.

Solution

Here you are advised to select the preferred version and then apply the 301 redirects. The 301 redirect ensures that browser and search engines will skip all other versions and go to the preferred version of resources and pages. 

One can also use 302 redirects, which is used when one’s website is still developing and changing. This redirects instructs that resources have temporarily been moved. 

#Method 4: Canonical Tag

The issue can also be fixed by using canonical tags. But it should not be preferred first, unless 301 and 302 serves the purpose. These tags does not eliminate the problem but only instructs the search engines to prefer certain version. 

One should use these tags only when the 301 and 302 cannot be applied. 

Solution

Add the link to the preferred resource with rel = canonical attribute in the code. This can be used in a similar way across domains. 

#Method 4: Plugins

There are times when usage of multiple resources result in warning of consistent URLs. This happens because multiple plugins share resources or a single plugin add a resource to the original URL. 

Solution

Deactivate one of the plugin which is causing the trouble. 

Conclusion

This article discussed all the possible ways in which consistent URL issue can be fixed to improve the page loading speed. 

Avoid CSS @ import

Cascading style sheets (CSS) is a style sheet language which is used to describe the look and formatting of the web page. 

What is CSS@import ?

It is a process of importing CSS file into another CSS file. It is an external stylesheet. Here is the example of CSS@import.

<style>

@import url(B.css) ;

</style>

Why to avoid CSS@import ?

It causes additional HTTP requests for server and browser which increases the page load time. 

The delay in page load occurs because the files are downloaded in the sequential manner (this means one after the other) instead of downloading parallely. The sequential loading adds additional round trip times to the overall page and thus slows down the web page as per the amount of CSS files imported. 

Positions of CSS@import ?

CSS @ import can be added in both CSS files and HTML pages. 

  • Usage in CSS files
    • It can be located at the top of the page. Here is the example of the script:

@import url(“style2.css”)

  • Usage in HTML files
    • It is used in the style tags. Here is the example:

<style type=”text/css”>

@import url(“style2.css”);

font-family: sans serif;

font-size: 17px;

font-weight: 300;

# more CSS scripts #

</style>

How to avoid CSS@import ?

This problem can be fixed using one of three methods:

#Method 1: By combining CSS files

 One method is that you can merge the files. This means you can simply copy and paste the files you were importing, directly into the original file. This will remove the need to import the file. 

Another way is that you can add a separate link in the header of HTML instead of adding CSS@import. 

#Method 2: By using inline CSS in HTML

If the CSS is inlined in the HTML, this reduces the unnecessary sequential loading of the page. 

<script type=“text/css”>…CSS script goes here…</script>

#Method 3: By using link tag in the HTML

If the link tag is used in the header of HTML instead of using CSS@import, this also helps in reducing the problem. 

<link href=”style2.css” rel=” stylesheet” type=”text/css”>

Conclusion

This article explains why CSS@import is bad for the page speed, including the additional steps that are added for the browser to load the web page. Moreover, it causes the browser to download, parse and then go out and get the next CSS file before it starts displaying the page.  

The best practise is to use not even a single @import.

Avoid a Character Set in Meta Tag

What is character set? 

It is a predefined list of characters that are used by web browsers to display the web page. Each character is defined by value and information is in the stream of bytes which is converted into readable characters by the browser. 

There are several types of character set but presently the most preferred one is UTF-8. The character set which is defined by the website will determine how the site is displayed to the visitor. 

Here are a few examples of character sets:

  • ASCII: It defines every upper and lowercase letter in the alphabet, numbers from 0-9 and some special characters. 
  • ISO-8859: It is an extended version of ASCII that includes the international characters. 
  • ANSI: The default character set in windows up to windows 95.
  • UTF-8: Unicode that covers worldwide. It is the default character set that is presently used by HTML-5 and has solved many problems that existed in the previous character sets. 

What is meta tag?

It is an HTML tag that is used to display a snippet of text to describe the page’s content. It only appears in the page’s source code. This tag is added to the head of an HTML document. 

The meta tag looks like below. 

<head>

    <title>Site title</title>

    <meta name=”description” content=”Description of this page”>

    <meta http-equiv=”content-type” content=”text/html;charset=UTF-8″>

</head>

As one can see in the above example there are two meta tags defined:

  • One contains the description of the page. This is used by google to display it in the SERPs. 
  • Another contains the charset that the browser will use when accessing the webpage. 

Why avoid the character set in meta tag?

This duplicates the information and therefore increases loading time for the user. Moreover, it disables the lookahead in IE8.

How to fix the problem of Character set in the meta tag?

It all depends on the server-side language or web server that can define the character set so as to display it within the HTTP response header. You can check the code below to set the character set in Php, Apache or Nginx.

Php

Add the below code to the top of your Php file.

header(“Content-Type: text/html; charset=utf-8”);

Apache

Add the below code to your .htaccess file and enable the character set HTTP response header.

AddType ‘text/html; charset=UTF-8’ html

Nginx

Add the below code to the config file. 

http {

    include /etc/nginx/mime.types;

    charset UTF-8;

    …

}

Conclusion

Whenever you get a recommendation by PageSpeed Testing Tools (Pingdom, GTmetrix, or Google PageSpeed Insights) to avoid the character set in the meta tag. You can simply apply one of the methods discussed above to improve the page loading time.

Specify a Cache Validator

Analyzing the report of website using Pingdom, GTmetrix, or Google PageSpeed Insights is common. But the problem arises when we are trying to fix the warnings. One of the warnings in the performance report is “Specify a cache validator” which landed you on this article. 

This article will surely quench your thirst for the solution you are looking for. 

Point to be noted.

Before starting, there is something you need to know that is, you can only fix this if request are on your server. But if you are using a 3rd party request then you are unable to control their web servers. In this case you are free to share the article link with the concerned party.   

Why this warning occurs?

This arises due to missing HTTP cache headers which needs to be included on every origin server response. It is important because it validates and set the length of the cache. When headers are not found, it will generate a new request for the resource every time, and thus increases the load on your server.

What happens if you utilize caching header?

It ensures that subsequent requests don’t have to be loaded from the server and thus it will save bandwidth and improve the performance for the user. 

How to fix the warning “Specify a cache validator”?

To fix the issue you need to know four types of headers. Two headers fall in the same category, namely last modified header and Etag header. These are used to validate the cache, which means they check the last modification made in the file.  Next two headers, namely Cache-control and Expires help to determine how long the file should be held in cache. 

  • Last- Modified Header
    • This header is usually sent by server automatically, so there is no need to add it manually. It checks if the file was modified since the last time it was requested and checks if it needs to get the newer version or can load from the local cache. You can see the value of last modified in the header of the Pingdom or ChromeDevTools. 
  • ETag Header
    • This header is also similar to the last-modified header. It also validates the cache of a file. This identifies the version of the file with a string of characters. Whenever changes occur in the file a new version of the Etag is generated. It is a type of fingerprints and sometimes used to track the server. This tag is automatically added to the Apache 2.4 or higher using  FileETag directive. Since 2016, Etag is enabled by default
  • Cache-Control 
    • This defines the length of the cache. The properties associated to it are max-age, s-maxage, max-stale, min-fresh, stale-while-revalidate, stale-if-error, and cacheability (public, private, no-cache, no-store). 
      • Public: It shows that any cache can store the response.
      • Private: It means it is cacheable only by the browser accessing the file.
      • Max-age: It defines the amount of time for which it is cacheable.

As in the above example, it can be seen that the max-age directive is 604800 seconds which is equal to seven days. 

To configure this in Apache, add the code below to  your .htaccess file. 

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>Header set Cache-Control “max-age=604800, public” </filesMatch>

To configure this in NGINX, add the code below to your config. File. The files are located in the /etc/nginx/ directory and the primary configuration file is /etc/nginx/nginx.conf.

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { add_header Cache-Control “public”; }

  • Expires
    • This is the last step and can be skipped if cache-control is properly set up. The difference between the two headers is that cache control lets you define the period of time before the cache expires and whereas expires uses a date. 

To configure in Apache, use below code:

## EXPIRES HEADER CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType application/javascript “access 1 month”

ExpiresByType application/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 7 days”

</IfModule>

## EXPIRES HEADER CACHING ##”

To configure in Nginx, 

“location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ { expires 7d; }”

Conclusion

This article describes all the details essential to fix the warning related to “Specify a cache validator”.  Hopefully you enjoyed this article and learned everything you need to know about cache validator. 

Specify a vary accept-encoding header

Everyone having online presence wants to have fast loading speed of the webpage or the website. The speed is checked by using the tools such as GTmetrix, Pingdom, or Google PageSpeed Insights. These tools summarizes your page performance and provides warnings and recommendations for fast running page. One such warning that appears is “Specify a vary accept-encoding header”. This article deals with the ways in which the warning can be fixed. 

Let us first understand the meaning of the “Specify a vary accept-encoding header”.

Accept-encoding header is an HTTP header that is crucial to be included on every origin server response. It’s main function is to inform the browser that weather a client can handle the compressed version of the website. 

For instance, let’s assume you have an older browser without gzip compression and a modern browser with it. If you are not using Vary: Accept-Encoding header your web-server or CDN could cache the uncompressed version and can send it to modern browser mistakenly. This will in turn affect the performance of your website. Using Vary: Accept-Encoding makes sure that the appropriate version is delivered by your server or CDN. 

Fix “Specify a Vary: Accept-Encoding Header” Warning in Apache

Add the below code to your .htaccess file. 

<IfModule mod_headers.c>

  <FilesMatch “.(js|css|xml|gz|html)$”>

    Header append Vary: Accept-Encoding

  </FilesMatch>

</IfModule>

Fix “Specify a Vary: Accept-Encoding Header” Warning in NGINX

Add the code to the config. File. The files are located in  /etc/nginx/ directory and the primary configuration file is /etc/nginx/nginx.conf.

gzip_vary on

Conclusion

This article illustrated some ways in which you can specify a vary: accept-encoding, which will eventually help speed up your website because it ensures you are using gzip compression.  

Hope you enjoyed this article.

Leverage Browser Cache

Whenever the visitor’s browser loads the web page, it has to download all the files (HTML, CSS, Javascript and images) to display the content on the page. This leads to two types of issues:

  • Firstly, files may be of a smaller size or large size but big files will obviously take longer to download and particularly on the slower internet connection.
  • Secondly, there will be a separate request to server for each file. As the number of requests increases it has to do more work and thus leads to a decrease in the speed of the page load time.  

Now, the question arises: what role does the browser cache plays? 

Browser cache saves some of the files when visitor  first time open the website. This helps in reducing the load time when the visitor moves to another page or revisit the site again. In first attempt the time taken by the visitor will remain the same but will reduce in another attempt and thus helps in improving the site performance. 

Leveraging browser cache means to edit your HTTP headers to set an expiry time for certain type of files. 

How to fix the leveraging browser cache?

Apache

Access the file .htaccess file in the root of your domain. In this file set the cache parameters to tell the user about the type of files you want to cache.  As per the types of files, you can set the expiry time for each file. 

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/jpg “access 1 year”

ExpiresByType image/jpeg “access 1 year”

ExpiresByType image/gif “access 1 year”

ExpiresByType image/png “access 1 year”

ExpiresByType text/css “access 1 month”

ExpiresByType application/pdf “access 1 month”

ExpiresByType application/javascript “access 1 month”

ExpiresByType application/x-javascript “access 1 month”

ExpiresByType application/x-shockwave-flash “access 1 month”

ExpiresByType image/x-icon “access 1 year”

ExpiresDefault “access 2 days”

</IfModule>

## EXPIRES CACHING ##

Leveraging browser cache using Nginx

Add the below code to the snippet of your server block.

location ~* \.(jpg|jpeg|gif|png)$ {

    expires 365d;

}

location ~* \.(pdf|css|html|js|swf)$ {

    expires 30d;

}

Add Cache-Control Headers for Nginx 

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {

expires 90d;

add_header Cache-Control “public, no-transform”;

}

Leveraging browser cache WordPress using Plugins

A plugin can also be installed to obtain the same functionality. A plugin will not only handle all the settings of leverage browser cache, but it will also perform a number of other caching optimizations, such as creating temporary copies (file cache), memcache, database optimization and other optimizations which make your site faster. 
The plugins that can be preferred are WPRocket, WP Fastest Cache, and W3 Total Cache and premium caching plugins.

Be careful

  • Set the expiry date of minimum one month.
  • Do not set the date for more than a year in advance.
  • If you set the parameters too long, user may not get the fresh content.

Conclusion

This article explained the ways in which you can leverage browser cache using apache, nginx or wordpress plugins. You have to make sure that website speed testing tools should not show this as an error in order to gain improved website speed. 

In case you feel this is beyond your capabilities you can contact us to leave the stuff in the hands of the PRO’s. 

How to enable keep alive

Enabling keep alive allows the visitor’s browser to download the content files including images, javascript files, css files etc through a persistent TCP connection. This means it will not make different requests for each file and thus reduces the request amount and speed up a web page. 

Whenever the browser requests a file from server, interaction takes place between the server and browser it creates a communication pattern which is keep alive. 

Benefits of using Keep Alive

  • Minimizes latency and overall increase in loading speed and performance.
  • Better site performance will be an advantage in terms of SEO and ranking.
  • Minimizes the usage of CPU and memory due to lesser number of generated HTTP request. This is an advantage to all hosting plan users (free hosting, shared hosting and VPS).
  • It provides HTTP pipelining which means same TCP connection is used to deliver requests
  • All modern browsers support Keep Alive
  • Additional benefits will be added to you if your website use HTTPS and SSL certificate.

How to enable Keep Alive?

Firstly, you need to determine whether Keep Alive is enabled or disabled on your server. Analyze your website using a tool such as GTmetrix.

In case of Apache 

You can choose one of the following ways:

  1. Open Apache configuration file on server and add. 

KeepAlive On

Your server needs to be restarted after adding this. 

  1. .htaccess file, add the below code

<ifModule mod_headers.c>

Header set Connection keep-alive

</ifModule>

In case of NGINX

If Keep Alive is disabled in your config file, you will find the following in the file. 

Keepalive_disable

You can use below code to make changes in the settings:

keepalive_requests

Keepalive_timeout

To sum up, improved site speed and performance will eventually keep your visitors happy.

How to enable GZIP compression

What is Gzip Compression?

It is a technique to compress and decompress files. It reduces the size of the html, css, and javascript. It is a file format and is enabled on the server side. 

When a user visits your website, the files from the server end are requested by the client’s browser. The server compresses the files and thus reduces the transfer time. On the client’s side the file is first decompressed and then visualized. 

Why is it important?

It is recommended because of the reasons below;

  • Sometimes the file size is reduced to 70%.
  • It increases the page speed.
  • Cost benefit ratio: high

Enable Compression using htaccess

Compression can be enabled by adding code below to a file named .htaccess on web host/server.  

<ifModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</ifModule>

Enable Compression on Apache Web Servers

If the above does not work try using below code:

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

Enable Compression on NGINX

Add the below code to the config file

gzip on;gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems

gzip_disable “MSIE [1-6].(?!.*SV1)”;

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6

gzip_vary on;

Enable Compression on IIS

If your are using IIS server, we recommend you to check out Microsoft’s guide:

how to enable compression 

Do you find this tutorial useful? If yes, you will certainly love our support. OXO Solution hosting plan includes 24/7 support from our experienced developers. 

Check out our plans.

Specify Image Dimensions

Specifying Image Dimension is one such recommendation which is given by PageSpeed test to improve the speed of the site. 

As, it is well-known that every image on the web page has some attributes from which “width” and “height” are considered the most essential. And, it is important to mention the dimensions of each image on the web page. 

What happens if the dimensions are not specified?

As the web browser displays your web page, it will check the position of the text and the images. The browser builds the page according to the text length, font size and image dimensions. 

The problem occurs when the size of the image is not specified and the web browser will first build the entire page based on the text it received and then it will rebuild the page by rendering the images and relocating the images around them. 

This is where the loading speed of the page significantly increases, particularly when there are more than one images without specification of dimensions. 

Therefore, it is very important to specify the image dimensions, so that browser can use that information to build the page without reflow and additional delays.

How to specify image dimensions?

  • In HTML you can use <img> tag to specify the dimensions.

This is how it looks like without dimensions.

<img src="picture.jpg" />

Let’s say the dimensions of the image are 500X200.

<img src="picture.jpg" width="500" height="200" />
  • By using inline CSS, you can add in below-mentioned way.
<img src=" picture.jpg" style="width: 300px; height: 200px">
  • By using external CSS, it can be done as below:

#picture.jpg 

    width: 300px; 

     height: 200px; 

}

  • Advance users
    • Can use responsive designs for CSS according to the type of content.
    • Can set min/max for width/height
    • Add padding for image containers
    • Add absolute positions for images that will fill those containers

Avoid Landing Page Redirects

In this article you will get to know about 

  • Meaning of “Avoid landing page redirects”
  • How to fix it

The Problem

When “PageSpeed” detects you have more than one redirect from the given URL to the final landing page then a warning will appear “Avoid Landing Page Redirects”.

To illustrate, the redirect chain can appear like this,

Example.com -> https://example.com -> https://www.example.com

Required version should be like this,

Example.com -> https://www.example.com

The redirection activates one additional HTTP request response cycle and therefore delays page rendering. There may be a case when it results in multiple round-trip request-response cycles including, DNS lookups, TCP handshake and TLS negotiation. 

The Reason

There may be many reasons you are considering redirects:

  • Original site has been moved and you wish to send the user to the current site.
  • In order to track clicks and log pages that refer users to your site. 
  • In order to reserve multiple domains
  • In order to secure the information you are sending and receiving by switching from HTTP to HTTPS.

Even if site redirection takes place due to some reason, care should be taken to implement it in such a way that your users see as little delay as possible. 

Let us suppose an address of website http://www.exmple.com that takes 365ms to load completely. However, when the same site is loaded using slightly different address which is http://example.com .

Then, the request is completed in two steps. The first step calls http://example.com which takes 158 ms and we are then redirected to http://www.exmple.com which took 365 ms. Due to redirection the total HTML request, download and render time took extra 156 ms for a total of 521 ms. 

Problem in Mobile Version

The redirects are more noticeable on mobiles because of slower networks. If your website runs on a mobile version, but on any other domain, subdomain or subfolder. There will be unnecessary redirects for all the mobile users. 

For instance, 

Example.com -> m.example.com

Or, another case may be, 

Example.com -> www.example.com -> m.example.com

Solution for Mobile Version

The simple solution is to make your site responsive such that the same content is displayed on all the devices just scaling and styling can be different as per the device width. 

Optimize the use of Redirection

Redirects can be fixed using one of the following ways:

  • HTTP Redirect
  • Javascript Redirect

Recognize the redirects to access Non-HTML resources

Non-HTML Resources

It is equally important to check if your site requires external files, such as images and CSS. Make sure that HTML calls these files directly and there are not any redirects occurring to download these files. 

Use of Slashes

There is something to consider is that one with the trailing slash is considered a directory and without a slash indicates a file. 

Directory:  http://example.com/foo/

File:           http://example.com/foo

Although many sites do not distinguish between the two sites but search engines do see them distinctly. To identify the URL redirects, check to confirm which is returning an HTTP response code of 200 and which returns the HTTP response code of 300. 

How to fix the redirects?

HTTP Redirects is the solution. 

Using this users are sent to device-specific sites. This can be accomplished by setting the user-agent in the HTTP request headers. The response code for HTTP redirection is either 301 (This specifies that the redirection is permanent) or 302 (This specifies that the redirection is temporary). 

Your task is to identify which URL garners the most traffic and then configure an HTTP-301 type redirect for all the less used URL’s to the most trafficked. Access your server’s htaccess file to implement the changes. 

Avoid HTTP redirects and Stay fast.

Combine Images using CSS Sprites

Speed of the websites is the pain point for almost everyone having online presence. There are several reasons for it but the one which we are going to discuss is related to images. This article will dive deeper about the following.

  • Introduction
  • About CSS Sprites
  • Working of CSS Sprites
  • Method to combine images using CSS Sprite

Lots of images on a webpage often reduce the page load time or speed of site. This is because whenever browser loads the images of the webpage it sends a request to the server and thus additional HTTP requests are created for each image file. 

Now, what is the solution?

CSS Sprites is what comes for our rescue. It is a technique to combine multiple images in a single image. Therefore, it reduces the rendering time of a web page. 

To illustrate, consider there are 6 images in your web page. This means six times HTTP requests will be sent to the server. Whereas if all the images are combined in a single image file, this means only one request is required to be sent to the browser. The necessary will be displayed by offsetting the image file. This eventually results in fast loading of the page. 

How CSS Sprite works?

Several images are merged into a single sprite sheet and are placed in a grid like pattern. When a particular image is required:

  • CSS references the sprite sheet
  • Offset it by the index of the desired sprite
  • Define the size of sprite in pixels

This technique is applied when a web page has multiple images of the same size such as (buttons, & logos).

How to combine images using CSS sprite? 

You can use any image editing tool to create CSS sprite sheet. 

  • Create a grid of pixels
    • It will allow you to position the image and reference the images
  • Add the images
    • Mostly the images are grouped according to the size in the sprite sheet. Sometimes small images fit into single cell whereas large images might take up multiple cells. 
  • Add the CSS
    • There are three attributes which are required to consider when creating a sprite in CSS i.e. height, width and background. To define the size of the image, height and width is used and background is used to define the sprite sheet and location of the sheet.
  • Add the element to the page
    • An image tag with placeholder image is required to reference the CSS sprite by Id or class. The placeholder image is replaced by the sprite when the page loads.

Advantages of CSS Sprites

  • Cashing a single file
  • Improves the page load time
  • Fewer HTTP requests to the web servers. 

This is the key strategy to improve the responsiveness. Major service providers who handles millions of users like Amazon, Apple, Facebook and Google make extensive use of CSS sprites. 

Minify HTML

Let us understand first what is minification?

Minification means to minimize code and markup in your web pages and script files. 

This reduces load times and bandwidth usage on websites. Moreover, it improves site speed and accessibility. Additionally, a user can access your website even with a limited data plan.  

Why minify HTML?

The primary goal is to remove redundant or unnecessary data such as spacing, well-named variables, and comments. Although developers tend to make the code and markup more readable for others who might work on it later.

But it puts a negative effect when it comes to serving pages. Therefore, anything that makes the HTML readable to developers but is not essential for the compilation that can be modified and eliminated. 

When files are minified then, comments, extra-spaces are removed and variable names are crunched to minimize the code and reduce the file size. There is only one downside of this process that the minified file is not readable. So, it is crucial to keep both versions of the file. 

Designers and developers can work on the human-readable file whereas the other version is used to deploy to the server. 

To distinguish the files from one another, the original resource contains “.html” and the minified version uses “.min.html” file extension. 

Sometimes the minimized file size is reduced to 60%. 

Follow Us