Pankaj Pawar

Copy directory and files from remote server to local machine – linux command SCP

Lazy Load Images Using jQuery

browser caching

compress html

leverage browser caching

minify css

minify js

page speed

pagespeed

<h3 class="wp-block-heading">Why we need wildcard sub-domain and what is the wildcard sub-domain?</h3>



When you are creating multiple network site or you will allow user to create own site for them on your domain, for this automation process you need Wildcard sub-domain.



When you have fixed number of sub-domain that time you really don’t need to create Wildcard Sub-domain. Wildcard Sub-domain is not related to WordPress only, when you are develop any system base on any&nbsp;platform or framework&nbsp;and you want huge number of sub-domains that time you will use Wildcard Sub-domain.



Wildcard Sub-domain is just like&nbsp;<code>*.yourdomain.com</code>&nbsp;When you will try to access any Sub-domain on&nbsp;<code>yourdomain.com</code>&nbsp;that time you are redirected to your main domain directory or to the Document Root you have choose at the time of creating Wildcard Sub-domain.



<h4 class="wp-block-heading">To create wildcard sub-domain following the steps:</h4>



<ol class="wp-block-list">
<li>Login to your hosting control panel.</li>



<li>Find for Sub-domain under Domains section and click on that.</li>



<li>Enter the <code>*</code> in Subdomain text field.</li>



<li>Choose your domain.</li>



<li>Select your Document Root where you have install WordPress or Your application where you want to point Sub-domain.</li>



<li>Click on create.</li>
</ol>



That’s it you have created wildcard Sub-domain.



<h4 class="wp-block-heading">Video demonstration of how to create wildcard sub-domain:</h4>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/r4YEb7JgDkg
</div></figure>

DevOps

Create Wildcard Sub-domain from your hosting panel / cPanel

How to improve page speed or page loading time? This question lots of time ask and search online. Reason behind this question is, today we have used lot’s type of web font, different type CSS to look and feel and in now days CSS Transitions on your website and the vast area cover by java script for animation and other use.



In this situation we can not remove Java Script, CSS or Image from our website. We need to find some solution on this problem. We will solve this problem by caching your CSS, Java Script or images which is not change regularly.



We need to remember When you are writing content or adding images in content, images must be minifyed and content is not more than 250KB as per SEO rules.



Now i will have some code to leverage cache and minify your HTML on the fly.



Keep maximum your Java Script, CSS, Images expiry time this will effect on you Page Load Speed (PageSpeed) and increase by 20%, But keep in mind your uploaded images is always compressed and its not more than 120 kb or 180 kb.



<pre class="wp-block-preformatted">## EXPIRES CACHING ## &lt;IfModule mod_expires.c&gt; 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 text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" &lt;/IfModule&gt; ## EXPIRES CACHING ## &lt;FilesMatch "\\.(js|css|html|htm|php|xml)$"&gt; SetOutputFilter DEFLATE &lt;/FilesMatch&gt; &lt;IfModule mod_gzip.c&gt; 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.* &lt;/IfModule&gt;</pre>



Above code will affect on your Java Script, CSS, Image, PHP and on HTML and increase you page speed.



Now Below code is my favorite it will compress your HTML and decrease HTML page loading time.



