While labsjs or any other conditional loader may be used to ensure the order all the scripts must be loaded at the end of body of html; because while a script is getting downloaded, nothing else may be downloaded; also make sure that your script doesn’t perform an action unless the DOM is stable.
· Loading CSS at the start
Moving stylesheets at the head of the document makes the pages appear to be loading faster.
· Keep Scripts and CSS external
· Minimize http requests
Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.
CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.
Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document so make sure you don’t use large images as inline, rather pickup small images to be used as inline images. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages.
· Use Media queries to load optimum size of images
We should not depend on the browser to resize images for us and rather use media queries to check for the change in size of screen and load appropriate image for that screen size, it’s suggested to keep 3 versions of every image – for diff. screen sizes of desktop, tablet and mobile or at least 2 versions of images will help.
· Create images from CSS
Images that are mono-chrome or vector in nature may be converted straight into css, and be loaded from there. It serves a few purposes
1. There is no image, so in one go its loaded as normal text of markup
2. You don’t need round trips to get the image.
3. Because there is no image, it’s perfect to be used for html emails, users will always see images in there emails thus.
· Use CSS transitions
· Try making pages with less images, depend over shades, colors and gradients
· Use MediaQueries for CSS loading
Use Media queries to determine the css to be include.
· Use Application cache manifest
Using the cache interface gives your application three advantages:
1. Offline browsing - users can navigate your full site when they're offline
2. Speed - cached resources are local, and therefore load faster.
3. Reduced server load - the browser will only download resources from the server that have changed.
The Application Cache (or AppCache) allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline.
THE CACHE MANIFEST FILE
The cache manifest file is a simple text file that lists the resources the browser should cache for offline access.
REFERENCING A MANIFEST FILE
To enable the application cache for an app, include the manifest attribute on the document's html tag:
The manifest attribute should be included on every page of your web application that you want cached. The browser does not cache a page if it does not contain the manifest attribute (unless it is explicitly listed in the manifest file itself. This means that any page the user navigates to that include a manifest will be implicitly added to the application cache. Thus, there's no need to list every page in your manifest.
The manifest attribute can point to an absolute URL or relative path, but an absolute URL must be under the same origin as the web application. A manifest file can have any file extension, but needs to be served with the correct mime-type (see below).
A manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or.htaccess configuration.
For example, to serve this mime-type in your webserver, add this line to your config file:
AddType text/cache-manifest .appcache
STRUCTURE OF A MANIFEST FILE
A simple manifest may look something like this:
This example will cache four files on the page that specifies this manifest file.
There are a couple of things to note:
§ The CACHE MANIFEST string is the first line and is required.
§ Sites are limited to 5MB worth of cached data. However, if you are writing an app for the Chrome Web Store, using the unlimitedStorage removes that restriction.
§ If the manifest file or a resource specified in it fails to download, the entire cache update process fails. The browser will keep using the old application cache in the event of failure.
IIS - Add the mime type for manifest, but there is one already available in the iis , which is supported by Microsoft for click – once deployment – application/x-ms-manifest; Remove it.
· Create your own mime type for .manifest with text/cache-manifest
· Create your own mime type for fonts like .ttf as font/ttf for .ttf ; if a mime type already exists like application/octet-stream, remove it and add it as font/ttf.
More Performance Tricks
(2) When the first time the user downloads the page and we store stuff in the app cache or local storage, we also store a cookie with a list of all the artifacts and files stored. Next time when user requests the same page the cookie is sent by browser to the server. The server can look at the list of files already present on the client and NOT send them again. This way you can only send incremental data and avoid the heavy downloads.