Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder Wishlisting.com.

Slides:



Advertisements
Similar presentations
High Performance Web Sites 14 rules for faster pages
Advertisements

WordPress Optimization markkelnar | WP | wpengine.com/optimizing-WordPress WordCamp Atlanta 2012.
Building Fast 3rd-Party Webapps O'Reilly Velocity Web Performance and Operations Conference 24 June Lessons.
Steve Souders Even Faster Themes Disclaimer: This content does not necessarily reflect.
High Performance Web Sites Essential Knowledge for Frontend Engineers
CS193H: High Performance Web Sites Lecture 4: Class Projects Steve Souders Google
CS193H: High Performance Web Sites Lecture 13: Rule 10 – Minify JavaScript Steve Souders Google
CS193H: High Performance Web Sites Lecture 1: Introduction Steve Souders Google
CS193H: High Performance Web Sites Lecture 17: Rule 14 – Make Ajax Cacheable Steve Souders Google
CS193H: High Performance Web Sites Lecture 8: Rule 4 – Gzip Components
High Performance Web Sites Essential Knowledge for Frontend Engineers
Exceptional Performance Evolution at Yahoo! Steve Souders Chief Performance Yahoo!
CS193H: High Performance Web Sites Lecture 3: HTTP and the Web 100 Performance Profile Steve Souders Google
Steve Souders Even Faster Web Sites best practices for faster pages Disclaimer: This content does not necessarily.
CS193H: High Performance Web Sites Lecture 12: Rule 8 – Make JavaScript and CSS External Steve Souders Google
Web Performance Meetup 1 Web Performance 101 Jeremy
Web Performance Meetup 1 Web Performance Toolbelt Jeremy
Make Drupal Run Fast increase page load speed
The Test Will last 60 minutes Will be submitted via the electronic coursework submission system (not part of the test itself Is worth 20% of total module.
Stevesouders.com/docs/velocity-wpo pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Best Practices for Speeding Up Your Web Site
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
Web Site Performance What makes web sites slow? Back end Front end Tools for measuring performance Firebug / YSlow Visual Studio Test Edition W3.org html.
Web Toolkit Julie George & Ronald Lopez 1. Requirements  Java SDK version 1.5 or later  Apache Ant is also necessary to run command line arguments 
©2013 AKAMAI | FASTER FORWARD TM It's all about Performance Measured and Perceived Performance on Desktop and Mobile Devices San Mateo Meetup, July 2013.
CHAPTER 15 WEBPAGE OPTIMIZATION. LEARNING OBJECTIVES How to test your web-page performance How browser and server interactions impact performance What.
PACS – 06/21/14 1 Cache? What is caching? A way to increase the average rate of a process by preferentially using a copy of data in a faster, closer, probably.
Improving Web Site Performance and Scalability While Saving Money Robert Boedigheimer ∙ Web Application
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
Analysis and Performance Information Systems 337 Prof. Harry Plantinga.
High Performance Websites (Based on Steve Souder’s lecture) By Bhoomi Patel.
Front-end Performance Optimization Using Drupal Fixing all validation errors reported by the Yslow & Page Speed tools.Yslow Page Speed.
Disclaimer: This content does not necessarily reflect the opinions of my employer.
&.zip Disclaimer: This content does not necessarily reflect the opinions of my employer.
Mark Phillip markphillip.com 200s, 304s, Expires Headers, HTTP Compression, And You.
 What I hate about you things people often do that hurt their Web site’s chances with search engines.
Performance, SEO, Accessibility Ivan Zhekov Telerik Corporation
@SEAN_P_MORRISON BAKING IN THE SEO. PAGE SPEED HOSTING SOLUTIONS CONTENT DELIVERY NETWORKS.
Presented By: Zulqarnain Abdul Jabbar Date: 25 th March 2013.
Keeping Front End Dependencies Under Control Rachel Lehman Technical Team at Interfolio, -
Chapter 19: Adding JavaScript
Traffic Control in Apache Jed Reynolds Blog.Bitratchet.com Where in your web site do you need traffic control?
Adapting web pages for mobile devices Fredrik Andersson Hannes Nevalainen.
Form Tag How to use Form Tag Something NEW ? PARAMETER Attribute NAME Specifies the name for a form To specify which form to submit with JavaScript, this.
Web Performance Optimization Boban Stojanovski (Senior Front End Developer at Solaborate) Think Fast by default.
PERFORMANCE ENHANCEMENT IN ASP.NET By Hassan Tariq Session #1.
Front-end Performance. Why Performance? Users Download time JavaScript execution time Browser memory usage Search Engines Fast-loading pages are ranked.
Restricted © Siemens AG All rights reserved A Developer’s Insights Into Performance Optimizations for Mobile Web Apps CT DC AA EM LP2 | June 2015.
HTML A brief introduction HTML1. HTML, what is? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup.
INTRODUCTION TO HTML5 New HTML5 User Interface and Attributes.
1 Minification JavaScript & CSS. 2 Minification Removing 0 Whitespace 0 Line Breaks 0 Comments 0 Shrink Variables 0 Optimize Code.
PHP Quebec 2008 Page 1 High Performance Web Pages Stoyan Stefanov Yahoo! Exceptional Performance PHP Quebec, March.
Intro to Web Performance Ten Ways to a Faster Website Presented by: Sheila Eaton and Mohammad Durrani TechKnowFile, University of Toronto, May 5, 2016.
Website: Contact:
Site Speed: The Ultimate UX Feature… for SEO. A case study on how to increase search engine crawling and online conversion Jonathon Colman In-House SEO.
Technical SEO tips for Web Developers Richa Bhatia Singsys Pte. Ltd.
Enhance Your Page Load Speed And Improve Traffic.
WHAT'S NEW IN HTTP/2 BY DAWN PARZYCH. The front end optimization (FEO) movement was a result of the inefficiencies of HTTP/1.1. The availability of.
IS1500: Introduction to Web Development
Essential tools for implementing and testing websites
Site Optimization for Wordpress
50 Performance Tricks to Make your HTML5 apps and sites Faster
3 Best Website Speed and Performance Checking Tools
Time is the enemy: Ten Core Lessons for Achieving Peak
Information Systems 337 Prof. Harry Plantinga Assessment.
Web Caching? Web Caching:.
Tips for Website Speed Optimization
Hints and tips for faster web apps
List of 7 tips to boost up your AWS Website Speed.
Yale Digital Conference 2019
Presentation transcript:

Optimizing Websites with YSlow Tom Lianza Co-Founder Wishlisting.com Tom Lianza Co-Founder Wishlisting.com

What is Yslow? By Yahoo - A performance report card for your site. By Yahoo - A performance report card for your site.

What its going to tell you Browser Caching report HTTP Request Breakdown Browser Caching report HTTP Request Breakdown

Note: Dont take the Grades Too Seriously Amazon.com: D Yahoo.com and Google.com: A MSN.com: F The YSlow download page: C Amazon.com: D Yahoo.com and Google.com: A MSN.com: F The YSlow download page: C

Caching + Compression YSlows two best features (in my opinion) Yahoo study: 20% of overall pageviews are with an empty cache % of users have an empty cache experience Caching: helps repeat visitors Compression: helps everyone YSlows two best features (in my opinion) Yahoo study: 20% of overall pageviews are with an empty cache % of users have an empty cache experience Caching: helps repeat visitors Compression: helps everyone

Caching: Conditional GET By default, uses file timestamps (Last- Modified/If-Modified-Since) Entity Tags (Etags) could be more precise, but YSlow punishes you for using them. Apache: FileETag MTime Size or FileETag none More info: Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster). By default, uses file timestamps (Last- Modified/If-Modified-Since) Entity Tags (Etags) could be more precise, but YSlow punishes you for using them. Apache: FileETag MTime Size or FileETag none More info: Dynamic content: Rails 2.0 will have ETag support and if-modified function (faster).

