Services

GT metrix Parameters: Recommendation & Importance with Solutions

Page Speed:

  1. 1. Avoid a character set in the meta tag:

Possible issues:

Avoiding a character set in the meta tag will improve page load time and also avoids content duplication. If some of your visitors are using IE-8 web browser, it may cause some serious compatibility issue which disables the lookahead downloader and degrades the performance of your website.

Recommendation:

Setting character set in the web server or via the server side scripting language can be an option to avoid such issue. So based on the server side language & web server that powers your website, you need to the send response headers with Content-Type: text/html; charset=UTF8

Solution:

The solution in which, I insist on implementing is by using an HTTP header rather than a meta tag. Implementing that depends on what server-side tech you are using.

If you are generating your content using PHP, Apache Web server, Nginx web server, put this at the top of your page:

Set charset in PHP:

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

Set charset in Apache Web server:

Copy & paste the below line in the .htaccess file to enable charset HTTP response header.

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

Set charset in Nginx web server:

Copy & paste the below lines in your config file.

HTTP {include /etc/nginx/mime.types;charset UTF-8;…}

2. Avoid bad requests:

Possible issues:   

 The main point of avoiding bad request is removing unnecessary requests that lead to bad user experience and make your site look unprofessional also it affects the website’s loading speed.

Recommendation:

Literally, the best way to avoid bad request is you should update the links to resources that have moved, or delete those links if the resources have been removed and also identify broken links then redirect it or remove it.

Solution:    

By removing “broken links”, or requests that result in 4xx/5xx errors and avoid unnecessary requests.

3. Avoid CSS @import:

Possible issues:   

 The @import method of fetching CSS files creates problems that affect your page load time speed. The main cause that the website will go slower is because the files cannot download in parallel. One will download first, and only after that, the other one will start loading.

Recommendation:

Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times.

Solution: 

Use the <link> tag instead of CSS @import,

<link rel=”stylesheet” href=”first.css” /> <link rel=”stylesheet” href=”second.css” />

4. Avoid document.write:

Possible issues:

Using document.write() to fetch external resources, especially early in the document, can significantly increase the time it takes to display a web page. The web browser is forced to wait for the resource to load and to be executed.

Recommendation:

By declaring resources in HTML markup allows the speculative parser to discover those resources.

Solution: 

Declare resources directly in HTML markup.

Prefer asynchronous resources.

Use “friendly iframes”.

5. Avoid Flash on mobile webpage’s:

Possible issues:

Adobe Flash is not supported on many mobile devices, so its use should be avoided on pages that are viewed on mobile devices.

Recommendation:

Adobe Flash makes for some cool looking sites, but it has enough downsides that you should think twice before using it. It Doesn’t Boost Your SEO, Compatibility Issues, Usability Concerns, etc. HTML5 is now universally supported on major mobile devices, so if you require Flash-like elements, consider switching to HTML5 alternatives.

Solution:

Adobe Flash use should be avoided on pages that are viewed on mobile devices.

6. Avoid landing page redirects:

Possible issues:

Redirections on landing pages add delays to the page load and while the redirections are occurring, nothing is shown to the client. In many cases, redirections can be eliminated without changing the function of a page.

Recommendation:

Never reference URLs in your pages that are known to redirect to other URLs.

Never require more than one redirect to get to a given resource.

Solution: 

Eliminate unnecessary redirects.

Use server rewrites for user-typed URLs.

Track web traffic in the background

Prefer HTTP over JavaScript or meta redirects.

7. Combine external CSS (deprecated):

Possible issues:

Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.

Recommendation:

One CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn’t needed until the page load has completed

Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user

or CSS that shouldn’t be cached, consider inlining it.

Solution: 

Partition CSS files optimally

Position stylesheets correctly in the document head

It’s beneficial to position references to external CSS in the correct order with respect to scripts, to enable parallel downloads.

8. Combine external JavaScript (deprecated):

Possible issues:

Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.

Recommendation:

One JS containing the minimal code needed to render the page at startup; and one JS file containing the code that isn’t needed until the page load has completed

Serve as few JavaScript files from the document <head> as possible, and keep the size of those files to a minimum.

Serve JavaScript of a rarely visited component in its own file. Serve the file only when that component is requested by a user.

For small bits of JavaScript code that shouldn’t be cached, consider inlining that JavaScript in the HTML page itself.

Solution:

Partition JS scripts file optimally

Position scripts correctly in the document head.

Whether a script is external or inline, it’s beneficial to position it in the correct order with respect to other elements, to maximize parallel downloads.

9.Combine images using CSS sprites:

Possible issues:

Combining images into as few files as possible using CSS sprites reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

Recommendation:

Combine images that are loaded on the same page and that are always loaded together.GIF and PNG images use lossless compression and can thus be spirited without reducing the quality of the resulting spirited image.Spriting images with long caching lifetime’s means that the image will not have to be re-fetched once it’s cached by the browser.

Solution: 

Sprite images that are loaded together

Sprite GIF and PNG images first

Sprite small images first

Sprite cacheable images

Minimize the amount of “empty space” in the sprited image

Sprite images with similar color palettes

10. Defer parsing of JavaScript:

Possible issues:  

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

Recommendation:  

When using this technique, the JavaScript is only parsed when needed, again by calling eval() on the string literal. This technique also allows an application to load JavaScript early, but defer parsing until it is needed.

Note that moving your <script> tags to the end of the page is sub-optimal since the browser will continue to show a busy indicator until the page has finished parsing this JavaScript. Users may wait until the page load indicator shows that the page load is complete before interacting with the page, so it is important to load JavaScript in a way that minimizes the time it takes for the browser to indicate that the page load is complete.

Solution:   

Deferring parsing of JavaScript via WordPress plugins:

WP Deferred JavaScript

A light-weight and very easy-to-use plugin.

