How to Optimize Your Website For Search Engines

     Before you begin optimizing your website, you need to know about the current status of your website. Here, in this article, I will give you few tips and tools to know the status of your website.

 

Website Optimization

     The tools which you use to optimize the websites is important. Here, we have listed few tools which will analyze, monitor and improve the status of your websites. But, you need to do this on every update and stay up to date.

Everyone loves a fast website. Now, improve your website speed using the tools below:

  1. Google page speed (https://developers.google.com/speed/pagespeed/insights/)

This tool is provided by Google to analyze and provide optimization suggestion to improve your website. You will get pagespeed score and valuable insights that helps improve your website speed and performance

  1. Pingdom. (https://tools.pingdom.com/)

Use this free tool to analyze the load speed of your websites and learn how to make to make your website faster.

  1. GT metrics. (https://gtmetrix.com/)

A free tool which analyzes your page’s speed actively  and it keeps track and sends you alerts if your site slows down

 

Get your pagespeed score and get recommendations for improving your website.

     Search engines evaluate your website through the page load time of your website. Even, this is an important point to make visitors stay on your site for a longer period. If it takes a lot of time to load the website, obviously, they will move along. The website takes the time to load files like HTML, CSS, and JavaScript. One of the best ways to speed up your code is to minify it.

1.Let’s have a look on how to minify it.

What is Minifying?

     It is one of the methods to remove any unnecessary characters that are not required for the code to execute it.

Minify JS and CSS files

     To minify CSS, try CSSNano and csso.

This improves response time since the size of the download files is reduced.

2. Combine JS and CSS files

     This processing can improve the load time of your website by combining JS and CSS into fewer files by compressing them.

Steps involved to with JS and CSS files:

  • Use deferred style script to render web pages quicker, In header.php  before close the header

code 1:

                <noscript id=”deferred-styles”>

                  <link href=”<?php bloginfo(‘template_url’); ?>/css/font-awesome.css” rel=”stylesheet” type=”text/css”>

                </noscript>

 

                <script>

                      var loadDeferredStyles = function() {

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

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

                                      replacement.innerHTML = addStylesNode.textContent;

                                      document.body.appendChild(replacement)

                                      addStylesNode.parentElement.removeChild(addStylesNode);

                      };

                    var raf = requestAnimationFrame || mozRequestAnimationFrame ||

                    webkitRequestAnimationFrame || msRequestAnimationFrame;

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

                    else window.addEventListener(‘load’, loadDeferredStyles);

                </script>

3. Set a timeout for loading a functionality for unwanted JS, CSS & images

4. Video keeps getting shortened to 5 seconds

5. Add async or defer attributes for JS script include (Async : It should not support firefox and IE and it needs to need to be verified).

6. Add the video in an iframe by setting a timeout

7. Load only the common JS in front page

8. Block or exclude JS and CSS in the front page

9. Remove all the JS errors ( refer console in browser ), PHP errors and warnings ( refer apache error log )

10. Use sprite images for icon and small images or else it’s better to use fonts for icons

11. Optimize the images and ensure the quality of the images don’t get affected

12. Set the expiry time for JS, CSS and images resources.

13. Use the .htaccess file, If it is apache server.

14. Set the leverage browser cache for JS and CSS using ht access file

15. Leverage Browser Caching

 

Browser caching

In this process, it stores the resource files of the webpage on a local computer when a user visits a webpage.

 

Leveraging browser caching

     In this process, the webmaster has instructed browsers on how they should deal with the resources. When a browser  loads and displays your webpage,  it has to load things like logo, CSS file, and other resources

Leverage browser caching and the ways to do it:

  1. Change the request headers of the resources to use caching
  2. Optimize the caching strategy.

Ways to enable caching:

  • Add some code to a file called .htaccess on web host/server
  • Go to the file manager (or wherever you go to add or upload files) on your webhost 
  • Browser caching for .htaccess
  • The code below is used to tell the browsers what to cache
  • Even tell the browsers, how long to “remember” it.
  • And it should be added to the top of the  .htaccess file.

Code 2:

## LEVERAGE BROWSER 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/x-javascript “access 1 month”

     ExpiresByType application/javascript “access 1 month”

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

     ExpiresByType image/x-icon “access 1 year”

     ExpiresDefault “access 2 days”

</IfModule>

## LEVERAGE BROWSER CACHING ##

 

Save the .htaccess file and then refresh your webpage. Follow these steps to make your website is optimized for search engines.

 

 

 

Comments are closed.