<pre class="wp-block-preformatted">function sanitize_output($buffer) { $search = array( '/\&amp;gt;[^\S ]+/s', // strip whitespaces after tags, except space '/[^\S ]+\&amp;lt;/s', // strip whitespaces before tags, except space '/(\s)+/s' // shorten multiple whitespace sequences ); $replace = array( '&amp;gt;', '&amp;lt;', '\\1' ); $buffer = preg_replace($search, $replace, $buffer); return $buffer; } ob_start("sanitize_output");</pre>



Place above code in your index.php or the root PHP file which run first when your template or page will be load.

CodeIgniter, htaccess, index.php, mod rewrite rule, SEO, url rewrite rule

jQuery lazy load images is the opposite of pre-loading images. Lazy load delays loading of images in a long web page. pre-loading images on long web page will take too much time to load web page, instead of this we use lazy load on long web page.



Using lazy load images make web page load faster. lazy load jQuery detect which images is in device view port and load only that images. images outside view port wont be loaded before user scroll to them. some time it will reduce server load.



Here i am going to mention some&nbsp;java script and jQuery to lazy load images on web page:



<h2 class="wp-block-heading">Lazy Load Image Using Java Script</h2>



<pre class="wp-block-preformatted">&lt;img data-src="images/example.jpg" alt="" /&gt; &lt;script&gt; //these handlers will be removed once the images have loaded window.addEventListener("DOMContentLoaded", lazyLoadImages); window.addEventListener("load", lazyLoadImages); window.addEventListener("resize", lazyLoadImages); window.addEventListener("scroll", lazyLoadImages); function lazyLoadImages() { var images = document.querySelectorAll("#main-wrapper img[data-src]"), item; // load images that have entered the viewport [].forEach.call(images, function (item) { if (isElementInViewport(item)) { item.setAttribute("src",item.getAttribute("data-src")); item.removeAttribute("data-src") } }) // if all the images are loaded, stop calling the handler if (images.length == 0) { window.removeEventListener("DOMContentLoaded", lazyLoadImages); window.removeEventListener("load", lazyLoadImages); window.removeEventListener("resize", lazyLoadImages); window.removeEventListener("scroll", lazyLoadImages); } } &lt;/script&gt;</pre>



above script will detect the image tag with&nbsp;<code>data-src</code>&nbsp;attribute inside the&nbsp;<code>#main-wrapper</code>&nbsp;and convert it to lazy load images. If you notice above java script will trigger when your page will finished loading,&nbsp;resize the page also on&nbsp;scroll the web page. script will add src attribute by taking the image source url from data-src and remove data-src attribute.



<h2 class="wp-block-heading">Lazy Load Image Using jQuery</h2>



Here we have use jQuery with the same concept above we have use in java script.



<pre class="wp-block-preformatted">$(window).on('DOMContentLoaded load resize scroll', function () {; var images = $("#main-wrapper img[data-src]"); // load images that have entered the viewport $(images).each(function (index) { if (isElementInViewport(this)) { $(this).attr("src",$(this).attr("data-src")); $(this).removeAttr("data-src"); } }) // if all the images are loaded, stop calling the handler if (images.length == 0) { $(window).off('DOMContentLoaded load resize scroll') } }) function isElementInViewport (el) { var rect = el.getBoundingClientRect(); return ( rect.top &gt;= 0 &amp;&amp; rect.left &gt;= 0 &amp;&amp; rect.bottom &lt;= $(window).height() &amp;&amp; rect.right &lt;= $(window).width() ); }</pre>



<h4 class="wp-block-heading">You will also get free jQuery library online for lazy load images.</h4>



<ol class="wp-block-list">
<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-lazy-load">jQuery Lazy Load</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-unveil-js">jQuery Unveil&nbsp;Js</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-blazy-js">jQuery Blazy Js</a></li>



<li><a href="https://web.archive.org/web/20170617031420/http://sharinginfo.in/lazy-load-images-using-jquery/#jquery-lazy-load-xt">jQuery Lazy Load XT</a></li>
</ol>



<h3 class="wp-block-heading">jQuery Lazy Load</h3>



Lazy load&nbsp;script depend on jQuery so you need to first add jQuery and then lazy load images script in your web page footer area or at the end of file.



After this you must need to alter img tag src attribute with data-original and add img path in data-original attribute.



<pre class="wp-block-preformatted">&lt;img class="lazy" data-original="img/example.jpg" width="640" height="480"&gt;</pre>



You will init lazy load image jQuery by



<pre class="wp-block-preformatted">$(function() { $("img.lazy").lazyload(); });</pre>



some customize option available for lazy load jquery plugin.



Threshold



Threshold option use to pre-load image before they appear on screen .



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ threshold : 200 });</pre>



Events



In lazy load script two events available&nbsp;<code>click</code>&nbsp;and&nbsp;<code>mouseover</code>. &nbsp;you will also create the custom events to call lazy load.



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ event : "click" });</pre>



