Magento load CSS and JS in footer

By some online tools(tools.pingdom.com or Gtmetrix.com) It’s suggested that either load JavaScript(JS) files in footer of the page or deferred so that they don’t block downloading of other assets of the page like images etc.

By default Magento load JavaScript and CSS files in header section. Magento footer block is not designed to load JS and CSS in footer of page.

Here is solution for this problem:

Step 1: Add new layout in page.xml

Create a block same as page/html_head with name “footerjscss” to the page.xml

Step 2: Add JS/CSS using xml layout:

Now you can add JavaScript(JS) and CSS files in pages using any of your XML files

Step 3: Create view file:

Create .phtml file in page/html/footerjscss.phtml and add following

In your page template files “1column.phtml”, “2columns-left.phtml”, “2columns-right.phtml”, “3columns.phtml” and etc. you will need to output this block before <body> tag:

If you want to improve/increase Magento speed or optimize Magento performance read this: Magento Optimization

Thanks!!!

  • Rahul Dadhich.

Protect WordPress with .htaccess | WordPress Optimization

WordPress is world’s most popular CMS, but with this growth, It also have some bad points. WordPress can be hacked easily, To get more security we can use some htaccess rules.

.htaccess is very common and most essential file. You can do lots of things by using .htaccess file.

Enable Browser Caching:

Browser caching allows users to speed up the loading time of websites by serve cached copy of design elements such as CSS stylesheets and media items such as images from users computer rather then website server.

To enabling browsing caching, you need to add this code to your .htaccess file:

GZIP Compression:

When visit webpage, request send to web server, if the server has gzip enable it receive gzip file which is significantly smaller and if it’s not enable it receive the page which is uncompressed version which may be bigger in size.

Gzip locates similar strings within a text file and replaces those strings temporarily to make the overall file size smaller. By gzip compressor reduce the size of page and style sheet by up to 70%

If your hosting provider has mod_gzip module enabled, the best way to compress your content is to add the following lines to your .htaccess file:

Enable gzip compression on Apache web-servers:

Enable compression on NGINX web-servers:

Keep Alive:

Display webpages in browser must request a file from web server, if file exists on web server browser gets the file and read the file. Then browser request other things like HTML, style sheets, JavaScript and images. If a new connection has to be open for every request or file it could take significantly longer time.

Keep alive also known as persistant connection that says “At a time you can get more more than just a single file”

Enable keep-alive in Apache:

Leverage browser caching:

Every time browser load web page it has to download all the web files like HTML, CSS, JavaScript, logo and images to properly display the page. Browser caching can help by storing some of these files locally in the user’s browser.

Browser caching is important is because it reduces the load on your web server, which ultimately reduces the load time of website.

Protecting wp-config.php:

Disable File Editing:

Protect WP-Includes:

If you are having problems implementing the above suggestion or beefing up the security, optimization of your WordPress installation, drop us an email. and we will gladly assist you.

Minify HTML content in Asp.net and MVC

If you have website in ASP.net MVC, here is good news for you. Now you can minify HTML content from just simple command line tool. Special thanks to Deanhume

Generally we use Google PageSpeed Insights to check website performance, as it provides tips to improve overall performance and page load time below are the image of that website.

Check website performance in this website
Check website performance in this website

We also use GTmetrix to check website performance it will provide almost every information which we have required to enhance our web application performance.

Check website performance in this website
Check website performance in this website

If you are Asp.net developer, So there are some options are available to minify your HTML content is the Asp.net HTML Minifier.

The Asp.net HTML Minifier is a simple command line tool that remove white spaces in your HTML. The great thing about this tool it is useful for Asp.net web-forms, Asp.net MVC Razor view and MVC web-forms and plain HTML files. You just provide the path of your website it simply minify all your content.

Just download HTML Minifier command line tool from here

After download this project along with source code extract that project and go to tool folder in that folder you can get HtmlMinifier.exe we can use this .exe in our visual studio so at the time of publish it will provide the minify version of HTML.

So lets start the implementation of HtmlMinifier.exe:

Step 1: Place this .exe file in our project solution, So you can excess this .exe file and every time when you publish you website so it will minify your content.

Step 2: Open solution explorer in visual studio and go to properties under this Publish Profiles is present open that file, below is an screen shot for your reference.

Solution Explorer in Visual Studio
Solution Explorer in Visual Studio

Open that file with extension of .pubxml and placed this code after property group.

Don’t forget to replace your htmlminifier.exe file path with your original file path.

pubxml file
pubxml file

That’s it you are ready to publish your profile, Save your pubxml file and publish your project so it will run htmlminifier.exe and only minify the HTML files that get deployed. If you see your output window, so it will look like this.

Minify Output window
Minify Output window

The secret to getting this to work is “CopyAllFilesToSingleFolderForPackage” step in the built.

If you have any query or suggestion, So i’ll be happy to help you.

KEEP CALM and READ ON!!!!.

Ankur Omar

.htaccees for Magento Performance Optimization

Magento is one of the most widely used eCommerce platforms today that people to choose to grown their online business. Optimizing the speed of your Magento allows customers to have the best user experience while shopping in your e-commerce store. In this post, you will get some tips to increase Magento speed and Magento performance optimization techniques.

Every e-commerce shop owner and users love the faster website. If website speed is slow user may leave a website and buy products from your competitors.
So you want to speed up your Magento store, here are some htaccess file tips:

Browser Caching & htaccess Configuration

Enable Output Compression
The apache mod_deflate module, which compresses text, CSS, and javascript before it is sent to the browser. This result lower file size.

Gzip Compression
This will compress stylesheet and web page before sending them to browser

Enable Expires Headers
To determine how long web page components cached in a browser cache. Web page static components like images, stylesheets.

Disable ETags
Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. ETags were added to provide a mechanism for validating entities that are more flexible than the last-modified date.

Mime Type Caching

 

Magento load JavaScript(JS) and CSS files in footer: http://blog.rahuldadhich.com/magento-load-css-js-footer/

Thanks.

  • Rahul Dadhich