kieetnvt/Optimize webpage speed

## Optimize webpage speed
Optimize webpage speed:
- Tools: Google Pagespeed Insight, Gtmetrix.com, Webpagetest.org, Image Analysis of Webpagetest.org
- Tools mobile: Webpagetest.org, https://testmysite.thinkwithgoogle.com/

1. Using sprite CSS for all images

2. Optimize images using tool Tinypng.com

3. Eliminate render-blocking JavaScript in above-the-fold content
- Use content_for custom js in Rails

4. About CSS can be use
Optimize CSS Delivery
(
  Example of inlining a small css file
  Don't inline large data URIs
  Don’t inline CSS attributes https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
)

5. Add expires headers

- Configure the Expires header for Rails under nginx

----------
if ($request_uri ~* "\.(ico|css|js|gif|jpe?g|png)\?[0-9]+$") {
  expires max;
  break;
  }
----------
 location ^~ /assets/ {
  gzip_static on;
  expires max;
  add_header Cache-Control public;
  }
----------

6. How to set up nginx cookie free headers

----------

  When your website sets a cookie, the web browser sends this cookie when requesting static files like js, css and png. This increases network activity.

  Being cookie free means using a different domain or subdomain for serving files like images, stylesheets and Javascript.

  So you need to create a new virtual host file on Nginx with the same document root:

  server {
  listen 80;
  server_name static.example.com;
  root /var/www/example.com;

  fastcgi_hide_header Set-Cookie;
  }
  Create an A Record for static.example.com in the DNS section.

  Edit your website to make the css, js and image files use this subdomain in its URL.

6. [[Updated on 23 Jan 2019] Load Externals JS at the end of body:

- JS at <head> => need add defer attribute => this way will load JS and donot break the DOM loading.

- JS at the end of <body> => don't need add any attribute, DOM will load html then load JS, then excuted JS.

7. [Updated on 23 Jan 2019] Use Webpack (Wepacker gem for Rails) to optimize both CSS, JS, ASSETS IMAGES.

- Later will update the Strategy use webpacker

8. [Updated on 23 Jan 2019] Use google devtools to find CSS & JS un-use for Homepage (Need optimize the content loaded per page
must do keep content load minimum per page, this is a goal)

- the great tool : https://developers.google.com/web/tools/lighthouse/

- https://developers.google.com/web/tools/chrome-devtools/ui#command-menu

9. [Updated on 7 Jun 2019] Optimize with WebP, Font caching, Pre-loading third party JS, Browser caching

- Besides maybe changing the current fonts we also need to think about loading and caching of the font. Because some users see their default settings like Calibri, Arial etc.

  - https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

- Browser Caching (nginx) : https://developers.google.com/web/tools/lighthouse/audits/cache-policy

```
location ^~ /assets|packs-staging/ {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
  }
```

- Pre-loading thir party JS: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/

- WebP:

Some resources to start:
https://www.keycdn.com/support/optimus/configuration-to-deliver-webp
https://alexey.detr.us/en/posts/2018/2018-08-20-webp-nginx-with-fallback/

should to try to create a solution without creating every image in .webp format Otherwise we will get a lot more maintenance.
However, we still need a fallback if the browser does not support webp.

- [continue update]

----------

Docs:
https://developer.yahoo.com/performance/rules.html
http://effectif.com/articles/configure-the-expires-header-on-your-rails-site-with-nginx
http://www.agileweboperations.com/far-future-expires-headers-for-ruby-on-rails-with-nginx
https://www.digitalocean.com/community/questions/how-to-set-up-nginx-cookie-free-headers
https://gtmetrix.com/add-expires-headers.html
	Optimize webpage speed:
	- Tools: Google Pagespeed Insight, Gtmetrix.com, Webpagetest.org, Image Analysis of Webpagetest.org
	- Tools mobile: Webpagetest.org, https://testmysite.thinkwithgoogle.com/

	1. Using sprite CSS for all images

	2. Optimize images using tool Tinypng.com

	3. Eliminate render-blocking JavaScript in above-the-fold content
	- Use content_for custom js in Rails

	4. About CSS can be use
	Optimize CSS Delivery
	(
	Example of inlining a small css file
	Don't inline large data URIs
	Don’t inline CSS attributes https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
	)

	5. Add expires headers

	- Configure the Expires header for Rails under nginx

	----------
	if ($request_uri ~* "\.(ico\|css\|js\|gif\|jpe?g\|png)\?[0-9]+$") {
	expires max;
	break;
	}
	----------
	location ^~ /assets/ {
	gzip_static on;
	expires max;
	add_header Cache-Control public;
	}
	----------

	6. How to set up nginx cookie free headers

	----------

	When your website sets a cookie, the web browser sends this cookie when requesting static files like js, css and png. This increases network activity.

	Being cookie free means using a different domain or subdomain for serving files like images, stylesheets and Javascript.

	So you need to create a new virtual host file on Nginx with the same document root:

	server {
	listen 80;
	server_name static.example.com;
	root /var/www/example.com;

	fastcgi_hide_header Set-Cookie;
	}
	Create an A Record for static.example.com in the DNS section.

	Edit your website to make the css, js and image files use this subdomain in its URL.

	6. [[Updated on 23 Jan 2019] Load Externals JS at the end of body:

	- JS at <head> => need add defer attribute => this way will load JS and donot break the DOM loading.

	- JS at the end of <body> => don't need add any attribute, DOM will load html then load JS, then excuted JS.

	7. [Updated on 23 Jan 2019] Use Webpack (Wepacker gem for Rails) to optimize both CSS, JS, ASSETS IMAGES.

	- Later will update the Strategy use webpacker

	8. [Updated on 23 Jan 2019] Use google devtools to find CSS & JS un-use for Homepage (Need optimize the content loaded per page
	must do keep content load minimum per page, this is a goal)

	- the great tool : https://developers.google.com/web/tools/lighthouse/

	- https://developers.google.com/web/tools/chrome-devtools/ui#command-menu

	9. [Updated on 7 Jun 2019] Optimize with WebP, Font caching, Pre-loading third party JS, Browser caching

	- Besides maybe changing the current fonts we also need to think about loading and caching of the font. Because some users see their default settings like Calibri, Arial etc.

	- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

	- Browser Caching (nginx) : https://developers.google.com/web/tools/lighthouse/audits/cache-policy

	```
	location ^~ /assets\|packs-staging/ {
	gzip_static on;
	expires max;
	add_header Cache-Control public;
	}
	```

	- Pre-loading thir party JS: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/

	- WebP:

	Some resources to start:
	https://www.keycdn.com/support/optimus/configuration-to-deliver-webp
	https://alexey.detr.us/en/posts/2018/2018-08-20-webp-nginx-with-fallback/

	should to try to create a solution without creating every image in .webp format Otherwise we will get a lot more maintenance.
	However, we still need a fallback if the browser does not support webp.

	- [continue update]

	----------

	Docs:
	https://developer.yahoo.com/performance/rules.html
	http://effectif.com/articles/configure-the-expires-header-on-your-rails-site-with-nginx
	http://www.agileweboperations.com/far-future-expires-headers-for-ruby-on-rails-with-nginx
	https://www.digitalocean.com/community/questions/how-to-set-up-nginx-cookie-free-headers
	https://gtmetrix.com/add-expires-headers.html