events allow you to override default settings of lazy load initialization, lazy load default perform when user scroll window. if you use click event this will override default scroll to click event when you will click, images will be load.



<pre class="wp-block-preformatted">$(function() { $("img.lazy").lazyload({ event : "sporty" }); }); $(window).bind("load", function() { var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000); });</pre>



Effects



In default script they have just call&nbsp;<code>show()</code>&nbsp;function, this event you will be override by calling effect option.



<pre class="wp-block-preformatted">$("img.lazy").lazyload({ effect : "fadeIn" });</pre>



for more information and option please visit:&nbsp;<a href="https://web.archive.org/web/20170617031420/http://www.appelsiini.net/projects/lazyload">appelsiini jQeury lazy load</a>.



<h3 class="wp-block-heading">jQuery Unveil Js</h3>



jQuery Unveil lazy load have some options like as jQuery lazy load plugin. unveil lazy load have additional option for retina display, you can also load high definition images on retina display different form normal images.



In unveil jQuery plugin you will mention retina img by passing data-src-retina attribute to img tag.



you will initialize unveil script by calling



<pre class="wp-block-preformatted">$(document).ready(function() { $("img").unveil(); });</pre>



You can see the options available for unveil lazy load on:&nbsp;<a href="https://web.archive.org/web/20170617031420/http://luis-almeida.github.io/unveil/">Unveil Lazy Load images</a>.



<h3 class="wp-block-heading">jQuery Lazy Load XT</h3>



Initialization and alter attribute of img tag is the same as jQuery lazy load images plugin.



The&nbsp;most important and interesting part of jquery lazy load xt is, plugin not only limited to img tag, you will also use this jquery to lazy load your&nbsp;<code>&lt;</code>audio&gt;,&nbsp;<code>&lt;embed&gt;</code>,&nbsp;<code>&lt;frame&gt;</code>,&nbsp;<code>&lt;iframe&gt;</code>,&nbsp;<code>&lt;img&gt;</code>,&nbsp;<code>&lt;video&gt;</code>,&nbsp;<code>&lt;input&nbsp;type="image"&gt;</code>&nbsp;tags.



there is a lots of customization option available with animation effects would you like to add into your web page.



read more about jQuery lazy load XT on:&nbsp;<a href="https://web.archive.org/web/20170617031420/https://github.com/ressio/lazy-load-xt">Ressio&nbsp;@&nbsp;Github</a>

JavaScript

jQuery

Today I am&nbsp;in big trouble I want to take&nbsp;emergency backup from&nbsp;client-server to another server, this is not actual problem main problem is the size of data and its more than 50 GB and I don’t want or any one don’t want to download and upload huge&nbsp;data from server to&nbsp;local machine and again on server.



I have found one solution to copy data from one server to another without downloading any file you just need SSH access of both server.



I am going to explain you Linux&nbsp;SCP command to copy file from remote&nbsp;server to local machine or on another server.



scp&nbsp;copies files between hosts on a network. It uses&nbsp;ssh&nbsp;for data transfer, and uses the same authentication and provides the same security as&nbsp;ssh.&nbsp;scp&nbsp;will ask for passwords or passphrases if they are needed for authentication.



<pre class="wp-block-preformatted">[root@xxxxxxx public_html]# scp -r root@xxx.xxx.xx.xx:/home/userdirectory/public_html/upload/ .</pre>



<ol class="wp-block-list">
<li><code>scp -r</code> will copy your directory recursively.</li>



