Performance: Improve page rendering to 1sec

[pftg]

Ref: https://developers.google.com/web/tools/lighthouse/audits/first-interactive

[pftg]

@andriyParashchuk could you produce list of changes which we should do in order to achieve this? Some examples:

1. https://cl.ly/3G421b3I2w2O/Image%202018-04-17%20at%2016.09.34.public.png
2. https://cl.ly/280P1Z3I0K3Z/Image%202018-04-17%20at%2016.11.17.public.png

[andriyParashchuk]

• CSS rules
  Remove unused rules from stylesheets to reduce unnecessary bytes consumed by network activity.
  
  Learn more

• Prioritize visible content
  If the amount of data required exceeds the initial congestion window (typically 14.6kB compressed), it will require additional round trips between your server and the user’s browser. For users on networks with high latencies such as mobile networks this can cause significant delays to page loading.
  
  To make pages load faster, limit the size of the data (HTML markup, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. There are several ways to do this:

1. Structure your HTML to load the critical, above-the-fold content first
2. Reduce the amount of data used by your resources

• Offscreen images
  Offscreen images are images that appear below the fold. Since users can't see offscreen images when they load a page, there's no reason to download the offscreen images as part of the initial page load. In other words, deferring the load of offscreen images can speed up page load time and time to interactive.
  Recomendation: Consider lazy-loading offscreen images to improve page load speed and time to interactive. For more details see: Lazy loading Images and Video.

• Serve images in next-gen formats
  JPEG 2000, JPEG XR, and WebP are image formats that have superior compression and quality characteristics compared to their older JPEG and PNG counterparts. Encoding your images in these formats rather than JPEG or PNG means that they will load faster and consume less cellular data.
  WebP is supported in Chrome and Opera and provides better lossy and lossless compression for images on the web. See A New Image Format For The Web for more on WebP.
  

• JavaScript boot-up time is too high
  Check this out:
  JavaScript Start-up Optimization
  Loading Third-Party JavaScript
  

• Enable compression
  All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages. See text compression with GZIP to learn more.
  

• Eliminating Unnecessary Downloads
  Inventory your own assets and third-party assets on your pages.
  Measure the performance of each asset: its value and its technical performance.
  Determine if the resources are providing sufficient value.
  Eliminate it if it needed.

• Critical Request Chains
  The Critical Request Chain is a concept from the Critical Rendering Path (CRP) optimization strategy. CRP enables the browser to load a page as quickly as possible by prioritizing which resources get loaded and the order in which they load.
  

[pftg]

Will be great to compare our structure with https://github.com/jetthoughts/jetthoughts.github.io/issues/281

[pftg]

• Move GA to head
• Delete hotjar https://dzwonsemrish7.cloudfront.net/items/1d1B3Y1A271q150e3Z0g/Image%202018-04-26%20at%2015.43.36.public.png

[pftg]

• https://cl.ly/3e0w410l3B0T/Image%202018-04-28%20at%2017.08.16.public.png

[pftg]

Reached goal, need to split left part and schedule it on later

[pftg]

@obliviusm please close this after you have verified all issues and move not fixed one into new one

[obliviusm]

ok. @sweatC is doing this

[sweatC]

This issue is closed because of following our Roadmap.
A list of tasks moved into https://github.com/jetthoughts/jetthoughts.github.io/issues/302 and plan to be done in the next iteration.