Optimizing Web Assets For Performance
Although most internet users nowadays have very fast connections it is still important to optimize your web application’s assets to ensure optimal performance. This is especially the case for mobile users, which have more constrained resources (data connections and hardware resources). There are a number of things you can do but I’lll highlight just a few that I believe are important to think about.
Serve Multiple Sizes - Instead of serving the same image used in multiple locations at different sizes on your website, you should try to make use of CSS media queries to define separate images for certain circumstances. Check out css-tricks's page on media queries for more info.
Compression - You should compress your images as well as possible in a photo editor before using them on the web. However, you can also use code to compress them on the fly. For example, this is possible using the various image processing utility functions in PHP.
Prefetching - With the new HTML5 specification you can prefetch content before its actually needed. This means that when it is needed, the content will already be available. Check out the WhatWG page on the prefetch specification for more info.
Caching - It's a good idea to try to take advantage of caching in your browser if possible. This way you can reduce the amount of content that needs to be retrieved multiple times. To learn more about controlling your browser's caching in the HTTP headers check out this page via betterexplained.com.
Syntax Improvements - By carefully crafting your stylesheets you can reduce the size and increase the performance of rendering them. For some tips on good practices check out this developers.google.com site and this css-tricks.com page. You can also minimize the size of your CSS files automatically with tools such as CSSOptimizer and Minifycss.
Design Patterns - You wouldn't want to create everything you want to do from scratch. For many things you want to do there are most likely established efficient methods out there. Some design patterns to look at may be: Constructor Pattern, Module Pattern, MVC Pattern, Observer Pattern, Function Chaining Pattern, etc.