<li><code>root</code> is the username of old server.</li>



<li><code>xxx.xxx.xx.xx</code> this will be server IP address or you will also connect by using domain name.</li>



<li>After colon : you need to mention server static directory path which you need to copy.</li>



<li>Last . (dot) use for current directory of new server, if you want to use another directory you need to mention static path of server directory.</li>
</ol>



if you check the option for SCP command you will get



<pre class="wp-block-preformatted">-P port Specifies the port to connect to on the remote host. Note that this option is written with a capital 'P', because -p is already reserved for preserving the times and modes of the file in rcp(1). -p' Preserves modification times, access times, and modes from the original file. -q' Quiet mode: disables the progress meter as well as warning and diagnostic messages from ssh(1). -r' Recursively copy entire directories. Note that scp follows symbolic links encountered in the tree traversal. -S program Name of program to use for the encrypted connection. The program must understand ssh(1) options. -v' Verbose mode. Causes scp and ssh(1) to print debugging messages about their progress. This is helpful in debugging connection, authentication, and configuration problems. The scp utility exits 0 on success, and &gt;0 if an error occurs.</pre>



if you want to exclude some files to copy on new server Linux scp command is the best way for you, if you want to all file without excluding any file from server then we have easiest way more than this it’s WGET. Read more about WGET.

Linux

To list hidden files and directories in the current directory in most Unix-based systems (like Linux and macOS), you can use the following command in your terminal:



<pre class="wp-block-code"><code>&#91;root@example ~]# cd /var/www
&#91;root@example /var/www]# ls -lap | grep -v / | egrep "^."</code></pre>



If you want to list only hidden directory/folder then run:



<pre class="wp-block-code"><code>&#91;root@example ~]# cd /var/www
&#91;root@example /var/www]# ls -lap | egrep "^..*/$"</code></pre>



This option shows hidden files along with detailed information such as permissions, owner, file size, and modification date.

Command to List Hidden Directory And Files In Current Directory – linux

In this post I have mention the code for .htaccess file, this will help you to improve your page speed and SEO ranking.



The basic WordPress .htaccess file have basic URL rewriting rules



<pre class="wp-block-preformatted"># BEGIN WordPress
&lt;IfModule mod_rewrite.c&gt;
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
&lt;/IfModule&gt;
# END WordPress</pre>



Now we will start to optimize your wordpress site



Step 1: leverage browser caching



<pre class="wp-block-preformatted">## EXPIRES CACHING ##
&lt;IfModule mod_expires.c&gt;
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 text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
&lt;/IfModule&gt;
## EXPIRES CACHING ##</pre>



Step 2: Compress Your page content



<pre class="wp-block-preformatted">&lt;IfModule mod_gzip.c&gt;
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.*
&lt;/IfModule&gt;</pre>



Step 3: Compress Your HTML



<pre class="wp-block-preformatted">function sanitize_output($buffer) { $search = array( '/\&gt;[^\S ]+/s', // strip whitespaces after tags, except space '/[^\S ]+\', '&lt;', '\\1' ); $buffer = preg_replace($search, $replace, $buffer); return $buffer;
}
ob_start("sanitize_output");</pre>



add this code into your theme&nbsp;<code>index.php</code>&nbsp;file.



this will definitely help you to increase your page speed.

CodeIgniter, htaccess, index.php, mod rewrite rule, SEO, url rewrite rule

Copy directory and files from remote server to local machine – linux command SCP

Lazy Load Images Using jQuery

Recommended from Sharing Info

create-wildcard-sub-domain-from-your-hosting-panel-cpanel

codeigniter-htaccess-index-php-mod-rewrite-rule-seo-url-rewrite-rule

lazy-load-images-using-jquery

copy-directory-and-files-from-remote-server-to-local-machine-linux-command-scp

command-to-list-hidden-directory-and-files-in-current-directory-linux

wordpress-htaccess-file-seo-optimized