Speed up websites: Difference between revisions
Jump to navigation
Jump to search
(Created page with " == Image part == Compression tools to reduce the file size of images * [https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently] == 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://p...") |
|||
| (6 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
== Image | == Measuring == | ||
[[Mobile friendliness tool]] | |||
== Image Compression == | |||
Compression tools to reduce the file size of images | Compression tools to reduce the file size of images | ||
* [https://tinypng.com/ TinyPNG – Compress WebP, PNG and JPEG images intelligently] | * [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 == | == JavaScript part == | ||
| Line 26: | Line 50: | ||
</pre> | </pre> | ||
{{Template:Build a website}} | |||
== Connection test == | |||
[[網路服務連線測試]] | |||
== References == | |||
<references /> | |||
[[Category:Programming]] | |||
[[Category:Web_Dev]] | |||
[[Category:Javascript]] | |||
[[Category:Design]] | |||
Latest revision as of 10:30, 4 April 2026
Measuring[edit]
Image Compression[edit]
Compression tools to reduce the file size of images
- TinyPNG – Compress WebP, PNG and JPEG images intelligently
- Or using ImageMagick to batch compress image files [1]
ImageMagick:
magick input.jpg -resize 2000x2000\> output.jpg
ImageMagick \>: shrinks only, never enlarges — both dimensions scale proportionally
ffmpeg:
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
ffmpeg
- scale=2000:-1: -1 already preserves aspect ratio; force_original_aspect_ratio=decrease 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): scale=2000:2000
JavaScript part[edit]
Compression tools to reduce the file size of javascript
- Minify Javascript Online / Online JavaScript Packer[2]
- Sublime Text 2 YUI-Compressor plugin
- $ PhpStorm IDE Minifying JavaScript
Using CDN (Content Delivery Network)
- Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers[3]
- Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library
- cdnjs.com - the missing cdn for javascript and css & 中文版: cdnjs.com - 遺失的CDN的JavaScript和CSS [Last visited: 2014-09-10]
- UNPKG [Last visited: 2018-10-18]
//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>
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary