Speed up websites

Measuring

Mobile friendliness tool

Image Compression

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

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

Compression tools to reduce the file size of javascript

• Minify Javascript Online / Online JavaScript Packer
• 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
• 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

Connection test

網路服務連線測試