Magento

minify css js offline

Minify css and js for Magento as a build process

How to improve page load speed without server overhead so you can serve more pages.

Need for a build?

Magento being written in php, an interpretive language, the need to build is not essential for deployment. Moreover, since many small store owners are not technical or do not have a full time technical team, solutions that just work inline are preferred. For example, using plugins for css and js minify, or transfer to CDN as and when needed inline, or even use Google’s excellent pagespeed plugin.
Unfortunately, each one of these inline steps though improve page load speeds, result in a ever-so-slight slow down of the server each time. On a high traffic site, this results in inconsistent performance and user experience. We even zip the static content in .gz files so the web server (nginx in our case) does not have to spend a few milliseconds each time – assuming ofcourse you do not have a CDN that can zip.

Grunt, the task builder

We have used Grunt ( http://gruntjs.com/) as a task builder. Grunt is a popular javascript task builder written in nodejs. We use grunt to do many release oriented activities – packaging a release, installing a release, minify css, js, etc. In this article – a first of a series we plan – we will go through the process of installation of grunt and offer a solution to minify js and css flles as well as optimize images in the skin directory.

Installing grunt

  • Install nodejs and npm
    curl -sL https://raw.githubusercontent.com/nodesource/distributions/master/rpm/setup_4.x | sudo bash -
    sudo yum install nodejs npm
  • Install grunt
    sudo npm install -g grunt-cli
  • Download our Gruntfile.js and related code
    mkdir /scripts
    cd /scripts
    git clone https://github.com/luroconnect/gruntformagento.git
    cp –r gruntformagento/src/* .

Run grunt to minify css and js (and more)


cd /scripts
grunt optimize
Typical output :
Running "copy:skin" (copy) task
Created 229 directories, copied 1769 files

Running "copy:js" (copy) task
Created 197 directories, copied 893 files

Running "uglify:skin" (uglify) task
>> 30 files created.

Running "uglify:js" (uglify) task
>> 301 files created.

Running "cssmin:skin" (cssmin) task
>> 149 files created. 2.34 MB ? 1.77 MB

Running "imagemin:skin" (imagemin) task
Minified 1412 images (saved 400.26 kB)

Running "compress:skinjs" (compress) task
>> Compressed 32 files.

Running "compress:skincss" (compress) task
>> Compressed 155 files.

Running "compress:js" (compress) task
>> Compressed 332 files.

Done, without errors.

What is done by optimize :

  • Create 2 directories skin.min and js.min initially with identical content as skin and js respectively
  • Run the minifyfor css and js on the skin.min and js.min directories. .min.js files are not minified.
  • Run image optimizer on skin (png,jpeg)
  • Generate .gz gzipped files – for static delivery of gzip. See note below on nginx configuration.

Update Magento Web URLs

Update the Magento unsecure and secure skin and js URLs to point to skin.min and js.min respectively where minified content is kept.

Update nginx configuration

nginx configuration to load .gz static content if it exists

#/* static content can have expiry set to long */
location ~* \.(jpg|jpeg|gif|png|css|js|ico|swf|woff|woff2|svg|TTF)$ {
gzip_static on;
#access_log off;
log_not_found off;
expires 360d;
}

Gzip_static on tells nginx to serve the .gz file of a static file it exists rather than nginx compressing it.

Run optimizer on images in media/wysiwyg

grunt media
copy optimized images from media.min/wysiwyg to media/wysiwyg manually

Conclusion

We firmly believe in creating a documented release process. And Grunt with our Gruntfile.js goes a long way in making this a reality. In this article we have introduced the minfication, image optimization and gzip compression of static files. Try it and let us know if you have any suggestions.

This script can be run directly on the live server, but make sure you do it at a low traffic time.

How to evaluate a hosting service for Magento?

Introduction

With so many choices in hosting service it is difficult to decide what to use for hosting of a production Magento server. The first question most commonly asked is – should one use a physical (or bare metal) server or a virtual machine (or cloud server)? Many people think the obvious answer is Virtual Machines. After all this is the way the world is thinking and all cannot be wrong. But, let us take a closer look for Magento hosting. Magento is typified by 2 factors – high CPU utilization for php interpretation and mysql performance limited by both CPU and disk writes typically for operations such as reindexing and high order volumes.
 
In this article we talk about these factors and how to help evaluate your preferred platform.

CPU speed

Most cloud service providers like AWS, Azure or Softlayer do not define what you get when you ask for say 2GHz CPU – do you get 100% of the power of the CPU or is the CPU shared?
Hypervisor technology used to create Virtual Machines, easily allows one to overcommit CPU. Overcommit means that the number of CPUs on a physical hardware can be lesser than the number of CPUs in all the VMs running on that server. Emperical studies such as here(https://www.datadoghq.com/the-top-5-ways-to-improve-your-aws-ec2-performance/) have proven that overcommit does happen.
 
This means that test results and live site performance are subject to current usage of your neighbours.
In addition, VMs need hypervisors to run beneath the VM – this adds to overhead as well as latency.
 
In a study by Forrester a case was made for using bare metal infrastructure, now that some leading cloud providers have made it easy to spin a new bare metal server.
 
On a physical or bare metal server, processor power, disk space, memory and other system resources are not shared with noisy neighbours so there is high correlation between test results and live performance.

Disk speed

High speed disks vs network access disks. A SSD or a 15K SAS for example can give the boost you need when upload products and reindex or you get many orders such as during a holiday season.

  • Unthrottled performance. When you buy guaranteed IOPs for example, what happens when you exceed the limit? What if you have a burst need that exceeds the provisioned IOPs?
  • Use a locally attached SSD where available vs a network storage. Local storage will be faster than network storage by orders of magnitude.
  • Consider RAID configurations for better performance

Here is some raw disk performance metrics1 we got when testing some popular hosting providers

Provider	Softlayer  Softlayer  Softlayer	Azure	Azure   AWS  Ukfast    DO
Type		Physical   Physical   VM	VM-D2V2	VM-D2V2 EC2  Physical  VM
Disk		Magnetic   SSD	      Local	Default	Blob    EBS  SSD       Default
unbufferred 	144	   451	      200	20.6	65      57   130       150
bufferred 	155	   602	      217	1000	65      263  1500      300

Notes

  • All data in MB/sec reported by the linux dd command/li>
  • Unbuffered dd if=/dev/zero of=/tmp/test bs=256M count=4 oflag=dsync
  • bufferred dd if=/dev/zero of=/tmp/test bs=256M count=4
  • Digital Ocean performance varied in a wide range 55 MB/s to 150MB/s

This simple test shows relative disk performance on various platforms without a RAID configuration.
(Refer Roman’s wiki)

Which hosting service is preferred?

  • Physical (or bare metal) servers give the best “performance” of Magento production hosting. The key reason is that they scale in a predictable way when traffic peaks.
  • You can scale horizontally with cloud servers – many hosting providers now give the option to mix VMs and bare metal on the same subnet. >We prefer such vendors.
  • Not all VMs and servers are made equal – test before you commit.

Nginx as a load balancer for Magento

Introduction

During seasonal peaks or as traffic grows, there will be a need to add multiple app servers to your Magento store. A load balancer for Magento becomes essential. We have found that using nginx as a load balancer gives acceptable performance. We have not found many instances where we would recommend a hardware load balancer. Recent tests by nginx confirms this.

We would recommend a different load balancer only for additional features such as autoscaling.

Nginx as a load balancer offers many advantages including

  • uneven upsream servers as nginx can assign weights to each load balancer
  • self healing – takes a upstream server out of a cluster if it stops responding
  • path based load balancing
  • combination of path based and weight based load balancing
  • php upstream servers
  • SSL/TLS termination

This article assumes the process of adding a new app server to a Magento cluster is well understood. Here the focus is on the nginx configuration.

Load Balancer for Magento : Basic architecture

(more…)

Nginx or Apache : Best server for Magento

Introduction

Apache server has been for years been the default http server linux hosts use. However, recently there have been many newer “lighter” http servers. This blog article focuses on Magento hosting. Magento is a php based web eCommerce framework. Nginx requires php-fpm to process php requests. So, this comparison is really apache vs nginx + php-fpm. Apache offers MPM (Multi-Processing Module) configurations pre-fork, worker and event. In this discussion we will use the “event” MPM.
This discussion is very popular. Examples include this. We focus on Magento here.

Key Differences between apache and nginx

There are some differences architecturally that make nginx look slightly better for Magento hosting.
(more…)

Secure access to a Magento server

Today the biggest threat to your Magento production server are external threats – of being hacked. While you may not be a high value target, hackers run crawlers on the internet to discover servers with weak security and attack. In this article we discuss secure access to a Magento server. An OS level attack if successful can only be fully repelled by re-imaging the server. But preventing a OS level attack is easier than you think – if you follow some simple guidelines.

A Magento production server should have restricted access for all. Insecure, password based access should be disabled. If more than one server is used in a constellation, ssh access to the setup should be restricted to only one server.
(more…)

Will HTTP/2 help my Magento Store?

Introduction

HTTP/2 is the new http standard. Most browsers, including Chrome, Opera, Firefox, Internet Explorer 11, Safari, Amazon Silk and Microsoft Edge support HTTP/2. Nginx and other web servers too support HTTP/2. Magento 1.x and Magento 2 work very well with HTTP/2. In this article we see the benefit of HTTP/2 and give some configuration recommendations for Magento store owners or administrators.

What are key differences of HTTP/2 ?

At a high level, HTTP/2:

  • is binary, instead of textual
  • is fully multiplexed, instead of ordered and blocking
  • can therefore use one connection for parallelism
  • uses header compression to reduce overhead
  • allows servers to “push” responses proactively into client caches (more…)