![References
[1] Peipei Ling “Based on Web Application Front-end performance
optimization” published on 14th August 2011.
[2] Steve Souders “High performance websites” published on 10th
October 2008
[3] Xianfeng Li and Zhiqiang Bao “Performance Characterization of
Web Applications with HTML5 Enhancements” published on 24th
August 2014.
[4] Patrick Meenan “How Fast is Your Website?” published on April
2013
01/04/2016 19](https://image.slidesharecdn.com/websiteperformanceoptimization-160408132551/85/Website-performance-optimization-19-320.jpg)
Website performance optimization
- 1. Website Performance Optimization Maharashtra Institute Of Technology Seminar on Presented By : Shubham Shinde Seminar Guide : Varsha Powar
- 2. Agenda • What is website optimization? • Why is website optimization important? • What should we optimize on our website? • Three laws of optimization • How do we optimize our website? • Optimization methods and tools • Future trends • Conclusion • References 01/04/2016 2
- 3. What Is Website Optimization? • According to Merriam Webster dictionary Optimization is an act, process, or methodology of making something (as a design, system, or decision) as fully perfect, functional, or effective as possible. • Optimizing a website can refer to performance optimization, which ensures that your website runs quickly and smoothly. 01/04/2016 3
- 4. Why Is Website Optimization Is Important? • Serving websites faster and uptime of the site. • Usability • Lesser amount of data transfer • Less load on server • User satisfaction 01/04/2016 4
- 5. What Should We Optimize On Our Website? • What is the user looking for? Where did they came from? What do they want to know? • What is our goal for the user? 01/04/2016 5
- 6. Three Laws Of Optimization 01/04/2016 6 Fig. Three laws optimization
- 7. How Do We Optimize Our Website? 01/04/2016 7 1.Ideas 2.Prioritize 3.Test4.Analyze 5.Optimize Fig. Website optimization process model
- 8. Website Optimization Methods • Optimization: Content 1. Make fewer HTTP requests 2. Reduce DNS lookups 3. Post-load components 4.Preload components 5.Minimize number of iframes 6.Avoid 404’s 01/04/2016 8
- 9. Website Optimization Methods • Optimization : Server-side 1.Use Content Delivery Network(CDN) 2.Add expires or Cache-Control header 3.G-zip components 4.Flush buffer early 5.Avoid empty image src 01/04/2016 9
- 10. Website Optimization Methods • Optimization: CSS 1.Put style sheet at top 2.Avoid CSS expressions 3.Choose “<link>” over “import” 4.Avoid filters 01/04/2016 10
- 11. Website Optimization Methods • Optimization : JavaScript 1.Put scripts at bottom 2.Make the JavaScript and CSS external 3.Minify JavaScript and CSS 4.Remove duplicate scripts 5.Develop smart event handlers 01/04/2016 11
- 12. Website Optimization Tools Google PageSpeed Insights measures how the page can improve its performance on • Time to above-the-fold load: Elapsed time from the moment a user requests a new page and to the moment the above-the-fold content is rendered by the browser • Time to full page load: Elapsed time from the moment a user requests a new page to the moment the page is fully rendered by the browser. 01/04/2016 12
- 13. Website Optimization Tools Yslow by Yahoo! Features: • It offers suggestions for improving the page's performance. • Summarizes the page's components. • Displays statistics about the page • Provides tools for performance analysis,including Smush.it and JSL int 01/04/2016 13
- 14. Website Optimization Tools Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. • Inspect and edit HTML • Visualize CSS metrics • Monitor network activities • Debug and profile JS • Quickly find errors 01/04/2016 14
- 15. State Of Art Application • Facebook.com • Google.com • Gmail.com • Flipkart.com 01/04/2016 15
- 16. Future Trend : Mobile Optimized Websites 01/04/2016 16
- 17. Future Trend : Mobile Optimized Websites 01/04/2016 17 • Reasons to optimize website for mobile phones 1. Everyone is on mobile. 2. Over half of the web traffic is mobile. 3. Mobile users behave differently. 4. Mobile users buy more. 5. Google favours mobile responsiveness. 6. Great mobile sites differentiate your brand.
- 18. Conclusion • So while it may take extra time to perform all this optimization, it’s certainly a worthwhile endeavor since it not only offers better performance in the browser and on mobile, but also has the chance to promote better development practices and even get your content a higher rank on search engines like Google. 01/04/2016 18
- 19. References [1] Peipei Ling “Based on Web Application Front-end performance optimization” published on 14th August 2011. [2] Steve Souders “High performance websites” published on 10th October 2008 [3] Xianfeng Li and Zhiqiang Bao “Performance Characterization of Web Applications with HTML5 Enhancements” published on 24th August 2014. [4] Patrick Meenan “How Fast is Your Website?” published on April 2013 01/04/2016 19