Speed up websites: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (→Image part) |
||
| Line 3: | Line 3: | ||
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> | |||
== JavaScript part == | == JavaScript part == | ||
Revision as of 13:43, 19 September 2024
Image part
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]
JavaScript part
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