Pankaj Pawar

Remove index.php from url using .htaccess file in codeIgniter

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

cpanel

domain

sub-domain

subdomain

wildcard

WordPress

DevOps

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.

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

Lazy Load Images Using jQuery

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.

Linux

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

Here we have talking about a vary small part of website, But it’s most important in your social or online presence.



All search engines have there own Crawlers, Crawler or Search Engine Robots it’s automated script which is grab data from your website and show it too user. When users are try to find or search relevant data which you have published on your website, they have find your website name in a search result with your published data.



Now this is the most important part, which part you want to show when users are searching over internet.



Crawler first fetch the information from robots.txt then crawler go to crawl sitemap. In Sitemap your all website links are stored which you are decided to indexed with search engine.



But what crawler do with other sensitive directory and links which is available on your server?



Crawler is a script, it doesn’t know which is your sensitive data or which is not. Script will do work as they design for.



You need to block your important directory or links from crawler to stop crawling important data.



Here is one example of robots.txt to prevent to Crawl important directory of WordPress and some part of important data or scrap data which you don’t want to publish over internet.



<pre class="wp-block-preformatted"># Below mention disallow paths are important to block from search engines
User-Agent: *
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /archives/
disallow: /*?*
Disallow: *?replytocom
Disallow: /comments/feed/
Disallow: /readme.html
Disallow: /xmlrpc.php
# If you don't have load any css js from wp-content/plugin you will also include
Disallow: /wp-content/plugins/
User-agent: Mediapartners-Google*
Allow: /
User-agent: Googlebot-Image
Allow: /wp-content/uploads/
User-agent: Adsbot-Google
Allow: /
User-agent: Googlebot-Mobile
Allow: /
Sitemap: http://www.kevinmuldoon.com/sitemap.xml
Sitemap: http://www.kevinmuldoon.com/post-sitemap.xml
Sitemap: http://www.kevinmuldoon.com/page-sitemap.xml
Sitemap: http://www.kevinmuldoon.com/category-sitemap.xml
Sitemap: http://www.kevinmuldoon.com/author-sitemap.xml</pre>

Optimize your WordPress by upgrading robots.txt

<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>

Create Wildcard Sub-domain from your hosting panel / cPanel

In most of MySQL&nbsp;task we need to find and replace text with another one maybe that will be&nbsp;URL or any string in your database. You will use mysql find and replace&nbsp;query while you are going to move websites from one domain to another domain or when you want to replace specific&nbsp;text with another one.



Here I am going to mention MySQL find and replace query to replace text in single table.



<pre class="wp-block-preformatted">UPDATE `table_name` SET `table_column_name` = replace(same_table_column_name, 'unwanted_text', 'wanted_text')</pre>



If you want to find and replace string in MySQL&nbsp;database, i will suggest you to download and use Notepad++ or your fav. editor to find and replace string this would be a better than running query.



Note: Before running find and replace query take a backup of your database.

Create Wildcard Sub-domain from your hosting panel / cPanel

Why we need wildcard sub-domain and what is the wildcard sub-domain?

To create wildcard sub-domain following the steps:

Video demonstration of how to create wildcard sub-domain:

Remove index.php from url using .htaccess file in codeIgniter

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

Recommended from Sharing Info

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

lazy-load-images-using-jquery

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

optimize-your-wordpress-by-upgrading-robots-txt

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

mysql-find-and-replace-text-in-the-entire-table