High Performance WebsitesAlla GringausDaniel MendelsohnAaron GroggTime Inc. InteractiveFront-end Web Development Team.Lunch & Learn.02.12.2008
In the blink of an eye… You only have one chance to make a first impression. "In the blink of an eye" your site (blog or website) is judged. With so many sites and blogs to choose from, a site that loads at a snails pace or is hard to navigate will send frustrated potential visitors on to their next destination. Good design, effective usability and speedy site performance are three very important considerations for building and keeping an audience. They add to your credibility and help build your audience’s trust, which is the only way to achieve user loyalty.
How much information is out there? How large is the Web? Tens of billions of documents? Hundreds? 10KB/doc => 100s of Terabytes Email, personal files, databases, broadcast media, archives Estimated 5 Exabyte/year (growing at 30%) 800MB/Year/Person – 90% in magnetic media Web is just a tiny starting point Google is working on how to organize all this information
Innovation in wireless products is accelerating Apple iPhone, 3 Skype Phone, Amazon Kindle, Google ‘GPhone’… 91% of mobile users keep phone within 1 met reach 24x7 15-20% of mobiles have GPS, 50% within 5 years Watch for new generation of Internet leaders to capitalize on growing access to fast Internet access on mobiles
Broadband StatisticsIn high traffic site, if pages are optimized forlower weight, the company can save a lot ofmoney on bandwidth charges. And why shouldFor example, 100,000 pages of 150Kb weight will I care?need twice the bandwidth as the same number ofpages at 75Kb. So, if the ISP, charges by the amount of bandwidth we use, that’s how reducing page weight can save the company big time on monthly bandwidth charges.
Impatience Index There are still a large number of outdated computers and slower speed connection than advanced reliable computers and fast connection. Connection Speed 20kb Page Weight 40kb Page Weight 100kb Page Weight 128 kbps (DSL) 1 second 2 seconds 6 seconds 256 kbps (DSL) < 1 second 1 second 3 seconds Time to Download a Page Percent of users who wait for download 10 seconds download 84% 15 seconds download 51% 20 seconds download 26% 30 seconds download 5% Poor website performance can be costly in many ways: downtime, slow response times, increased bailout rates ($$$$$!!!). Page weight has a direct correlation to the download times of your landing page and every other page within your site.
Optimization Strategies Reduce Latency Time HTTP Requests Server-Side Optimization (Expired Headers, E-tags) Reduce Download Time K-Size of page objects (HTML, JS, CSS, Images) Improve Page Rendering Load order Code execution UI and Design Elements Page Architecture (Hidden Content, Image-based headers Less Images-involved Design, more use of CSS
Optimization Strategies Reduce Latency Time HTTP Requests Download time is reduced by making every Server-Side Optimization byte count in every object sent down the (Expired Header, E-tags) pipe. For code, this means using as few characters Reduce Download Time as possible. K-Size of page objects For design, it means ensuring images are as (HTML,JS, CSS, Images) compressed as they possibly can be, and using less of them. Improve Page Rendering Optimizations such as GZip can also be made Load order on the server side to improve download time. Code execution UI and Design Elements Page Architecture (Hidden Content, Image- based headers Less Images-involved Design, more use of CSS
Optimization Strategies GZip on servers Compress: HTML, CSS, JS, XML,JSON, TXT Don’t compress: JPEG, GIF, SWF, PDFServer-side compression can be made to improve download times.This effective technique requires additional work and projectmanagement but undoubtedly impacts your bottom line (seeBenefits of Maximizing Performance)
Optimization Strategies HTML Aside from ads, external CSS / JS mostly good Move JS/CSS from page CSS JS to external files Link CSS, do not @import Internal code cannot be cached
Optimization Strategies CSS HTML CSS goes at the top Browser won’t render until all CSS is downloaded
Optimization Strategies HTML JS JS can go at the bottom JS downloads disable parallel downloads Browser stops all processing until JS is downloaded Allows content to download before JS files Issue with ads
Optimization Strategies Reduce Latency Time HTTP Requests Server-Side Optimization (Expired Header, E-tags) Reduce Download Time K-Size of page objects (HTML,JS, CSS, Images) Improve Page Rendering Load order Code execution Anything styled using code shows up first in UI and Design Elements the load order, allowing the user to get a feel for the page faster. Page Architecture Hidden Content (SEO) Reducing art assets saves on “latency time”, No image-based headers which could grow exponentially in bad network conditions, even if “cached.” More use of CSS
Hidden content (tabs, slideshows)Download only when needed or post-load Be mindful of SEOImage-less headers: use text, not images (SEO-friendly pages) Reduce image-heavy designs Use CSS when possible: Fonts, Borders, Backgrounds
Leaderboard Optimization: GOLF.com Before After “What’s a few seconds of wait time among friends”, Given GOLF.com lives under older technology right? Well, the difference in download times has a platform, we could only implement a few steps to direct impact on the number of GOLF.com optimize the Leaderboard landing page, which tournament’s fans who actually may not stick around kept traffic up, page down, and encouraged much while the blue line makes its slow crawl from left to more visitors to return and stay on site much right. We captured the movie clip of ‘Before’ the longer than previously… landing page optimization. If you’re curios, shoot us an email: firstname.lastname@example.org
Why Maximize Performance A few, small improvements to the overall page weight can deliver substantial improvements to your visitor retention rate, conversion rate and PageRank, moving us up on the results page generated by a user query. And, since most SE users rarely look beyond the first or second page of search results delivered by any search engine, getting the site listed higher in the results page is a guarantee of increased site traffic. And, that gets us to the bottom line
‘s 10 Rules1. Focus on user and all else will follow2. It’ best to do one thing really do really really well3. Fast is better than slow4. Democracy on the web works5. You don’t need to be at your desk to need an answer6. You can make money without doing evil7. There is always more information out there8. The need for information crosses all borders9. You can be serious without a suit10. Great Just isn’t good enough
We picked 3 for a better online performance 1. Focus on user and all else will follow 3. Fast is better than slow 6. You can make money without doing evil
“…and likewise all parts of the system must be constructed with reference to all other parts,since, in one sense, all the parts form one machine…” Thomas Edison