11.Enable gzip compression:

Possible issues:  

The main reason it is important is that it reduces the time it takes for a website to transfer the page files and style sheets which ultimately reduces the load time of your website.

Recommendation:

Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.

  • Reduce sizes of pages by up to 70%

  • Increase page speed

  • Cost-benefit ratio: high

  • Access needed to the .htaccess files or server administration files

Solution: 

There are different methods of setting up gzip compression depending on whether or not you’ve got an IIS or Apache server (or something else entirely).

For IIS

If your server is IIS, follow these instructions in the Microsoft TechNet document to enable compression.

For Apache

You will need to add the following lines to your .htaccess file:

<IfModulemod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

After you’ve saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed.

12. Improve server response time:

Possible issues:

Server response time is the amount of time required to load the HTML document of a website from a server so that the client can begin rendering the page. Without a good server response time, the HTML doc will take longer to load. For each resource request, your server needs to begin sending the first byte of the resource within 200ms of the request being sent.

Recommendation:

There are a few factors that can come into play when discussing the reasons why a server’s response time is slow.

  • Poor web hosting

  • Increased traffic

  • Bloated webpages

  • Lack of caching

Solution:

There are many causes to a slow server-side, but they can essentially be grouped into two categories:

  • Inefficient code or SQL

  • Bottlenecks/Slow Server

Code Optimization

Programming languages like PHP, Perl, Python, or ASP are usually teamed up with databases like MySQL, PostgreSQL, or Microsoft SQL Server to create software such as WordPress, Drupal, Magento and all sorts of custom platforms.

This software is usually fairly optimized out of the box, but there are often many customizations to the code or plugins that cause slow performance as a result of inefficient code or un-optimized database queries.

Page Caching

Sending your users “cached” versions of pages is like giving them photocopies of a flyer. It’s much faster for you to give them photocopies than redrawing and writing the content each time somebody asks for one.

Page caching can be a very effective means of speeding up the generation of a page, but it also has its downsides:

Pages that require authentication can’t be cached (as they often contain user information on them).

More Powerful Servers

13. Enable Keep-Alive:

Possible issues:

  • Keep alive is a method to allow the same TCP connection for HTTP conversation instead of opening a new one with each new request.

  • More simply put, it is a communication between the web server and the web browser that says “you can grab more than just one file at a time”.

Recommendation:

Enabling HTTP Keep-Alive or HTTP persistent connections allow the same TCP connection to send and receive multiple HTTP requests, thus reducing the latency for subsequent requests.

Solution:

Enable keep-alive using .htaccess

If you do not have access to your web server config file you can enable keep-alive yourself using a .htaccess file.

<ifModulemod_headers.c> Header set Connection keep-alive </ifModule>

Adding this to your .htaccess file will add keep-alive headers to your requests, which will override most web server or host limitations.

14. Inline small CSS

Possible issues:

Inlining small external CSS files can save the overhead of fetching these small files. A good alternative to inline CSS is to combine the external CSS files.

Recommendation:

If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page.

Solution:

Example of inlining a small CSS file

If the HTML document looks like this:

<html>

  <head>>

    <linkrel=”stylesheet”href=”small.css”>

  </head>

  <body>

    <divclass=”blue”>

      Hello, world!

    </div>

  </body>

</html>

And the resource small.css is like this:

  .yellow {background-color: yellow;}

  .blue {color: blue;}

  .big { font-size: 8em; }

  .bold { font-weight: bold; }

Then you can inline critical CSS as follows:

<html>

  <head>

    <style>

      .blue{color:blue;}

    </style>

    </head>

  <body>

    <divclass=”blue”>

      Hello, world!

    </div>

    <noscriptid=”deferred-styles”>

      <linkrel=”stylesheet”type=”text/css”href=”small.css”/>

    </noscript>

    <script>

      varloadDeferredStyles = function() {

        varaddStylesNode = document.getElementById(“deferred-styles”);

        var replacement = document.createElement(“div”);

        replacement.innerHTML = addStylesNode.textContent;

        document.body.appendChild(replacement)

        addStylesNode.parentElement.removeChild(addStylesNode);

      };

      varraf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });

      elsewindow.addEventListener(‘load’, loadDeferredStyles);

    </script>

  </body>

</html>

15.Inline small JavaScript

Possible issues:

Inlining small external JavaScript files can save the overhead of fetching these small files. A good alternative to inline JavaScript is to combine the external JavaScript files.

Recommendation:

When this rewriter is enabled, the contents of small external JavaScript files are written directly into the HTML document. Therefore the browser does not request those JavaScript files independently.

Solution:

For example, if the HTML document looks like this:

<html>

  <head>

    <scripttype=”text/javascript”src=”small.js”></script>

  </head>

  <body>

    <div>

      Hello, world!

    </div>

  </body>

</html>

And the resource small.js is like this:

  /* contents of a small JavaScript file */

Then PageSpeed Service will rewrite it to:

<html>

  <head>

    <scripttype=”text/javascript”>

      /* contents of a small JavaScript file */

    </script>

  </head>

  <body>

    <divclass=”blue yellow big bold”>

      Hello, world!

    </div>

  </body>

</html>

This eliminates the external request for small.js by placing it inline in the HTML document.

16. Leverage browser caching

Possible issues:

The main reason why browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time for your users.

Recommendation:

  • Be aggressive with your caching for all static resources

  • Expiry at a minimum of one month (recommended: access plus 1 year)

  • Don’t set your caching more than a year in advance!

Solution: 

Set caching headers aggressively for all static resources

Use fingerprinting to dynamically enable caching

To enable browser caching you need to edit your HTTP headers to set expiry times for certain types of files.

Cache-Control

Cache-Control allows us to have a bit more control of our browser caching and many people find it easier to use once setup.

Example use in .htaccess file:

# 1 Month for most static assets

<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>

Header set Cache-Control “max-age=2592000, public”

</filesMatch>

The above code is setting a cache control header depending on file type.

17.Minify CSS

Possible issues:

Compacting CSS code can save many bytes of data and speed up downloading, parsing, and execution time.

Recommendation:

By removing space, enter, break line or whichever consumes space and increase size of the css file.

Solution:

Eliminate unnecessary space, enter,break line

Minified CSS example:

dif.classyspan,div.classy img{display:block;border:none!important;background:none!important}

18.Minify HTML

Possible issues:

Compacting HTML code, including any inline JavaScript and CSS contained in it can save many bytes of data and speed up downloading, parsing, and execution time.

Recommendation:

Reduce payload size of HTML document and reduce processing on the browser when rendering the page.

Solution: 

For example, if the HTML document looks like this:

<html>

  <head>

    <title>Hello,   world!   </title>

    <script>var x =’Hello,   world!’;</script>

  </head>

  <body>

    Hello, World!

    <pre>

      Hello,

        World!

    </pre>

  </body>

</html>

Then PageSpeed Service will rewrite it into:

<html>

<head>

<title>Hello, world!</title>

<script>var x =’Hello,   world!’;</script>

</head>

<body>

Hello, World!

<pre>

      Hello,

        World!

</pre>

</body>

</html>

Remove comments

Remove quotes

Trim URL’s

Combine Heads

19. Minify JavaScript

Possible issues:

Compacting JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time.

Recommendation:

To minify JS involves removing any unnecessary characters from within a file to help reduce its size and thus make it load faster.

Examples of what is removed during file minification includes:

  • Whitespace characters

  • Comments

  • Line breaks

  • Block delimiters

Solution: 

 Original Code:

functionmyFunction(myNumber){varmyArray=newArray(myNumber);varmyObject=newObject();var myArray2 =newArray();for(varmyCounter=0;myCounter<myArray.length;myCounter++){myArray2.push(myCounter);varmyString=myCounter.toString()myObject[myString]=(myCounter+1).toString();}varmyContainer=newArray();myContainer[0]= myArray2;myContainer[1]=myObject;returnmyContainer;};

