How to use breakpoints in drupal 8?

There we have simple way to use breakpoints means separate media query in drupal 8 and that will also help in speed up or optimize the website.
We have some following points, that will easily clear your doubts about breakpoints and separate media query.
1. We will create a file with the name of 'yourthemeORmoduleName.breakpoints.yml', Example for theme like your theme name is 'bartik' the file name will be 'bartik.breakpoints.yml'.
2. This breakpoints file will be use for write the code of media query for responsiveness. This file will be located in 'themes/bartik/' root.
Example:
bartik.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x    
bartik.small:
  label: small
  mediaQuery: "(min-width: 0px)"
  weight: 1
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.medium:
  label: medium
  mediaQuery: "(min-width: 768px)"
  weight: 2
  multipliers:
    - 1x
    - 1.5x
    - 2x
bartik.large:
  label: large
  mediaQuery: "(min-width: 1024px)"
  weight: 3
  multipliers:
    - 1x
    - 1.5x
    - 2x
Here the breakpoint properties are:
    Very first we will take a unique breakpoint name like: bartik.small:      (moduleName/themeName.unique breakpointName),
    Example: bartik.small: ,bartik.medium: ,bartik.large: ,bartik.wide: ,bartik.narrow: ,bartik.mobile:
   
    label - The human readable name of the breakpoint
    mediaQuery - a valid @media query(for responsiveness)
    weight - where the breakpoint is ordered in relation to other breakpoints
    multiplier - the ratio between the physical pixel size of the active device and the device-independent pixel size
               - 1x
               - 1.5x // supports Android
               - 2x  // supports Mac retina display
              
3. After that we will create new library and attach this breakpoints in 'bartik.libraries.yml' file.
Syntax:
libraryName:
  version: 1.0
  css:
    theme:
      css/desktop-small.css: { media: all and (min-width: 851px) }
      css/mobile.css: { media: only screen and (max-width: 767px) }
      css/mobile-common.css: { media: all and (min-width: 560px) and (max-width: 850px) }
     
    Same like we can create many viewports / breakpoints / media queries and attach with libraries and templates of our website.

4. Now this specific library we will render on template where we want to apply.
Example: {{ attach_library('mythemeName/libraryName') }}   

So in this way we can optimize the site and increase the performance with the help of breakpoints because with the help of this only in case of Mobile or Tab or Ipad or Desktop specific mentioned css will be rendered else not.
And the most important thing is clear the Cache and run Cron.

Note: If have any suggestions or issue regarding 'How to use breakpoints in drupal 8?' then you can ask by comments.  

Programmatically add canonical, shortlink, viewport and robots in site header.

For add Programmatically, first we will work on .theme file, we will create alter attachments in .theme file like 'theme_name_page_attachments_alter(array &$page).
Code for add 'viewport' in html head is..
<?php
function theme name/module name_page_attachments_alter(array &$page) {
    $viewport = [
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => [
        'name' => 'viewport',
        'content' => 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no',
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport, 'viewport'];

global $base_url;
$current_page = \Drupal::request()->getpathInfo();   
$canon_url = $base_url.''.$current_page;  
  
Code for add 'canonical' in html head is..
    $viewport_canonical = [
      '#type' => 'html_tag',
      '#tag' => 'link',
      '#attributes' => [
        'rel' => 'canonical',
        'href' => $canon_url,
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport_canonical, 'canonical'];   

Code for add 'shortlink' in html head is..
    $viewport_shortlink = [
      '#type' => 'html_tag',
      '#tag' => 'link',
      '#attributes' => [
        'rel' => 'shortlink',
        'href' => $canon_url,
      ],
    ];
    $page['#attached']['html_head'][] = [$viewport_shortlink, 'shortlink'];       
       

For add robots programmatically on site header, we have to work on 'theme_name_preprocess_html(&$variables).
Code for add 'robots' in html head is..
    $noindex = [
        '#tag' => 'meta',
        '#attributes' => [
            'name' => 'robots',
            'content' => 'noindex, nofollow',
        ],
    ];
    $variables['page']['#attached']['html_head'][] = [$noindex, 'noindex'];     

?>

Note: If have any suggestions or issue regarding 'Programmatically add canonical, shortlink, viewport and robots in site header.' then you can ask by comments.