Mangento Perofrmnace Optimization

Andrey Korolyov

Magento Performance Optimization

MavenEcommerce

Good example

• Demo: http://demo.mavenecommerce.com• WIFI :

– HTML download 258ms– DOMContentLoaded 456ms– Load 547ms

• Throttling 3G:– HTML download 350ms– DOMContentLoaded 1820ms– Load 7290ms

MavenEcommerce

http://demo.mavenecommerce.com/

What does performance means?

• Websites loading longer than 1.5 seconds are ranked as “slow”, have poor SEO and low AdWords Page Quality (Google)

MavenEcommerce



• Every additional 0.5 second load time decreases traffic by 5-20% (Yahoo and Google)

MavenEcommerce




• Page load time decrease from 7 to 2 seconds alone raises revenue by 10% (Shopzilla)

MavenEcommerce




• Every additional 1/10th of a second page load time decreases sales by 1% (Amazon)

MavenEcommerce




• A page that takes 5 seconds or more to load loses 20% of visitors (Forrester)

MavenEcommerce




• 80% of visitors won’t come back if the site is slow (75% in 2013, 64% in 2006)

MavenEcommerce



• 80% of visitors won’t come back if the site is slow (75% in 2013, 64% in 2006)

• 70% of revenue comes from the fastest visits

MavenEcommerce

Performance budget

There is not difference for the user between a site is being down and site is being inaccessible due to loading issues caused by blocking resource or slow network.

- Andy Hume

MavenEcommerce

Mobile is slow by default

• Latency is the time between when a browser request a resource from a server and when it starts to receive the server’s response.

MavenEcommerce



• On mobile, latecny is a major UX killer. For a 1.7Mb page with 90 request per page, it’s 3s+.

MavenEcommerce



• On mobile, latecny is a major UX killer. For a 1.7Mb page with 90 request per page, it’s 3s+.

• Javascript is expensive; it takes time and power to download, parse and execute JavaScript.

MavenEcommerce

MavenEcommerce

Performance matters

• If as site responds within 1s, experience feels instant. If it takes 2.5s+, people start falling off.

• Bad performance results in bad business, especially on eCommerce websites.

• Performance is invisible; it’s difficult to argue about how fast a website “feels”,

MavenEcommerce

What we may optimize?

• Time to First Byte• DomContentReady• Load

MavenEcommerce

Time to first byte

• Nginx

• PHP-FPM

• Memcache / APC / Zend Opcache / Redis

• Varnish?!

MavenEcommerce

Do you think that you need Varnish?

• One server may handle 100 nginx processes

• 1 nginx process creates 1 php-fpm process

• 1 php-fpm process creates 1 mysql connection

• Memory out!

MavenEcommerce

How many vistors do you have?

• One php-fpm process is one visitor.

• One visitor takes 2s to get a HTML page.

• Your server may handle 50 visitors at one moment of time.

MavenEcommerce

How many vistors do you have?

• 100 visitor in 2 seconds

• 3 000 visitors in 1 minute

• 180 000 visitors in 1 hour!

MavenEcommerce

“Core HTML content first” with “Core CSS styles first” is a simple eorollary of the good ol’progressive enhancement.

- Andy Hume

MavenEcommerce

The site‘s modular load

• Consider at least three types of page content:

MavenEcommerce


• Consider at least three types of page content:– Core Content (essential HTML+CSS, usable non-Js enhanced experience)

MavenEcommerce



– Enhancement (JS, Geolocations, touch, enhanced CSS, webfonts, wedigets)

MavenEcommerce




– Leftovers (analytics, advertising, third-party content)

MavenEcommerce




– Leftovers (analytics, advertising, third-party content)

• Idea: load Core content first, then Enhancement on DomContentReady, then Leftovers on Load.

MavenEcommerce

Libraries

• jQuery• PrototypeJs• RequireJs• loadCSS• Gulp builder

MavenEcommerce

RequireJs

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use.

MavenEcommerce

LoadCSS

A function for loading CSS asynchronously.

MavenEcommerce

Tools

• http://www.webpagetest.org/• http://gtmetrix.com/• https

://developers.google.com/speed/pagespeed/insights/

MavenEcommerce

http://www.webpagetest.org/

http://www.webpagetest.org/

http://gtmetrix.com/

https://developers.google.com/speed/pagespeed/insights/



Cherry on a cake

PageSpeed speeds up your site and reduces page load time. This open-source webserver module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow.

MavenEcommerce

Andrey Korolyov, Managing director of MavenEcommerce Inc.

If you have a questions please contact with us or ask it now!

Follow us on twitter: @mavenecommerce

MavenEcommerce

About author

Mangento Perofrmnace Optimization

Software

Transcript of Mangento Perofrmnace Optimization