Minified using(http://javascript-minifier.com/)

functionmyFunction(r){for(var n=newArray(r),t=newObject,e=newArray,a=0;a<n.length;a++){e.push(a);var o=a.toString();t[o]=(a+1).toString()}vari=newArray;returni[0]=e,i[1]=t,i}

20. Minimize redirects

Possible issues:

Minimizing HTTP redirects from one URL to another cuts out additional RTTs and wait time for users.

Recommendation:

Remove unnecessary redirects.

Never require more than one redirect to get to any of your resources.

Never link to a page that you know has a redirect on it. This happens when you have manually created a redirect, but never changed the text link in your HTML to point to the new resource location.

Prefer HTTP over JavaScript or meta redirects

Track web traffic in the background

Use server rewrites for user-typed URLs.

Solution: 

Find redirects

Understand why redirect exists

Check to see how it affects / or is affected by other redirects

Remove if not needed

Update it if it affects / is affected by other redirects

If your site is secure, consider using HSTS to remove the ssl redirect

More often than needing to remove a redirect is a scenario where you need to clean up a redirect chain

21. Minimize request size

Possible issues:

Keeping cookies and request headers as small as possible ensures that an HTTP request can fit into a single packet.

Recommendation:

Check How Many HTTP Requests a particular Website makes

Optimize site and reduce the number of files in the site which needs to render can help speed it up – fewer files means fewer HTTP requests.

Chrome Developer Tools provides network information, including HTTP requests.

Solution: 

Minifying and Combining HTML, CSS and JavaScript Files:

By using WP Rocket, you can easily minify and combine your files. Identify the files you want to minify and combine.

Fix Render-Blocking CSS and JavaScript Files:

Also with WP Rocket, you can fix render-blocking CSS and JavaScript simply by checking the options

22. Optimize images

Possible issues:

Reduce the load times of pages by loading appropriately sized images.

Recommendation:

Reduce file sizes based on where images will be displayed

Resize image files themeselves instead of via CSS

Save files in appropriate format depending on usage

Use JPEGs for all photographic-style images.

Never use BMPs or TIFFs.

Use GIFs for very small or simple graphics (e.g. less than 10×10 pixels, or a color palette of less than 3 colors) and for images which contain animation.

Solution: 

Several tools are available that perform further, lossless compression on JPEG and PNG files, with no effect on image quality. For JPEG, we recommend jpegtran or jpegoptim (available on Linux only; run with the –strip-all option). For PNG, we recommend OptiPNG or PNGOUT.

tinypng.com can also be used to compressed image files.

23. Optimize the order of styles and scripts

Possible issues:

Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.

Recommendation:

Put external scripts after external stylesheets if possible

Put inline scripts after other resources if possible

Solution: 

<head>

<meta name=description content=”description”/>

<title>title</title>

<style>

page specific css code goes here

</style>

<script type=”text/javascript”>

javascript code goes here

</script>

</head>

In the above code you see that the style instructions are placed higher on the page than the scripts are. If on your pages the calls to scripts are happening before the calls for styles and stylesheets, you would simply change that order.

CSS plays a higher role in building the page and if it gets interrupted by javascript, it can make the page much longer to load.

24. Parallelize downloads across hostnames (deprecated)

Possible issues:

Web browsers put a limit on the number of concurrent connections they will make to a host. This is mainly due to HTTP/1.1 in which browsers open on average 6 connections per hostname. This warning is typically seen on websites with a large number of requests.

Recommendation:

Balance parallelizable resources across hostnames

Prevent external JS from blocking parallel downloads

Always serve a resource from the same hostname

Solution: 

Setup Additional Subdomains:

  1. com2. static1.domain.com3.  static2.domain.com4.  static3.domain.com

Edit WordPressConfig:

Add the following code to your WordPress theme’s functions.php , And replace the $subdomains values with your subdomains. All subdomains/hostnames MUST have the same structure/path.

functionparallelize_hostnames($url,$id){$hostname=par_get_hostname($url);//call supplemental function$url=str_replace(parse_url(get_bloginfo(‘url’),PHP_URL_HOST),$hostname,$url);return$url;}functionpar_get_hostname($name){$subdomains=array(‘media1.mydomain.com’,’media2.mydomain.com’);//add your subdomains here, as many as you want.$host=abs(crc32(basename($name))%count($subdomains));$hostname=$subdomains[$host];return$hostname;}add_filter(‘wp_get_attachment_url’,’parallelize_hostnames’,10,2);

25. Prefer asynchronous resources

Possible issues:

Fetching resources asynchronously prevents those resources from blocking the page load.

Recommendation:

JavaScript resources that aren’t needed to construct the initial view of the web page, such as those used for tracking/analytics, should be loaded asynchronously. Some scripts that display user-visible content may also be loaded asynchronously, especially if that content is not the most important content on the page.

Solution: 

Use a script DOM element

Using a script DOM element maximizes asynchronous loading across current browsers:

<script>var node = document.createElement(‘script’);node.type = ‘text/javascript’;node.async = true;node.src = ‘example.js’;// Now insert the node into the DOM, perhaps using insertBefore()</script>

Load Google Analytics asynchronously

The newest version of the Google Analytics snippet uses asynchronous JavaScript. Pages that use the old snippet should upgrade to the asynchronous version

26. Put CSS in the document head

Possible issues:

Moving inline style blocks and <link> elements from the document body to the document head improves rendering performance.

Recommendation:

As required by the HTML 4.01 Specification, always put external stylesheets in the <head> section using the in the <link>tag. Don’t use @import. Also make sure that you specify the stylesheets in the correct order with respect to scripts.

Put <style> blocks in the <head>section.

Solution:

When multiple style sheets are involved, it allows for parallel downloads to happen much early in the process of parsing and rendering.

The browser might be able to start the rendering process early as the style sheets and rendering rules are available.

<head><link rel=”stylesheet” type=”text/css” href=”redstyle.css”><link rel=”stylesheet” type=”text/css” href=”customstyle.css”><link rel=”stylesheet” type=”text/css” href=”mystyle.css”></head>

27. Remove query strings from static resources

Possible issues:

Query Strings prevent caching of Static Resources like CSS and JavaScript on Proxy Servers and CDNs, which results slow loading speed of a website. So, you must have remove these Query Strings (which content “?” or “&” in their URLs) from Static Resources to enable caching on Proxy Servers. And once you remove these strings, you will definitely notice a significant increase in page speed.

Recommendation:

Add a filter hook in functions.php file to modify Static Resources URLs i.e. CSS and JavaScript. Filter hooks (add_filter) are used to modify various types of internal data in WordPress.

Solution: 

Add the following code in your functions.php file to Remove Query Strings form Static Resources

//* TN – Remove Query String from Static Resourcesfunctionremove_css_js_ver( $src ) {if(strpos( $src, ‘?ver=’ ) )$src = remove_query_arg( ‘ver’, $src );return $src;}add_filter( ‘style_loader_src’, ‘remove_css_js_ver’, 10, 2 );add_filter( ‘script_loader_src’, ‘remove_css_js_ver’, 10, 2 );

28. Remove unused CSS

Possible issues:

Unused entries in your CSS files increase the page load time of your website and also affect the site’s performance as the browser has to do extra work parsing all the extra rules. And even if the impact on performance is minimal, it would make your task of maintaining CSS easier if the files are kept clean and well-structured.

Recommendation:

Minify CSS

If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.

Solution: 

Remove any inline style blocks containing CSS that is not used by the current page.

29. Serve scaled images

Possible issues:

A scaled image is an image whose size matches exactly with the size defined in CSS or HTML. Using properly sized images can save many bytes of data and improve the performance of your site, especially on mobile devices or tablets. A scaled image will take up less space, will be loaded faster and reduce the resource usage.

Recommendation:

It can be tempting to serve high-resolution images to all users when catering for displays of varying pixel density. The compressive images technique often yields smaller file sizes with better perceived quality, so that option should definitely be evaluated, however just be aware that higher resolution images will always require more memory and take longer to decode, so it’s important to also consider low-powered devices with standard-resolution displays. For this reason, we recommend making use of the srcset attribute

Solution:

A scaled image is an image that has been scaled to match the size that it is displayed.

http://man-vimal.net78.net/introduction/?intro/action=main THe results were assuch :The following images are resized in HTML or CSS.Serving scaled images could save 449.3KiB(99% reduction).http://man-vimal.net78.net/…/twitter-logo.png is resized in HTML or CSS from 367×367 to 20×20. Serving a scaled image could save 140.9KiB (99% reduction).http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692×1,692 to 20×20. Serving a scaled image could save 115.9KiB (99% reduction).http://man-vimal.net78.net/…/linkedin.jpg is resized in HTML or CSS from 1,024×768 to 20×20. Serving a scaled image could save 99.6KiB (99% reduction).http://man-vimal.net78.net/…/panorama.jpg is resized in HTML or CSS from 604×453 to 100×100. Serving a scaled image could save 81KiB (96% reduction).http://man-vimal.net78.net/…/googleplus.jpg is resized in HTML or CSS from 450×320 to 20×20. Serving a scaled image could save 12KiB (99% reduction).

………………………………………………………………………………………………………………………………………………………………………….

20×20. Serving a scaled image could save 140.9KiB (99% reduction)

This is telling you that your source image is 367×367 but you are displaying it at 20×20.

It is inefficient because the browser has to download the larger image and then rescale it. The 367×367 image is 140kb larger than a 20×20 image would be.

To fix this, resize the image (in photoshop, preview, etc. ) so that is 20×20 and serve that one instead of the image you are currently serving.

30. Serve static content from a cookieless domain

Possible issues:

When the browser requests a static element and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. It increases page load time. Therefore, it is better to avoid cookies for static resources like CSS, JS, Images, etc. files.

Recommendation:

To reserve a cookieless domain for serving static content, register a new domain name and configure your DNS database with a CNAME record that points the new domain to your existing domain A record. Configure your web server to serve static resources from the new domain, and do not allow any cookies to be set anywhere on this domain. In your web pages, reference the domain name in the URLs for the static resources.

Solution: 

There are a couple ways to fix the “serve static content from a cookieless domain” warning, such as using a CDN and also re-configuring your WordPress site.

Use a CDN:

use a CDN provider that has the ability to ignore cookies as well as strip cookies which will completely prevent the client from receiving the Set-Cookie response header. KeyCDN is one CDN provider that does offer this feature. This is an easy alternative without having to mess with moving and configuring your site to deliver static assets from a separate subdomain.

Re-Configure WordPress Site:

First, create a subdomain such as static.domain.com. This is where you will deliver all your files from.

Set up your subdomain’s DNS record as a CNAME pointing to your main domain.

Point your subdomain to your /wp-content directory by editing your wp-config.php file:

define(“WP_CONTENT_URL”, “http://static.domain.com”); define(“COOKIE_DOMAIN“, “domain.com”);

31. Specify a cache validator

Possible issues:

All static resources should have either a Last-Modified or ETag header. This will allow browsers to take advantage of the full benefits of caching.The first thing that is important to note about this warning is that you can only fix this for requests that are on your server.

Recommendation:  

Specifying cache validation in the header may help increase your load speed.

 Solution: 

There are four different types of headers which can be utilized in different ways to fix this warning. This is where it can get a little confusing, but we will try to explain it as easy as possible.

Headers that Validate Cache:

The first two headers are last-modifiedETag. These headers help the browser determine if the file has changed since the last time it was requested. Or rather, they validate the cache.

  1. The last-modifiedheader is generally sent automatically from the server. This is one header you generally won’t need to manually add. It is sent to see if the file in the browser’s cache has been modified since the last time it was requested.

  1. The ETagheader is also very similar to the last-modified header. It is also used to validate the cache of a file. If you are running Apache 2.4 or higher, the ETag header is already automatically added using the FileETag directive. And as far as NGINX goes, since 2016 the ETag header is enabled by default.

Cache-Control is a header made up of different directives which allow you to define the length of the cache. A few of the most common directives include:

max-age: Defines the amount of time a file should be cached for.

public: Allows any cache publicly to store the response.

private: Only cacheable by browser accessing the file.

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

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

  1.         And last you have the expires header. According to this Google Developers article, HTTP Caching: Cache-Control header was defined as part of the HTTP/1.1 specification and supersedes previous headers (in this case the Expires header) used to define response caching policies. All modern browsers support Cache-Control, hence that is all you need.

  2.  

To add the Expires header in Apache, simply add the following code to your .htaccess file.

## EXPIRES HEADER CACHING ##

<IfModulemod_expires.c>ExpiresActive OnExpiresByType 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 ## 

32. Specify a character set early

Possible issues:

Setting the character set at the server level reduces browser processing.

Define the character set being used at the server for all pages

Avoid setting it in the meta http-equiv tag

Reduce page load times

Cost benefit ratio: high value

Recommendation:

Prefer HTTP over meta tag parameters

Specify the meta tag at the top of the head section

Always specify a content type

Be sure to specify the correct character encoding

 Solution: 

Server-Side:

Nginx

http {

include /etc/nginx/mime.types;

charset UTF-8;

}

Apache

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

Client-Side:

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

33. Specify a Vary: Accept-Encoding header

Possible issues:

Let’s say you have an old browser without gzip compression and a modern browser with it. If you don’t utilize the Vary: Accept-Encoding header your web server or CDN could cache the uncompressed version and deliver that to the modern browser by mistake, which in turn hurts the performance of your WordPress site. Specifying the Vary: Accept-Encoding header instructs the proxy to store both a compressed and uncompressed version of the resource.

Recommendation:

Each resource should specify an explicit caching policy that answers the following questions: whether the resource can be cached and by whom, for how long, and if applicable, how it can be efficiently revalidated when the caching policy expires. When the server returns a response it must provide the Cache-Control and ETagheaders:

  • Cache-Controldefines how, and for how long the individual response can be cached by the browser and other intermediate caches.

  • ETagprovides a revalidation token that is automatically sent by the browser to check if the resource has changed since the last time it was requested.

 Solution:

To fix this in Apache, add the following code to your .htaccess file via FTP. This file can be found on the root of your server. You can also edit your .htaccess file with the Yoast SEO plugin if your permissions are set correctly.

<IfModulemod_headers.c><FilesMatch “.(js|css|xml|gz|html)$”>    Header append Vary: Accept-Encoding</FilesMatch></IfModule>

34. Specify a viewport for mobile browsers

Possible issues:

Make the page responsive which can be viewed in mobile devices. Utilize the viewport meta tag so that mobile devices can render the document at the correct size.

Recommendation:

Configuring the webpage using the viewport meta tag can be time consuming, and there are only a few different properties. Page Speed only checks for the presence of the viewport meta tag currently, so do not feel pressured to fully configure the site using the tag.

 Solution:

<meta name=”viewport”content=”width=device-width, initial-scale=1, maximum-scale=1″>

35. Specify image dimensions

Possible issues:

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

Recommendation:

Specify dimensions that match those of the images themselves

Be sure to specify dimensions on the image element or block-level parent

 Solution:

Before:

<imgsrc=”http://example.com/image.jpg” title=”Some Title” /><imgsrc=”http://example.com/vector.svg” class=”svg” /><imgsrc=”http://example.com/another-vector.webp” />

After:

<imgsrc=”http://example.com/image.jpg” title”Some Title” width=”100″ height=”25″ /><imgsrc=”http://example.com/vector.svg” class=”svg” width=”100%” height=”auto” /><imgsrc=”http://example.com/another-vector.webp” width=”100%” height=”auto” />

YSlow:

1. Add Expires headers

Possible issues:

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.

Recommendation:

  • Be aggressive with your caching for all static resources

  • Expiry at a minimum of one month (recommended: access plus 1 year)

  • Don’t set your caching more than a year in advance!

Solution:

open up your htaccess file and paste in the following:

<IfModulemod_expires.c># Enable expirationsExpiresActive On # Default directiveExpiresDefault “access plus 1 month”</IfModule>

First we enable expirations and then we set a default expiry date for files we don’t specify. Now we want to add the lines to explain what expires when. Right above the </IfModule> paste the following and change the dates to reflect the times that best suit your website.

# My faviconExpiresByType image/x-icon “access plus 1 year”# ImagesExpiresByType image/gif “access plus 1 month”ExpiresByType image/png “access plus 1 month”ExpiresByType image/jpg “access plus 1 month”ExpiresByType image/jpeg “access plus 1 month”# CSSExpiresByType text/css “access plus 1 month”# JavascriptExpiresByType application/javascript “access plus 1 year”

Your complete file should look like:

<IfModulemod_expires.c># Enable expirationsExpiresActive On # Default directiveExpiresDefault “access plus 1 month”# My faviconExpiresByType image/x-icon “access plus 1 year”# ImagesExpiresByType image/gif “access plus 1 month”ExpiresByType image/png “access plus 1 month”ExpiresByType image/jpg “access plus 1 month”ExpiresByType image/jpeg “access plus 1 month”# CSSExpiresByType text/css “access plus 1 month”# JavascriptExpiresByType application/javascript “access plus 1 year”</IfModule>

2. Avoid AlphaImageLoader filter

Possible issues:

In Internet explorer AlphaImageLoader blocks semi-transparent true color PNG files However, this filter blocks rendering and freezes the browser while the image is being downloaded. Additionally, it increases memory consumption. The problem is further multiplied because it is applied per element, not per image.

Recommendation:

The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users.

Solution:

AlphaImageLoader is a technique used to support transparent PNG files on older versions of Internet Explorer. It is probably used in the CSS of your theme. It should only affect IE6, so it is best to ignore it.

3. Avoid CSS expressions

Possible issues:

Expressions can produce thousands of unnecessary CSS evaluations.

Recommendation:

CSS expressions are a powerful (and dangerous) way to set CSS properties dynamically. They were supported in Internet Explorer starting with version 5, but were deprecated starting with IE8. As an example, the background color could be set to alternate every hour using CSS expressions:

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );

As shown here, the expression method accepts a JavaScript expression. The CSS property is set to the result of evaluating the JavaScript expression. The expression method is ignored by other browsers, so it is useful for setting properties in Internet Explorer needed to create a consistent experience across browsers.

Solution:

              Use standard CSS properties if possible.

Use JavaScript to script styles.

4. Avoid empty src or href

Possible issues:

IE and Edge will both make a request to the page’s parent directory, while Firefox and older Webkit browsers (like Safari) will re-request the page itself! This behavior could potentially corrupt user data, waste server computing cycles generating a page that is never viewed, or in the worst case, cripple your servers by sending them a large amount of unexpected traffic.

Recommendation:

The best thing to do is eliminate the offending code from your pages whenever possible. That’s fixing the problem at the source. If you can’t do that, though, your next best option is to attempt to detect it on the server and abort any further execution.

Solution:

Detect and eliminate the offending codes from your pages

There are basically two patterns to identify. The first pattern is just straight HTML:

<imgsrc=”” >

The second pattern is JavaScript and involves the dynamic setting of the src property on either a newly created image or an existing one:

varimg = new Image();

img.src = “”;

For other browsers, there are two additional problem scenarios: <script src=””> and <link href=””>. Chrome, Safari, and Firefox all initiate another request.

5. Avoid HTTP 404 (Not Found) error

Possible issues:

4XX pages client error can hurt your website crawlability, because search engine bots will be coming across links to dead or broken pages from your website. . This is usually the result of broken links. These errors prevent users and search engine robots from accessing your WebPages; this will in turn lead to a drop in traffic.

Recommendation:

Wherever possible, you should update the links to resources that have moved, or delete those links if the resources have been removed. Avoid using HTTP redirects to send users to the requested resources, or to serve a substitute “suggestion” page. As described above, redirects also slow down your site, and are better to avoid as much as possible.

Solution:

  1. Redirect the 404 error somewhere else. If people are reaching /specials, which is an error page, you can tell your server to redirect people to /special instead.

  2. Correct the source link. If the broken link sending traffic to the not found error page exists on your website, and is under your control, you can correct the broken link at the source. However, most 404’s come from sources you don’t control.

  3. Restore deleted pages. Sometimes, you delete pages from your website and people still come to your website to find those page you deleted. If somebody tries to find a deleted page, they’ll get a 404 error. To fix this, you can usually restore the deleted page.

  4. Ignore the not found error. Sometimes, for low priority not found errors that aren’t costing you customers, you can simply ignore the 404 is an acceptable solution

6. Avoid URL redirects

Possible issues:

Avoid using URL redirects as they add additional delays to a page load.

Recommendation:

Basically avoid all 301 and 302 redirects if possible. Obviously when it comes to SEO, this is not always possible. But the less redirects in place, the better.

Solution:

As stated above, you should remove any redirect which isn’t absolutely necessary. The ones which are necessary should always be server side(301 or 302 redirects) and never client side(HTML, Javascript, etc..). So when your website uses client side redirects replace them with server side redirects.

For example, going to http://astrology.yahoo.com/astrologyresults in a 301 response containing a redirect to http://astrology.yahoo.com/astrology/(notice the added trailing slash).

7. Compress components with gzip

Possible issues:

Save time and bandwidth by compressing resources. GZIP is a file format and a software application used for file compression and decompression. GZIP compression is enabled server-side, and allows for further reduction in the size of your HTML, stylesheets, and JavaScript files. It will not work on images as these are already compressed in a different way.

Recommendation:

Reduce the size of files sent from your server to increase the speed to which they are transferred to the browser.

  • Reduce sizes of pages by up to 70%

  • Increase page speed

  • Cost-benefit ratio: high

  • Access needed to the .htaccess files or server administration files

Solution: 

There are different methods of setting up gzip compression depending on whether or not you’ve got an IIS or Apache server (or something else entirely).

For IIS

If your server is IIS, follow these instructions in the Microsoft TechNet document to enable compression.

For Apache

You will need to add the following lines to your .htaccess file:

<IfModulemod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEF<IfModulemod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Header append Vary User-Agent

</IfModule>

After you’ve saved your .htaccess file, test your site again in GTmetrix.com to make sure it has been properly compressed.

8. Configure entity tags (ETags)

Possible issues:

Entity tags, also commonly referred to as ETags, are cache validators which help the browser determine if it can retrieve the requested resource from local cache or if it must be retrieved from the server. This mechanism helps improve loading times since if the resource can be retrieved from local cache, the browser does not need to make an additional request to the server.

Recommendation:

A traditional ETag is comprised of three separate components which make it an unique identifier for each resource:

  • INode

  • MTime

  • Size

Solution:

For Apache:

It can be set up like this:

“FileETagMTime Size”

If you have multiple servers, you want to disable ETags.

FileETag None

Put the above code in your httpd.conf (if you have access), otherwise you can put it in .htaccess

9. Make AJAX cacheable

Possible issues:

To improve performance, it’s important to optimize these AJAX responses. The most important way to improve the performance of AJAX is to make the responses cacheable. Usually, we use AJAX to send data asynchronously to the server and display the result that we get from the server without making the users wait (or less time to wait in practical) for data. We can make it faster if we know that the user is going to ask for the same thing again, then we can make AJAX cacheable. It is almost the same as HTTP caching that we have seen in the Setting up browser caching (Simple) recipe.

Recommendation:

The best way to make AJAX cacheable is to take advantage of expire headers or cache-control headers.

Solution:

  • Gzip Components

  • Reduce DNS Lookups

  • Minify JavaScript

  • Avoid Redirects

  • Configure ETags

10. Make favicon small and cacheable

Possible issues:

A favicon, or favicon.ico, is a small image icon file that is associated with your website. When a browser hits your website it does a silent lookup in the background for your favicon.ico file in the server’s root. Since the browser requests this file, it needs to be present; if it is missing, the browser returns a 404 error (see “Avoid HTTP 404 (Not Found) error” above). Making favicon.ico cacheable avoids frequent requests for it.

Recommendation:

It is recommended to keep your favicon as small as possible and make sure it isn’t generating a 404 request. For example, if we take a look at Google’s favicon we can see that it is very small at only 1.6KB.

Solution:

You can also use an online tool like real favicon generator in which you can upload a PNG, JPG, or SVG (vector based file type) and it will generate the ICO files for you. The tool also has some great generators for incorporating your icons into static sites and projects such as:

11. Make fewer HTTP requests

Possible issues:

Reduce HTTP requests through combined files and CSS sprites.

Recommendation:

Some ways to reduce the number of components include:

Combine files

Combine multiple scripts into one script

Combine multiple CSS files into one style sheet

Use CSS Sprites and image maps

Solution:

Combine & inline your CSS scripts

Inline smaller Javascripts

Combine all Javascripts

Minimize the use of design & functional images

Minimize amount of plugins

12. Make JavaScript and CSS external

Possible issues:

Make JavaScript and CSS external to utilize browser caching.

Recommendation:

The best solution generally is to deploy the JavaScript and CSS as external files.

If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, there is a greater potential benefit from cached external files.

Solution:

inside your <head> section:

<scripttype=”text/javascript”src=”exampleJavaScript.js”></script>

<linkhref=”example.css”rel=”stylesheet”type=”text/css”/>

Make sure example.css, exampleJavaScript.js and your html file are in the same folder.

13. Minify JavaScript and CSS

Possible issues:

Remove unnecessary characters from JavaScript and CSS to speed up download times.

Recommendation:

Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

Solution:

Minifying your code removes:

  • White space characters

  • New line characters

  • Comments

  • Block delimiters:

This may also improve readability in certain cases:

14. Reduce cookie size

Possible issues:

Keep cookies as small as possible to minimize the HTTP header size.

Recommendation:

  • Eliminate unnecessary cookies

  • Keep cookie sizes as low as possible to minimize the impact on the user response time

  • Be mindful of setting cookies at the appropriate domain level so other sub-domains are not affected

  • Set an Expires date appropriately. An earlier Expires date or none removes the cookie sooner, improving the user response time

15.Reduce DNS lookups

Possible issues:

DNS lookups add delays to the initial requests to a host. Making requests to a large number of different hosts can hurt performance.

Recommendation:

To process of reducing DNS lookups is quite straightforward and can be achieve by adopting either or both of the following suggestions.

  • Simply reduce the amount of hostnames that are requested in order to generate your web page.

  • Download the files that are being referenced to an external resource and host them on your origin server or a CDN. This way, these resources will be retrieved without having to make an additional DNS lookup.

Solution:

Use Alternative Services With Faster DNS

Take Advantage of DNS Prefetching

Another tip on speeding up DNS is to use DNS prefetching. This allows the browser to perform DNS lookups on a page in the background. You can do so by adding some lines of code to the header of your WordPress site. See some examples below.

<!–Prefetch DNS for external assets –><link rel=”dns-prefetch” href=”//fonts.googleapis.com”><link rel=”dns-prefetch” href=”//www.google-analytics.com”><link rel=”dns-prefetch” href=”//cdn.domain.com”>

DNS prefetch is also supported by all major browsers except for iOS Safari, Opera Mini, and Android Browser.

Use DNS Cache to Your Advantage

Thankfully, due to DNS caching DNS lookups are not required every time a browser requests an asset. As long as the cache hasn’t expired, the DNS server’s cache can provide the hostname to the browser without having to look it up. What defines the length of DNS cache is what’s called TTL or time to live.

 

Not all DNS records should be cached equally. It is based on the type of record you use that should define what its TTL should be. There are no values which are “set in stone” however the following provide a good baseline:

  • CNAME Records– 24 hours

  • A and AAAA Records– Anywhere between 5 minutes to 1 hour

  • TXT Records– 12 hours

  • MX Records– 12 hours

Note that in many cases (like in the screenshot above) TTL values are shown in seconds instead of minutes or hours so be sure to do the conversion before you define a value.

16. Reduce the number of DOM elements

Possible issues:

A complex page means more bytes to download, and it also means slower DOM access in JavaScript.

Recommendation:

The number of DOM elements is easy to test, just type in Firebug’s console:

document.getElementsByTagName(‘*’).length

For reducing the no. of DOM elements check other similar pages that have good markup.

Solution:

use:

<ulid=”navigation-main”>

etc..

</ul>

in stead of:

<div id=”navigation-main”>

<ul>

etc..

</ul>

</div>

… when possible, that is. Sometimes you need the additional div for layout purposes. But when not necessary, don’t use it.

17. Remove duplicate JavaScript and CSS

Possible issues:

Duplicate JavaScript and CSS files reduces performance by creating unnecessary HTTP requests (IE only) and wasted JavaScript execution (IE and Firefox).

Recommendation:

One way to avoid accidentally including the same script twice is to implement a script management module in your templating system. The typical way to include a script is to use the SCRIPT tag in your HTML page.

<script type=”text/javascript” src=”menu_1.0.17.js”></script>

An alternative in PHP would be to create a function called insertScript.

<?phpinsertScript(“menu.js”) ?>

Solution:

You can remove duplicated JavaScript and CSS from your website with the following code modifications:

<script type=”text/javascript”src=”yourscript.js”></script>

You can do the same in PHP by creating a function called incertScript:

<?phpinsertScript(“yourscript.js”) ?>

Additionally, many widget developers have started using the line:

if(d.getElementById(id)) {return;}

Which means that, if the async SCRIPT element already exist, the script will not be executed again. This is done by giving the SCRIPT element an ID, and checking for that ID on subsequent calls. Using this line is making sure that even if you see multiple script instances on your page only 1 of them is being executed.

18. Use a Content Delivery Network (CDN)

Possible issues:

CDNs can give an equally fast web experience to your users across the globe.

Solution:

  • Use a global variable to easily access the URL of your CDN

  • Prefix the URLs of your static resources with the CDN variable

  • Use configuration files to define the CDN variable

  • Set your CDN to fetch resources from an origin server

  • Invalidate your resources by putting them into a versioned directory

  • Spoof the versioned directory by using a URL Rewrite

  • Maintain a version number within a config file

19. Use cookie-free domains

Possible issues:

Serve static content from a different domain to avoid unnecessary cookie traffic.

Recommendation:

If your domain is www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domain example.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free.

Solution:

If your domain is www.example.org, you can host your static components on static.example.org. However, if you’ve already set cookies on the top-level domainexample.org as opposed to www.example.org, then all the requests to static.example.org will include those cookies. In this case, you can buy a whole new domain, host your static components there, and keep this domain cookie-free. Yahoo! uses yimg.com, YouTube uses ytimg.com, Amazon uses images-amazon.com and so on.

Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies. On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it’s best to use the www subdomain and write the cookies to that subdomain.

20. Use GET for AJAX requests

Possible issues:

When using the XMLHttpRequest object, the browser implements POST in two steps:

1.send the headers, and..

2.send the data.

It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

Recommendation:

An interesting side effect is that POSTwithout actually posting any data behaves like GET. Based on the HTTP specs, GET is meant for retrieving information, so it makes sense (semantically) to use GET when you’re only requesting data, as opposed to sending data to be stored server-side.

Solution:

In the above points Which makes clear that GET requests are more responsive – something you need in AJAX environments! Because “Ajax” requests are subject to the same origin policy there is limited security risks when using GET instead of POST.

jQuery AJAX Functions that use GET as default: $.get(), $.getScript(), $.getJSON().load()

Waterfall:

A web page is made up of different assets, such as HTML, JavaScript, CSS, and images. Each of these generates requests to render what you see on your website. Typically the more requests you have, the slower your website will load.

The GTmetrix waterfall chart displays all of the individual requests on your web page. You can then analyze each request to see what is causing delays and performance issues on your site. Below is a more in-depth summary and or definition of what each of the colors means on each request.

This time delay shows up as blocking in the GTmetrix waterfall chart.

DNS Lookup: Time to resolve the DNS

Connecting: Time taken to create a connection

Blocking: Time spent in the browser queue waiting for a connection

Sending: Time taken to send the request

Waiting: Time spent waiting for the response (time to first byte)

Receiving: Time taken to download content

  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *