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.  

Why Drupal 8 Performance is better than Drupal 7?

Drupal 8 comes with Symfony framework, a high performing PHP framework with code security. Drupal 8 is faster than Drupal 7, here we have some points that can prove who is faster version in Drupal. 

1. Drupal 8 now turned on dynamic caching.
2. Drupal 8 turned on 6 week page caching for anonymous users. This makes Drupal 8 serving    anonymous user very fast.
3. Even logged in users can Benefit from performance improvement.
4. Drupal 8 does not send JavaScript to all pages, unless you need to use it.
5. Only place where Drupal 8 is slow in cold caching, if user is the first visitor of website in Drupal 8, it will be slower than Drupal 7 but because of cache improvement next time visitor will hit the page, it will be faster in Drupal 8.
6. Drupal 8 uses breakpoint media queries, which saves extra efforts to make a website responsive but in Drupal 7 does not use breakpoint media queries and has a different approach to manage how the site appears on different devices screens.
7. Drupal 8 uses Twig as a template engine. Twig is part of Symfony 2 framework and PHP based compiled template engine, however Drupal 7 uses the PHP template as default template engine and users create the templates by PHP code.
8. Symfony framework makes Drupal 8 stronger than Drupal 7 to develop secure and robust website or web applications.
9. Drupal 7 does not have powerful framework to manage its codebase. Developers still use Drupal 7 but its lack of framework features makes it hard to manage code.


Note: Why Drupal 8 Performance is better than Drupal 7?