[Bootstrap] 3. Optimize Site Resources, complete response images, and enable the conveyor belt to support gestures,

[Bootstrap] 3. Optimize Site Resources, complete response images, and enable the conveyor belt to support gestures,

A. Optimize Site Resources

Speed is important. Users are very concerned. Our site must be loaded fast enough, or the user will leave. SEO is also very important. Our site must be loaded fast enough, and the search rank of others will drop.

Now, let's take a look at [Bootstrap] 2. The resources in the work presentation site. Specifically, let's take a look at the file size, which is an important factor that can be controlled and affect the page speed, including images, CSS and JavaScript files. In just a few steps, we can "slim down" these files to shorten the loading time.

 

A.1 Optimized images

These images are optimized to some extent through Photoshop's "Save As Web format. However, the size of each image is 719 KB.

These works are very important. (Compared to my work sites .) However, these individuals are indeed larger. More effective compression can reduce the file size.

To reduce the file size without compromising the image quality, you can use some tools, such as Yahoo! Smushit: http://www.smushit.com/(seemingly inaccessible in China)

For Mac users, the free ImageOptim application (https://imageoptim.com/mac) can do the same. This application reduces the overall size by 50.2 KB.

 

A.2 optimize CSS

First, let's take a look at the size of the file for the optimized style table main.css:

134 KB! No responsible developer will bring such a small website with such a large style sheet.

For good news, we can easily cut this by half. Using Bootstrap's modular LESS solution, you can immediately reduce CSS by taking the following steps:

(1) develop less/_ main. less;

(2) Comment out unnecessary LESS files, such:

//@import "bootstrap/glyphicons.less";...//@import "bootstrap/dropdowns.less";//@import "bootstrap/button-groups.less";//@import "bootstrap/input-groups.less";...//@import "bootstrap/breadcrumbs.less";//@import "bootstrap/pagination.less";//@import "bootstrap/pager.less";//@import "bootstrap/labels.less";//@import "bootstrap/badges.less";//@import "bootstrap/jumbotron.less";//@import "bootstrap/thumbnails.less";//@import "bootstrap/alerts.less";//@import "bootstrap/progress-bars.less";//@import "bootstrap/media.less";//@import "bootstrap/list-group.less";//@import "bootstrap/panels.less";//@import "bootstrap/responsive-embed.less";//@import "bootstrap/wells.less";//@import "bootstrap/close.less";...//@import "bootstrap/modals.less";//@import "bootstrap/tooltip.less";//@import "bootstrap/popovers.less";

(3) Be careful. Otherwise, the necessary files may be commented out. It takes some time to re-compile and perform a comprehensive test.

(4) Comment out unnecessary files, select the minimal (or compressed output) option in the compiler, and re-compile the file to save the question css/main.css.

(5) Check the size of the file. The result here is 91KB. Reduced by 43KB.

Of course, you can also refine it. For example, you can open each retained LESS file and comment out a line of unnecessary code.

Finally, let's take a look at how to optimize JavaScript.

 

A.3 optimize JavaScript

To optimize JavaScript, we need to replace the Bootstrap plug-in the plugins. js file with only a few of the ones we use. Then, compress the file.

(1) Open js/plugins. js

(2) Delete the code block belonging to bootstrap. min. js

(3) Open the js/bootstrap folder and save the independent file of the Bootstrap plug-in. Open a series of files and copy their code to the plugins. js file. These three plug-ins are used on my website:

□Carousel. js

□Collapse. js

□Transition. js

(4) Save the ins. js file for "slimming" and refresh the browser.

□Make sure that the responsive navigation bar can be folded in a narrow view, and click the button to expand the drop-down list;

□Ensure that the conveyor belt is as usual.

If there is no problem, it means that baohang has the JavaScript required.

(5) The next step is to narrow down the (minify) or "ugly" (uglify) plugins. js file. The following online tools are recommended.

□Uglify JS: https://marijnhaverbeke.nl/uglifyjs

□Yui Compressor: http://refresh-sf.com/yui/

□Google Closure Compiler: http://closure-compiler.appspot.com

Open these online tools, copy the plugins. js code, run it, and copy the code back to plugins. js.

Uglify JS is selected here.

(6) Save the compressed file.

(7) Compare the size.

For ease of comparison, a backup is saved for all files:

□Plugins-all contains the complete bootstrap. min. js code;

□Plugins-uncompressed.js contains three plug-ins we need, uncompress;

□Plugins. js is the final file, which is scaled down and removed from the Space concatenation version.

The final file is only equivalent to 1/4 of the original one.

 

A.4 optimization results

Overall, our optimization work has been successful. Calculate the image, CSS, and JavaScript. The original size is 885 KB.

After optimization, it becomes 769 KB, saving 116 KB and exceeding 10%,

In fact, we can continue to optimize it, especially for small screen devices, by implementing responsive images.

 

B. implement responsive Images

If we adhere to the mobile-friendly development purpose, we need to choose a responsive image technology.

 

B .1 analysis work Conveyor Belt

In [Bootstrap] 2. In the Personal Work website of The Work presentation site, the images in the conveyor belt are designed for full width layout. The width is 1600px and the size is 135 ~ 189 KB. It is too much to send such a large image to a cell phone or non-Retina screen tablet. In the era of mobile prioritized responsive design, it is irresponsible to do so.

In addition, if you look at the display effect on a small screen, you may find that the images in the conveyor belt should be higher and narrower, because the vertical direction of the narrow screen is relatively larger.

In the cell phone screen that is so wide in the viewport, the picture we prepare for the big screen can be displayed, but if we can use more vertical space, the effect will be better. This can be seen through the following screen:

Good responsive image technology should allow us to provide appropriate images for small screens to meet the requirements of small files, fast loading, and improved design.

 

B .2 solution Selection

The author of this book recommends Picturefill technology. The Picturefill solution balances performance and design issues well, and is also quite simple.

PS: Related Articles: https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/ (this article is earlier, it is recommended to directly read the official documentation)

Picturefill:

(1) Prepare an ideal image for the target view;

(2) download and include the Picturefill JavaScript file;

(3) Use the Picturefill flag mode to introduce images.

As usual, there are two steps in the actual development process:

□Test;

□Adjust as needed.

Next we will do it step by step.

 

B .2.1 prepare a response Image

Special sizes and Optimized images have been prepared in the source code of this book. For convenience, we copy them directly to our img Folder:

Open this image and you will find that they are narrower and have a shorter aspect ratio. This is to make more use of vertical space in a narrow view like below:

Of course, the image is smaller, with 900px × 600px, which ensures that there are enough pixels in the Retina screen, but it is much smaller than the initial 1600px × 800px .. On average, these images are more than 50% smaller than the original ones.

After the image is ready, JavaScript will be available.

 

B .2.2 use JavaScript

Picturefill files and documents are on GitHub at: https://github.com/scottjehl/picturefill

You can take some time to read the document. We will use the recommended elements in the document later. Download the file, decompress it, find picturefill. min. js, and copy it to the plugins. js file.

Next, prepare tags according to the Picturefill conventions.

 

B .2.3 modify the tag Structure

In the html document, modify the tags of each image and use the picture element pattern of Picturefill. The label here uses a small image by default, except for browsers with 6 40 PX or above in the browser and IE8.

The mark of the first image after modification.

<picture>    <source srcset="img/okwu.jpg" media="(min-width:640px)" />    </picture> 

Then, modify the remaining image tags in sequence.

 

B .2.4 test and adjustment

Save and test. You will find that the conveyor belt image does not adapt to the screen width this time. This is because the Picturefill tag does not use the selector in the Bootstrap conveyor belt style.

Follow these steps to modify the selection character in the _ movie usel. less file to make the image fully available:

(1) Open _ usel. less

(2) Search for comments // Account for jankhangon images and replace the> img and> a> img sub-selector with the simple vertex descendant img selector, to select an image that is nested in the Picturefill Tag:

// Account for jankitude on images//> img,//> a > img,img { //added to apply to Picturefill responsive image solution  &:extend(.img-responsive);  line-height: 1;  min-width:100%; //added  height:auto; //added
  ...

The problem is solved in this way.

 

B .3 final result

When the port is smaller than PS, the conveyor belt should use smaller but relatively higher images.

Starting from this point, you can refer to the Picturefill document and adjust and adapt the version you need as needed.

 

C. Make the conveyor belt support gestures

In Touch screen devices, it is very practical to support gesture scanning to switch the conveyor belt image.

 

C1. what are the options? 

If you just want to give the conveyor belt a gesture, you only need one JavaScript plug-in and several lines of code. Justin Lazanowski wrote an article about three options for implementing the gesture interaction of Bootstrap 3 conveyor belt. Article address: http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

The jQuery plug-in TouchSwipe will be used here, and its GitHub address is: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

To use this plug-in, follow these steps to enable the conveyor belt to support the swipe gesture:

(1) include the TouchSwipe plug-in into our plug-in file;

(2) write several lines of calling code in the main. js file.

 

C.2 obtain and include the TouchSwipe plug-in

Download and decompress the file. Find the jquery. touchSwipe. min. js file and copy the code to plugins. js. In this way, the plug-in is in place. Next, you need to call it.

 

C.3 call TouchSwipe

You need to write a line of code, command TouchSwipe to listen to the light sweep event on the conveyor belt, and then convert it to the Bootstrap method call :. carousel ('prev') and. carousel ('Next '). For more information about these methods, see the Bootstrap documentation: http://getbootstrap.com/javascript/#carousel.

The following steps are simple:

 

(1) Open the main. js file in the project.

(2) Add the following code:

// Enable swiping... $ (". carousel-inner "). swipe ({swipe: function (event, direction, distance, duration, fingerCount, fingerData) {if (direction = "right ") {// drag to the right // Cycles to the next item. $ (this ). parent (). incluusel ("prev");} else if (direction = "left") {// drag left // Cycles to the previous item. $ (this ). parent (). carousel ("next ");}}});

(3) Save and refresh the image. You can use the left and right scans to switch between images. As follows:

 

Show effect address: http://ycdoit.com/show/bootstrap-code-02.html

Bootstrap practice PDF documentation and source code links: http://pan.baidu.com/s/1slPDoux