Speed up websites: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
 
Line 3: Line 3:
[[Mobile friendliness tool]]
[[Mobile friendliness tool]]


== Image part ==
== 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>
* 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 ==

Latest revision as of 10:30, 4 April 2026

Measuring[edit]

Mobile friendliness tool

Image Compression[edit]

Compression tools to reduce the file size of images

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

Using CDN (Content Delivery Network) 

//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


Connection test[edit]

網路服務連線測試

References[edit]

  1. ↑ ImageMagick: Lossless max compression for PNG? - Stack Overflow
  2. ↑ JSCompress線上JS壓縮器，一鍵將多隻JS合併並壓縮|梅問題．教學網
  3. ↑ 使用 Google CDN Host 的 Javascript Library - jQuery - Tsung's Blog, javascript - jquery ui - how to use google CDN - Stack Overflow
Retrieved from "https://wiki.planetoid.info/index.php?title=Speed_up_websites&oldid=26304"