Download pdf - How to Optimize the Speed of Odoo · Speed Optimisation & Odoo Nowadays the number of eCommerce websites that are built with the Odoo Platform is ever on the rise. Speed factor of

www.emiprotechnologies.com#OdooExperience2018

How to Optimize the Speed of Odoo eCommerce/Website up to Maximum Level?Hiren Vora | Odoo eCommerce Consultant

Nothing is more frustrating than a slow Website. Slower

websites always degrade the user experience!

● Page Loading Time of your Odoo Website is

probably the most important factor for Google when

it comes to Search Engine Rankings!

● Since December 2017, the Google search engine

has started ranking also based on mobile versions

of pages, even for desktop searches. The goal of

this decision is to protect users from the websites

that have low performance and aren’t responsive to

all devices.

A one-second delay in page load time yields

● 11% fewer page views

● 16% decrease in customer satisfaction

● 7% loss in conversions

In fact, 47% of consumers expect websites to load in two seconds or less — & 40% will abandon a page that takes three or more seconds.

Slow speed = Kill conversions.

Speed Optimisation & Odoo

Nowadays the number of eCommerce websites that are built with the Odoo

Platform is ever on the rise. Speed factor of your website affects your traffic,

page views, conversions, sales and thus your overall online reputation.

If you are having your Website built in Odoo, How can you make it faster?

Let’s see...

Choose Your Web Server Carefully

Use NGINX as an Web Server for your Odoo Website!

● Designed for High Concurrency

● Load Balancing

● Zero downtime

● GZIP compression

● Serve static content much faster than Apache

● Caching

● Reverse Proxy

Always Prefer NGINX over Apache

Apache is like Microsoft Word, it has a million options but

you only need 10. Nginx does those 10 things, and it does

8 of them 50 times faster than Apache.

Nginx Web Server Set Up for Odoo Website

● Compress data(Gzip)

● Keep-alive

● Load Balancing

● Enable cache for static files

● Add Expires Headers

Compress Data (Gzip)

Keep-alive in NGINX

HTTP keep-alive is an instruction that allows a single TCP connection to

remain open for multiple HTTP requests/responses. By default, HTTP

connections close after each request. When someone visits your site, their

browser needs to create new connections to request each of the files that

make up your web pages (e.g. images, Javascript, and CSS stylesheets), a

process that can lead to high page load times.

Load Balancing in NGINX

Use NGINX as a very efficient HTTP load balancer to distribute your Odoo

Website's traffic to several application servers for improving performance,

scalability, and reliability of your Odoo Website & eCommerce with NGINX.

Load Balancing in NGINX

Enable Cache for Static Files in NGINX

When caching is enabled, NGINX saves responses in a disk cache and

uses them to respond to clients without having to proxy requests to Odoo

Application Server for the same content every time.

Enable Expires Headers Setting in NGINX

Expires headers tell the browser whether they should request a specific file

from your Odoo server or whether they should grab it from the browser’s

own cache.The whole idea behind Expires Headers is to reduce the

number of times a file is downloaded from a server and allow the browser

to utilize a previous version of a file that is already saved on your machine.

Doing this reduces the number of HTTP requests for the server.

Reduce Page render time Qweb → Html

Direct load the static html without let Odoo rendering your Qweb template to

Html. This technique will work only for the Static Pages of your Website.

Lazy Load the Images in your Static Pages

Implement Image Sprites in CSS

Rather than include each image as a separate image file, it is much more

memory- & bandwidth-friendly to send them as a single image, so the

number of HTTP requests is reduced.

Ref : https://www.emiprotechnologies.com/magento/online-jewellery-store

https://www.emiprotechnologies.com/magento/online-jewellery-store

Move Scripts to the Bottom!

● Load External JS files at the end of the Page.

Web pages will be displayed to users first, then load javascript, the pages render

much faster. But it depends on your application, not all the javascripts can be put

at the bottom, be careful!

● Always Load your all Internal as well as third party JS files

asynchronously by Defer Attribute

Asynchronous Image Loading with JS

This is a technique developed by Emipro in Odoo to smartly display

the small size of images of your Website first while the original

image is being lazy loaded until entire page loading is not

completed.

When entire page load finishes, do a soft transition in the

placeholder to the original Image. You will feel like the blurry images

being changed by their respective originals.

Asynchronous Image Loading with JS

This technique is very effective to speed up Category Page in Odoo

eCommerce.

We have seen unbelievable result in Speed

Improvisation through this solution!

Reduce the number of Third Party Plugins

● The more plugins are installed, the more resources are needed

to run them.

● Not only does the website speed depend on the number of

installed plugins but also on their quality.

● Try to avoid plugins that load a lot of scripts and styles .

● The best solution is to keep only the necessary ones and ensure

that they are kept up to date.

Use Content Delivery Network for High Traffic

CDN is a collection of web servers distributed across multiple locations so

content can be more efficiently delivered to users. CDNs are typically used

for static content or files that do need to be touched once uploaded.

● Amazon CloudFront

● Cloudflare

● Keycdn

● CDN77

https://aws.amazon.com/cloudfront/?sc_channel=PS&sc_campaign=acquisition_IN&sc_publisher=google&sc_medium=cloudfront_nb&sc_content=cdn_companies_e&sc_detail=cdn%20providers&sc_category=cloudfront&sc_segment=111916800061&sc_matchtype=e&sc_country=IN&s_kwcid=AL!4422!3!111916800061!e!!g!!cdn%20providers&ef_id=WdtSRwAAAF3QDRyY:20180927111957:s

https://www.cloudflare.com/

https://www.keycdn.com/

https://www.cdn77.com/

What is CDN?

CDN Selection

Make sure that while choosing the right CDN Provider for your Odoo

Website, it has server available in your region too! For example, in

your website, do you have a large customer base / high traffic

coming from China? Then a CDN provider should have their server

options inside some China – specific regions.

General Instructions for Speed Up Website

● Always show Images the resolution that exact

fits into your Webpage’s Division Size

For example, your Division’s size is 500 * 500 and you are using

image of 2000 * 2000 resolution into it.


● Use conditional statements to only load what's needed

If you find that you only need to load certain images on Desktop

or need to run a specific script on Mobile only, using conditional

statements to load them can be a great way to increase speed.

This way, you aren’t forcing the browser to load a variety of

scripts or images that won’t be useful for certain devices or

viewports


● Don’t load extra/unnecessary fonts in your Webpage.


● Don’t load the images in base64 data format at your Webpage.

If you do the base64 encoding from the source files with each

request, you'll be using up more CPU, thrashing your data

caches, etc, which might hurt your servers response time.


● Don’t load the images in base64 data format at your Webpage.

Overall page size will be increased so your request's TTFB time

will be increased too.

The browser can't store that kind of images in the cache. So

every time when the request will be sent from your browser,

server will take the extra load.


● Uninstall web modules from Odoo Instance which are not in use for the time being.

For example, you are not going to use the blog app at your

website for time being so you are just hiding the menu of Blog

from the header in your website. It means that Odoo will still

include JS & CSS files in your website even though you have no

need at that moment. That can increase the file size of the

response from the Odoo server to the browser.


● Don’t prefer much in-line or internal CSS in your Web Page.Your external CSS file will be cached on the browser side. So

you will contribute a little on internet traffic by not loading some

kbs of data every time a the page is refreshed or user navigates

your site. Whereas in case of in-line CSS too much duplicate

style will be used and hence file size will be larger.


● Prefer to use t-call-assets attribute in your Qweb views to call

your custom external scripts and css files. By doing so, no of

requests will be reduced as well as scripts and css will be

minified and combined into one single file.

Use Performance Evaluation Tools

● Google PageSpeed Insights

● Pingdom

● Yslow

● GTmetrix

● Performance Budget Calculator

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

https://tools.pingdom.com/

http://yslow.org/

https://gtmetrix.com/

http://www.performancebudget.io/

Solution for future in Odoo V12

● Separate Views for Mobile & Desktop Devices in Odoo

In Mobile device some of the designs may not be necessary to

show. Rather then hide them by media query why shouldn’t we

prevent to load them on Mobile Device?

Our Odoo Website Services

● Odoo Website Speed Optimisation

● Odoo Business & eCommerce Themes

● Odoo eCommerce Customisations

● Custom Odoo Website Development

● Mobile Responsive Beautiful Odoo CMS Pages

● Migration from other eCommerce to Odoo

● Graphics Designing Services

● Digital Marketing & SEO