Website Optimize smaller static resources

Website optimization smaller static resources

smaller static resources (JS, CSS, PNG, GIF) mean less network transmission time. During construction, these static resources can be compressed and optimized (unlike gzip / deflate compression) to make them smaller. There are many corresponding open source tools to help you do this

JavaScript

Google closure compiler

uglifyjs

YUI compressor

shrinksafe

others, such as jsmin

node js¡¢jQuery1. 5 start using uglifyjs. Uglifyjs compression is smaller than YUI compressor and safer than Google closure compiler. Nevertheless, uglifyjs needs to deploy nodejs environment, so we still choose to use Google closure compiler

style (CSS)

csstidy

YUI compressor

Yslow / Google Page Speed

both csstidy and YUI compressor are great. We still choose the old YUI compressor because we are more familiar with it and it can meet our needs

PNG8 / GIF picture

optipng

advancecomp (advpng, advdef)

imagemagic (mogrify, identify, convert)

pngcrush

pngout

gifsicle

JPEG tran

many pictures will be used in any larger website page, so it is necessary to compress and optimize the pictures. What kind of image format you choose determines how to compress the image. Generally speaking, we recommend PNG8 as long as it is a non animated picture, even if it is a small picture with few colors (although such picture GIF has higher compression, CSS sprites should be used). Pngout has no open source code and can only be used on the window NT platform, so we don’t consider it. Although pngcrush is easy to use, the combination of optipng, advpng and advdef can compress the picture smaller, so we choose optipng, advpng and advdef to compress and optimize the PNG picture. Optipng optimizes the compression of pictures, while advdef optimizes the compression algorithm

build script

when publishing products, we want to build front-end resources, including compression optimization, consolidation, etc. The construction should meet the following requirements as far as possible: 1 The whole process is automatic without manual intervention 2 All operations are safe 3 Free command line tool

here we use bash to write a simple version of the deployment script, which can simply deal with the static resource publishing of small and medium-sized websites

