Chrome extensions for front-end optimization

Published on December 07, 2012

Chrome extensions for front-end optimization

    Installable and standard Google Chrome extensions for front-end optimization.

    Js switch

    Install here - chrome.google.com/webstore/detail/quick-javascript-switcher/geddoclleiomckbhadiaipdggiiccfje
    With this, in fact , everything is simple - when we want to see something without js - click on the button in the right corner and voila.
    Next lot will be cookies

    chrome.google.com/webstore/detail/edit-this-cookie/fngmhnnpilhplaeedifhccceomclgfbg?utm_source=chrome-ntp-icon Everything is also extremely simple and periodically usable. You can see, you can fix it if necessary.
    And if the previous 2 extensions are even less common, you forget about the following for some reason:

    PageSpeed

    Allows you to improve the performance of your application on the front-end side.
    developers.google.com/speed/docs/insights/using_chrome - here you can read and install this wonderful plugin.
    In a nutshell - press Ctrl + Shift + J - your console opens. After installation, an additional pagespeed icon will appear there. We go to the desired page, and click the Analyze button in the pagespeed menu. We are waiting for your page to reload and read tips on how to optimize. There are also great tips on reducing the size of images, and already processed options can be picked up via unique links, directly from the console.


    Speed ​​tracer

    Directly from Google ovens, still hot- chrome.google.com/webstore/detail/speed-tracer-by-google/ognampngfcbddbfemdapefohjiobgbdl .
    Install it - and see the green timer icon in the upper right corner. It's a bit confusing, but pretty simple to figure out. Click the icon while on the desired page. A window opens where recording has already begun. Then we return to the old window and reload the page there. We return to the window with the tracker and press the red circle, stopping the recording. Further in the menu there are 3 magnifying glass icons. +, -, <>. We click the last option - we have all the activity scaled. Voila, you can enjoy the loading schedule of your page - like who was loading (DOM, js, drawing a layout and so on). There is also an icon with a diagram at the top right - everything will be shown on a pie chart.

    From left to right, the icons of the corresponding extensions. To be recognizable.
    These were all installable and non-standard plugins - and what do we have in the box?
    Open the console and see the tab
    Network

    A wonderful tab that will tell you in a millisecond which element of the page how long it took you to load. We go to it and refresh the page. For example, you can clearly see how html is waiting for js to load if it is not added asynchronously, and also to track who is the weak link, which picture or script has been loaded longer than others, and so on.
    And one more standard module in the end:
    Profiles

    There, in the Google Chrome console, next to the Network tab. This module can collect statistics on js and css - and show the value in percent or in ms (click 2 times on any value in the column) of each downloadable part of css or js.