Optimize webpage speed | “Stay hungry, stay foolish.”

Optimize webpage speed:

Tools: Google Pagespeed Insight, Gtmetrix.com, Webpagetest.org, Image Analysis of Webpagetest.org
Tools mobile: Webpagetest.org, thinkwithgoogle

Strategy:

Using sprite CSS for all images
Optimize images using tool Tinypng.com
Eliminate render-blocking JavaScript in above-the-fold content
Use content_for custom JS in Rails
Optimize CSS Delivery
Example of inlining a small css file
Don’t inline large data URIs
Don’t inline CSS attributes
Add expires headers
onfigure 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;
  }

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.

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.

Use Webpack (Wepacker gem for Rails) to optimize both CSS, JS, ASSETS IMAGES.

Later will update the Strategy use webpacker

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: lighthouse
chrome-devtools

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.
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/
Optimize using WebP technique:

Some resources to start:

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.

Ref:

Tags: optimize webpage speed strategy