#!/ bin/sh#filename:build. shIN_ FILE”/ var/www.imgwell. com/themes/ocean/misc” OUT_ FILE”/ var/www.imgwell. com/misc” EXCLUDE_ FILES” jquery. min.js LAB.min.js” GOOGLE_ COMPILER”/ opt/build/bin/compiler. jar” YUI_ COMPRESSOR”/ opt/build/bin/yuicompressor-2.4.6. jar” OPTIPNG”/ usr/local/bin/optipng -quiet -o3 ” ADVPNG”/ usr/local/bin/advpng -q -z -4 ” ADVDEF”/ usr/local/bin/advdef -q -z -4 ” function mt_ ver_ code(){localMATRIX”23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz”localLENGTH12while[“${n:1}”-le”$LENGTH”]; dolocalPASS”$ PASS${MATRIX:$(($RANDOM%${#MATRIX})):1}” let n+1doneecho-n${PASS}} function mt_ file_ ext(){localFILE`basename–“$1″`echo-n”${FILE##*.}& quot;} function mt_ file_ size(){if[-f”$1”]; thenecho-n`ls-l–“$ 1″| awk’ {print $5}’` elseecho-n 0fi} function mt_ has_ exclude(){if[-z”$EXCLUDE_FILES”]; thenecho-n 0return 0fiecho”$ EXCLUDE_ FILES”| grep-q-w–“$ {1}” if[$?-eq 0 ]; thenecho-n” 1″ elseecho-n” 0″ fi} function mt_ google_ compile(){java -jar”$GOOGLE_COMPILER”–js $1 –js_output_file $2} function mt_ yui_ compressor(){java -jar”$YUI_COMPRESSOR” $1 -o $2 –charset utf-8} function mt_ png_ opti(){[-f”`echo ${OPTIPNG} |awk ‘{print $1}’`”]& amp;& amp;$ {OPTIPNG}”$ {1}” [-f”`echo ${ADVPNG} |awk ‘{print $1}’`”]& amp;& amp;$ {ADVPNG}”$ {1}” [-f”`echo ${ADVDEF} |awk ‘{print $1}’`”]& amp;& amp;$ {ADVDEF}”$ {1}”} function __ main__ (){[-d”$IN_FILE”]|| exit 1localVER_ CODE`mt_ ver_ code`localFILE_ STATUS”!& quot; mkdir-p”$ {OUT_FILE}/${VER_CODE}” for f in`ls-1″$ IN_ FILE”`; doif[-d”${IN_FILE}/${f}”] ; thencontinuefi localHAS_ EXCLUDE`mt_ has_ exclude “$ {f}”` localFILE_ SRC_ SIZE`mt_ file_ size “$ {IN_FILE}/${f}”` if[“`mt_file_ext “${f}”`” “js”-a”$HAS_EXCLUDE” “0”]; thenmt_ google_ compile “$ {IN_FILE}/${f}”& quot;$ {OUT_FILE}/${VER_CODE}/${f}” FILE_ STATUS” G” elif[“`mt_file_ext “${f}”`” “css”-a”$HAS_EXCLUDE” “0”]; thenmt_ yui_ compressor “$ {IN_FILE}/${f}”& quot;$ {OUT_FILE}/${VER_CODE}/${f}” FILE_ STATUS” Y” elif[“`mt_file_ext “${f}”`” “png”-a”$HAS_EXCLUDE” “0”]; thencp”$ {IN_FILE}/${f}”& quot;$ {OUT_FILE}/${VER_CODE}” [-f”${OUT_FILE}/${VER_CODE}/${f}”]& amp;& amp; {mt_png_opti “${OUT_FILE}/${VER_CODE}/${f}” FILE_ STATUS’ O’} elsecp”$ {IN_FILE}/${f}”& quot;$ {OUT_FILE}/${VER_CODE}” if[$?-eq 0 ]; thenFILE_ STATUS”-& quot; elseFILE_ STATUS” D” fifi localFILE_ DST_ SIZE`mt_ file_ size “$ {OUT_FILE}/${VER_CODE}/${f}”` echo”$ {FILE_STATUS}${HAS_EXCLUDE}${f}${FILE_SRC_SIZE}/${FILE_DST_SIZE}” doneecho”/& quot;$ VER_ CODE”& quot;} __ main__ The execution results of div >

are as follows

[ [email protected] -avatar misc]# ./ build. sh
O 0 6N9FQPpTHCy. png 820/258
Y 0 base. css 40171/35530
O 0 FSEB6oLTK3I. png 10362/10362
– 0 GsNJNwuI-UM. gif 522/522
O 0 heart. png 921/807
O 0 IJYgcESal33. png 5771/5771
O 0 _ IKHHfAgFQe. png 2635/2302
G 0 jquery. elastic. js 4988/1665
– 1 jquery. min.js 85260/85260
G 0 jquery. ui. dialog. js 10074/5274
G 0 jquery. ui. pview. js 4565/2878
– 1 LAB.min.js 5537/5537
O 0 lFahQXTaTNO. png 90/90
G 0 mutfa. js 36958/21777
O 0 nCItFQafRu8. png 452/288
O 0 p13yZ069LVL. png 792/219
– 0 plupload. flash. swf 18537/18537
G 0 plupload. full. js 48277/46682
Y 0 position. css 7737/7440
O 0 star. png 3292/283
G 0 stars. js 6333/2622
Y 0 ui_plugin.css 12794/12079
G 0 up.js 6230/3991
– 0 uVR6w3wRHEJ.gif 54/54
O 0 WSQ2wnhSG-F.png 245/229
– 0 _ZWZupdaAgS.gif 827/827
/ LruQcmx4Zi84

Summary

1 Uglifyjs compression is smaller than YUI compressor and safer than Google closure compiler. If you don’t want to take risks, you should choose uglifyjs. If you want to minimize, you can choose Google closure compiler 2 Yui compressor compresses CSS files. But csstidy is also very good 3 optipng -o3 *. png |advpng -z -4 *. png |advdef -z -4 *. Png will maximize compression and optimize PNG pictures 4 Try to use PNG format pictures in web pages, and compress and optimize them to make them optimal