Editing Speed up websites


== Measuring ==
[[Mobile friendliness tool]]

== Image Compression ==
Compression tools to reduce the file size of images
* [https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently]
* Or using [https://imagemagick.org/index.php ImageMagick] to batch compress image files <ref>[https://stackoverflow.com/questions/27267073/imagemagick-lossless-max-compression-for-png ImageMagick: Lossless max compression for PNG? - Stack Overflow]</ref>

ImageMagick:
<pre>
magick input.jpg -resize 2000x2000\> output.jpg
</pre>

ImageMagick {{kbd | key=<nowiki>\>:</nowiki>}} shrinks only, never enlarges — both dimensions scale proportionally

ffmpeg:
<pre>
ffmpeg -i input.jpg -vf "scale=2000:-1:force_original_aspect_ratio=decrease" output.jpg

# To cap the longer edge at 2000
ffmpeg -i input.jpg -vf "scale=2000:2000:force_original_aspect_ratio=decrease" output.jpg

</pre>

ffmpeg 
* {{kbd | key=<nowiki>scale=2000:-1</nowiki>}}: -1 already preserves aspect ratio; {{kbd | key=<nowiki>force_original_aspect_ratio=decrease</nowiki>}} ensures the longer edge never exceeds 2000, with the shorter edge calculated automatically
* To cap both width and height at 2000 (e.g. for portrait images): {{kbd | key=<nowiki>scale=2000:2000</nowiki>}}

== JavaScript part ==
Compression tools to reduce the file size of javascript
* [http://jscompress.com/ Minify Javascript Online / Online JavaScript Packer]<ref>[https://www.minwt.com/webdesign-dev/html/18639.html JSCompress線上JS壓縮器，一鍵將多隻JS合併並壓縮|梅問題．教學網]</ref>
* [https://packagecontrol.io/packages/YUI%20Compressor Sublime Text 2 YUI-Compressor plugin]
* ''$'' [https://www.jetbrains.com/phpstorm/ PhpStorm IDE] [https://www.jetbrains.com/help/phpstorm/2017.1/minifying-javascript.html Minifying JavaScript]

Using CDN ([https://en.wikipedia.org/wiki/Content_delivery_network Content Delivery Network])
* [https://developers.google.com/speed/libraries/devguide?hl=zh-tw Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers]<ref>[http://blog.longwin.com.tw/2008/11/google-cdn-host-ajax-library-jquery-2008/ 使用 Google CDN Host 的 Javascript Library - jQuery - Tsung's Blog], [http://stackoverflow.com/questions/5206666/jquery-ui-how-to-use-google-cdn javascript - jquery ui - how to use google CDN - Stack Overflow]</ref>
* [http://www.asp.net/ajaxlibrary/cdn.ashx Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library]
* [http://cdnjs.com/ cdnjs.com - the missing cdn for javascript and css] & 中文版: [http://zh-tw.cdnjs.com/ cdnjs.com - 遺失的CDN的JavaScript和CSS] {{access | date = 2014-09-10}}
* [https://unpkg.com/#/ UNPKG] {{access | date = 2018-10-18}}

<pre>
//If the javascript library hosted at CDN was failed to connect, it will switch to local javascript file automatically.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script>!window.jQuery && document.write('<script src="local-js-path/jquery-1.12.4.min.js"><\/script>');</script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script>!window.jQuery.ui && document.write('<script src="local-js-path/jquery-ui-effects.custom-1.9.2.min.js"><\/script>');</script>
	
</pre>

{{Template:Build a website}}

== Connection test ==
[[網路服務連線測試]]

== References ==
<references />


[[Category:Programming]]
[[Category:Web_Dev]]
[[Category:Javascript]]
[[Category:Design]]