Caching: Expires Header Tells the browser that an element neednt be re-fetched until some date in the future. Super-fast. Mainly for static content. We use Apaches mod_expires ExpiresActive on ExpiresDefault "access plus 1 year" More info: with-http-caching/ Tells the browser that an element neednt be re-fetched until some date in the future. Super-fast. Mainly for static content. We use Apaches mod_expires ExpiresActive on ExpiresDefault "access plus 1 year" More info: with-http-caching/

Compression: Gzip Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: your-site-with-gzip-compression/ Our config: Send your files zipped up. Browsers unzip automatically Less bandwidth. Dead simple. Apache mod_deflate. More info: your-site-with-gzip-compression/ Our config:

Compression: Minify JavaScript Javascript can be reformatted to be smaller. Several popular tools: DoJo ShrinkSafe, Dean Edwards Packer, JSMin, YUI Compressor Less bandwidth. Code illegible. Rails 2.0 will have this baked in. asset_packager plugin will do some of this now (for CSS too) Javascript can be reformatted to be smaller. Several popular tools: DoJo ShrinkSafe, Dean Edwards Packer, JSMin, YUI Compressor Less bandwidth. Code illegible. Rails 2.0 will have this baked in. asset_packager plugin will do some of this now (for CSS too)

Reduce Requests DNS lookups Can take ms each Target 2-4 hosts Rails distributed_assets HTTP Requests CSS Sprites Inline CSS/JavaScript Rails asset_packager (again) DNS lookups Can take ms each Target 2-4 hosts Rails distributed_assets HTTP Requests CSS Sprites Inline CSS/JavaScript Rails asset_packager (again)

Page Structure Make CSS + JavaScript external for separate caching CSS at the top for progressive rendering JavaScript at the bottom to prevent blocking requests Make CSS + JavaScript external for separate caching CSS at the top for progressive rendering JavaScript at the bottom to prevent blocking requests

Any Questions?