[Design] Speed Up Webpage for Slow Connection - Shuatiblog.com

[Design] Speed Up Webpage for Slow Connection (1) - Shuatiblog.com
Suppose you are handling Amazon website and you have 10 MB size home page. Optimize the homepage for a customer who has 100 kbps internet connection.
Further he asked for the customer who has 100 mbps internet connection.
http://sixrevisions.com/web-development/site-speed-performance/

1. Defer Loading Content When Possible

2. Use External JS and CSS Files

When the user first loads your web page, the browser will cache external resources like CSS and JavaScript files. Thus, instead of inline JavaScript and CSS files, it’s best to place them in external files.

Using inline CSS also increases the rendering time of a web page; having everything defined in your main CSS file lets the browser do less work when rendering the page, since it already knows all the style rules that it needs to apply.

As a bonus, using external JavaScript and CSS files makes site maintenance easier because you only need to maintain global files instead of code scattered in multiple web pages.

3. Use Caching Systems - Server side cache

1. Avoid Resizing Images in HTML (using HTML’s width and height attributes), for the sake of smaller file size.
2. Optimize Image Sizes by Using the Correct File Format. Eg. JPG format often displays photographic images at smaller file sizes than PNG.
3. Optimize the Way You Write Code. For example, instead of using (h1)(em)Your heading(em)(h1), you can easily use CSS to make your headings italics.

8. Load JavaScript at the End of Your Document

It’s best if you have your scripts loading at the end of the page rather than at the beginning. It allows for the browser to render everything before getting started with the JavaScript. This makes your web pages feel more responsive because the way JavaScript works is that it blocks anything below it from rendering until it has finished downloading. If possible, reference JavaScript right before the closing (body) tag of your HTML documents.

9. Use a Content Delivery Network (CDN)

10. Optimize Web Caching -- Client side cache

Along with using caching systems, you should create websites that utilize web caching as much as possible. Web caching is when files are cached by the web browser for later use. Things that browsers can cache include CSS files, JavaScript files, and images.

For example, you can set HTTP response headers such as Expires and Last-Modified to reduce the need of re-downloading certain files when the user comes back to your site. 

http://www.shuatiblog.com/blog/2015/02/14/speed-up-web-page-3/
http://www.shuatiblog.com/blog/2015/02/14/speed-up-web-page-4/

What hijacks your load time

1. Too Many HTTP Requests

This is the single biggest contributor to performance problems in most web pages.

1. Concatenate scripts and stylesheets
2. Combine images with sprites (put common images into a single large image file, then use CSS to position and selectively display the appropriate portion of the sprite image)
3. Use fewer images, more CSS.

2. Minimal Client-side Processing

1. Validation on client. (eg. form input)
2. Use web standards and MVC separation, making a maintainable, accessible, future-proof and max-performance website.
   Think of the HTML as the model, the CSS as the view, and the JavaScript as the controller. This separation tends to make code more efficient and maintainable, and makes many optimization techniques much more practical to apply.
3. Push presentation code into the client tier (eg. Charts and graphs — push raw data to the client in JSON format, and use JavaScript and CSS to create pretty graphs.)
4. Leverage Ajax techniques (only requiring small parts of the page to change in response to user actions)

3. Low Number of Parallel Requests

Fetch a script, parse and execute it, then fetch another one… this will use up all the available connections. There are things you can do to your HTML to allow virtually any browser to make many requests at once, which has a huge impact on latency.

1. Use browser-appropriate domain sharding
2. Use intelligent script loading
3. Leverage Keep-Alive (reuse the same TCP connection for multiple HTTP request/response cycles)

4. Failure to leverage browser cache / local storage

1. HTTP cache overview
2. Leverage local storage

5. Third-party widgets

1. Avoid third-party widgets!
2. Try to use widgets that provide asynchronous implementations, so their inevitably terrible performance impacts their widget without dragging down your entire UX with it.

7. Failure to Use a Global Network

Amazon S3.

Ref: http://www.sitepoint.com/seven-mistakes-that-make-websites-slow/

Read full article from [Design] Speed Up Webpage for Slow Connection (1) - Shuatiblog.com