Do things faster and better with WebAssembly - Sendil Kumar Nellaiyapen - Cod...Codemotion
Do you know you can run your C++ / Rust code in the browser via javascript? Do you know you can speed up the JS performance with your native code? We will see how to do things faster and better with web assembly. Web Assembly the future of the web and experience what it has to offer.
How to make your site 5 times faster in 10 minutesGal Baras
This document provides tips to make a website 5 times faster in 10 minutes. It recommends updating PHP to the most recent version, enabling opcode caching, increasing PHP's memory limit, enabling HTTPS/HTTP2 support, and installing plugins like Autoptimize, WP Fastest Cache, EWWW Image Optimizer, and Jetpack Lazy Load to optimize assets, cache pages, optimize images, and lazy load images. Implementing these server configuration changes and plugins can significantly improve site performance by reducing processing, HTTP requests, file sizes, and loading times.
Front-End Web Performance Optimization by BucketSoftSteve Wortham
Front-end optimization involves everything that's delivered to the browser. We're looking to optimize HTML, CSS, JS, and images in such a way as to allow the browser to download and render these objects as quickly as possible.
How To Combine Back-End & Front-End Testing with BlazeMeter & Sauce LabsSauce Labs
Sauce Labs and BlazeMeter teamed up for an awesome webinar, giving step-by-step instructions on how to get real-world results from your front end while applying load to the backend.
Magento sites need optimization to load fast and provide a good user experience. Speeding up a site increases sales and improves SEO. Factors that impact load time include network transfers and the resource-intensive nature of Magento. Benchmarking tools like APDEX, Funkload, Yslow and Pagespeed help measure performance and set goals, such as loading the homepage in under 1.5 seconds. Architectures must be sized properly and include techniques like splitting front and back ends, enabling caching, and using a CDN. The Nitrogento extension automates optimizations like blocking caching, sprite generation, and asset minification to significantly improve performance.
This document discusses optimizing WordPress performance. It recommends minimizing frontend assets like CSS and images, using caching plugins to improve load times, optimizing themes and plugins, and choosing a fast web server like Nginx. Real-world tests show Nginx outperforming Apache. Specific tips include simplifying themes, deleting unused plugins, moving scripts to the bottom, and using a CDN with caching plugins to serve static assets quickly. The document emphasizes improving perceived performance through responsiveness, feedback and progressive loading.
The document discusses strategies for optimizing WordPress performance and scalability as website traffic grows. It recommends optimizing the WordPress configuration, disabling heavy or unnecessary plugins, enabling caching plugins like WP Super Cache, and using a content delivery network to offload assets. As traffic increases, the document suggests moving from shared hosting to virtual private servers or dedicated servers to allow configuration changes. It advises a scale-out approach adding more web servers behind a load balancer and scaling databases for redundancy as needed. The key is optimizing WordPress for performance early and scaling infrastructure ahead of traffic growth.
UXify 2015 - Front-end Developers' Checklist for Better UXStoian Dipchikov
Good UX has always been one of the key factors for success in the contemporary web development and there fore has led to huge improvements in our industry in the last years. Nowadays the UX of a software product is not responsibility only of the UX Architects / Producers, but to each individual involved in the creation of an app or a website, including the Front-end developers.
The talk presents a summarized list of DOs and DON’Ts, which Stoyan and his team believe should be respected by the Front-end developers if they want to build a useable web product, up to and above industry standards. There will be a lot of case studies and actual examples taken from Despark’s experience in the field.
Next.js is a React framework that allows building universal apps that work on both client and server. It addresses issues with SEO, performance, and code splitting in single-page apps. Next.js provides out-of-the-box features like server-side rendering, automatic code splitting, optimized builds, and more. It has a simple project structure where pages are individual React components and routing is file-based. While routing can be customized, the default routing only supports route paths that resolve to page files. Overall, Next.js streamlines universal React apps with its features and optimizations.
This document summarizes challenges faced by the Flipkart frontend team. It discusses how they handle over 4 million pageviews per day across browsers using an in-house CDN. Key challenges include secure cross-domain calls, scalable CSS, and cleaning up old code. Techniques used include iframes, window.postMessage(), and window.name for cross-domain transport. The document also covers their approach to webfonts, CSS architecture using OCSS, and an experimental tool to clean up redundant CSS declarations.
Web Performance, Scalability, and Testing Techniques - Boston PHP MeetupJonathan Klein
I gave this talk on 4/27/11 at the Boston PHP Meetup Group. It covers both server side and client side optimizations, as well as monitoring tools and techniques.
High Performance Web/Mobile Pages - Automationsoheil416
This document discusses optimizing website performance and speed. It notes that slow page speeds can negatively impact key metrics like conversion rates. It then outlines several standard optimization methods like reducing HTTP requests, using content delivery networks, caching files, and image/file compression. The document introduces HTTP/2 and its benefits over HTTP/1.1. It proposes automating performance optimization with a proxy server that intercepts requests, applies optimizations like payload reduction and caching, and returns optimized content to users. Results show the proxy reduced page sizes by 70% and load times by over 30%.
DeepCrawl Webinar: Performing SEO on the EdgeDan Taylor
Slides from my Edge SEO Deep Crawl webinar on February 27th 2019; in these slides I looked at what Edge SEO is, why we need it, and the conversations we need to have as Sapiens and organisations to prevent it's misuse.
This document provides tips on how to speed up a Joomla site. It recommends both application level optimizations like enabling compression, caching, and minimizing images/CSS/JS, as well as server level optimizations such as using a CDN, opcode caching, and reverse proxy servers. Proper optimization can significantly improve page load times and site speeds. The document demonstrates the impact of various optimizations through metrics like load time, page size, and speed scores. Overall optimization is positioned as an ongoing process to keep sites running efficiently.
This document contains notes from a SQL Server 2008 for Developers course taught by Peter Gfader. The course covered topics such as high availability, online index operations, mirrored backups, and SQL CLR integration. SQL CLR integration allows writing database queries using .NET code. It provides benefits like complex calculations, custom types and aggregates, and leveraging .NET debugging. However, T-SQL is better suited for core data operations. The document provides examples of stored procedures, functions, triggers and other SQL CLR code.
NextJS - Online Summit for Frontend Developers September 2020Milad Heydari
Developers may think launching SSR application with react must be painful. In this talk, i was describe a simple SSR method, does a deep dive into SSR with Next.js, and how i using it. it's about some useful tips about challenges, optimizations, writing clean codes beside do’s and don’ts in Next.js and cover many of the Next.js features to accomplish a great website application with acceptable performance and speed.
React Global Online Summit for Frontend Developers.
September 2020
https://react.geekle.us/september-2020
https://youtu.be/fkp5_5rezsE
NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta
This document summarizes Next.js, a JavaScript framework for building single-page applications. It discusses key Next.js features like server-side rendering, automatic code splitting, prefetching and inline critical CSS. It provides demo links and instructions for setting up a basic Next.js project using npm. Overall, Next.js is presented as a batteries-included solution for building production-ready PWAs with features like routing and optimization out of the box.
This document provides an overview of Cucumber, a behavior-driven development (BDD) tool for testing software. Cucumber uses plain language scenarios written in Gherkin to describe desired software behaviors. Step definitions then map these scenarios to code implementations. Key features of Cucumber include living documentation through automated testing of specifications, a focus on collaboration between business and technical teams, and protection against regressions through automated testing. The document also discusses Cucumber technical details like supported testing types, configuration options, scenario states, and popular test runners.
This document describes a web cache deception attack where an attacker can exploit how web servers and caching mechanisms handle requests for non-existent files. Specifically, if a request is made for a page plus a non-existent file extension, like http://www.example.com/account.php/stylesheet.css, some systems will return the content of the page rather than a 404. This allows an authenticated user's private page to be cached and then accessed by an attacker. The document provides examples of frameworks like Django and servers like IIS that can be exploited this way. It also discusses how caching services like Cloudflare have addressed this issue. Mitigations are proposed like only caching files if headers allow it and returning 302/404
This document discusses client-side performance testing. It describes measuring client-side performance through synthetic monitoring tools like WebPageTest.org, SiteSpeed.io and ShowSlow which test page load speeds, and real user monitoring through Akamai RUM, Monitis RUM and Google Analytics. WebPageTest.org is demonstrated in more detail, showing how to use it to test pages and understand key metrics like time to first byte, time to start render and full page loaded time. Private instances and automation of WebPageTest is also covered. YSlow and Google PageSpeed are also mentioned as alternatives for measuring client performance.
Slides from the workshop I conducted on "Client-side Performance Testing".
Abstract of the workshop:
In this workshop, we will see the different dimensions of Performance Testing and Performance Engineering, and focus on Client-side Performance Testing.
Before we get to doing some Client-side Performance Testing activities, we will first understand how to look at client-side performance, and putting that in the context of the product under test. We will see, using a case study, the impact of caching on performance, the good & the bad! We will then experiment with some tools like WebPageTest and Page Speed to understand how to measure client-side performance.
Lastly - just understanding the performance of the product is not sufficient. We will look at how to automate the testing for this activity - using WebPageTest (private instance setup), and experiment with yslow - as a low-cost, programatic alternative to WebPageTest.
In this presentation which was delivered to testers in Manchester, I help would-be performance testers to get started in performance testing. Drawing on my experiences as a performance tester and test manager, I explain the principles of performance testing and highlight some of the pitfalls.
Slides from my 4-hour workshop on Client-Side Performance Testing conducted at Phoenix, AZ in STPCon 2017 (March).
Workshop Takeaways:
Understand difference between is Performance Testing and Performance Engineering.
Hand’s on experience of some open-source tools to monitor, measure and automate Client-side Performance Testing.
Examples / code walk-through of some ways to automate Client-side Performance Testing.
See blog for more details - https://essenceoftesting.blogspot.com/2017/03/workshop-client-side-performance.html
The document summarizes a training session on performance testing using LoadRunner. It discusses planning load tests, the components of LoadRunner, creating scripts and scenarios, and enhancing scripts. Key points covered include the purpose of different types of tests, goals for performance testing, the workflow of a load test using LoadRunner, and developing scripts using Virtual User Generator.
The document provides an introduction and overview of performance testing. It discusses what performance testing, tuning, and engineering are and why they are important. It outlines the typical performance test cycle and common types of performance tests. Finally, it discusses some myths about performance testing and gives an overview of common performance testing tools and architectures.
This is my latest version of my client side performance presentations. This has been presented at TechEd NZ 2009 & to a couple of .NET user groups around NZ. This presentation focuses on the basics of client-side performance tuning.
This document discusses various techniques for improving the frontend performance of Drupal websites. It begins by introducing the speaker and describing the goals of the presentation. The bulk of the document then provides recommendations in three areas: backend server optimizations like caching, parallel downloads and gzip compression; tools for measuring performance; and frontend optimizations like minimizing requests, lazy loading images, and improving CSS and JavaScript. The document encourages proper performance diagnosis and defines goals before implementing solutions.
Going on an HTTP Diet: Front-End Web PerformanceAdam Norwood
Is your web site or web app feeling sluggish? Getting tired of watching your pages slowly render, the long seconds ticking away before your snazzy jQuery doohickey even has a chance to fire? Chances are it’s not that slow bit of code or that clunky database behind the scenes that’s to blame – 80% of the time spent loading most web pages is on the client side! At this talk, we’ll take a look at some of the easiest low-hanging fruit you can go after to help speed up web performance on the front end, from slimming down the size of content to optimizing HTTP requests, and more.
The document provides tips for building a scalable and high-performance website, including using caching, load balancing, and monitoring. It discusses horizontal and vertical scalability, and recommends planning, testing, and version control. Specific techniques mentioned include static content caching, Memcached, and the YSlow performance tool.
Performance presentation given to our in-house interactive team on website performance, taking heart.co.uk as an example... Presentation delivered by Jon Topper and Gareth Senior
High Performance Web Pages - 20 new best practicesStoyan Stefanov
The document discusses best practices for improving web page performance. It begins by noting how slow pages negatively impact user experience and business metrics. It then outlines 14 best practices such as minimizing HTTP requests, using a content delivery network, gzipping components, optimizing images, and avoiding redirects. Additional best practices are also provided such as preloading components, minimizing DOM access, and keeping components under 25kb. Tools for measuring performance are also mentioned.
The document discusses various techniques for optimizing UI performance, including optimizing caching, minimizing round-trip times, minimizing request size, minimizing payload size, and optimizing browser rendering. Specific techniques mentioned include leveraging browser and proxy caching, minimizing DNS lookups and redirects, combining external JavaScript, minimizing cookie and request size, enabling gzip compression, and optimizing images. Profiling and heap analysis tools are also discussed for diagnosing backend performance issues.
This document provides practical strategies for improving front-end performance of websites. It discusses specific techniques like making fewer HTTP requests by combining files, leveraging browser caching with far-future expires headers, gzipping components, using CSS sprites, and deploying assets on a content delivery network. It also summarizes key rules from tools like YSlow and PageSpeed for optimizing front-end performance.
This document discusses techniques for improving web performance. It begins with research on how caching and cookies impact performance. It then outlines 14 rules for optimizing performance, such as making fewer HTTP requests, using content delivery networks, gzipping components, placing scripts at the bottom of pages, and avoiding redirects. Case studies demonstrate how following these rules can significantly improve page load times. The document emphasizes starting performance improvements by focusing on front-end optimizations and advocates evangelizing best practices.
A little journey into website optimizationStelian Firez
Fast, Faster, Fastest - A little journey into website optimization is a presentation given at Fronteers BE which covers the main techniques and tools that can help you achieve the best performance for your website. From various ways to compress images, to writing very efficient CSS, to using cache and compression to your advantage, the slides will explain why front-end optimization is necessary, how it impacts a business and even how big companies use performance perception for their websites.
This document summarizes a presentation on optimizing Joomla performance. It describes two parts to the presentation:
Part 1 covers basic application-level optimizations for Joomla like keeping Joomla updated, choosing extensions wisely, simplifying templates, and using plugins and .htaccess rules to enable caching and compression.
Part 2 discusses server-level optimizations like using a CDN, opcode caching with APC and Memcached, and reverse proxy servers like Nginx and Varnish. It provides configuration examples and presents results of benchmark tests showing improvements from optimizations.
AD113 Speed Up Your Applications w/ Nginx and PageSpeededm00se
My slide deck from my session, AD113: Speed Up Your Applications with Nginx + PageSpeed, at MWLUG 2015 in Atlanta, GA at the Ritz-Carlton.
For more, see:
- https://edm00se.io/self-promotion/mwlug-ad113-success
- https://github.com/edm00se/AD113-Speed-Up-Your-Apps-with-Nginx-and-PageSpeed
The document provides tips for optimizing web page performance based on Yahoo's YSlow guidelines. It discusses 12 tips, including making fewer HTTP requests, using a content delivery network, adding expires headers, gzipping components, putting CSS at the top, moving scripts to the bottom, avoiding CSS expressions, making JavaScript and CSS external, reducing DNS lookups, minifying JavaScript, avoiding redirects, and removing duplicate scripts. It also discusses optimizing JavaScript performance through choosing optimal algorithms and data structures, refactoring code, minimizing DOM interactions, and using local optimizations. Measurement of performance is recommended at each stage of the optimization process.
The document discusses various techniques for enabling offline functionality in Ajax applications, including browser storage options like cookies, Firefox offline storage, and Flash shared objects. It also covers approaches for pushing data from server to client like polling, asynchronous servlets, Comet, and piggybacking on other responses. The document concludes with considerations for optimizing Ajax performance such as data formats, bandwidth usage, and client-side processing.
The document provides best practices for optimizing frontend performance by reducing page load time. It discusses ways to reduce the number of HTTP requests, DNS lookups, redirects and duplicate scripts. It also recommends techniques like minifying assets, leveraging caching, prioritizing critical components, optimizing images and using content delivery networks.
Modern Web Apps should be focused, rich, and gorgeous, but they also need to be FAST. After all, being rich and beautiful isn't always enough!
With web apps, faster is always better; nobody will ever complain that your site is too fast!
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfNeo4j
Presented at Gartner Data & Analytics, London Maty 2024. BT Group has used the Neo4j Graph Database to enable impressive digital transformation programs over the last 6 years. By re-imagining their operational support systems to adopt self-serve and data lead principles they have substantially reduced the number of applications and complexity of their operations. The result has been a substantial reduction in risk and costs while improving time to value, innovation, and process automation. Join this session to hear their story, the lessons they learned along the way and how their future innovation plans include the exploration of uses of EKG + Generative AI.
Mitigating the Impact of State Management in Cloud Stream Processing SystemsScyllaDB
Stream processing is a crucial component of modern data infrastructure, but constructing an efficient and scalable stream processing system can be challenging. Decoupling compute and storage architecture has emerged as an effective solution to these challenges, but it can introduce high latency issues, especially when dealing with complex continuous queries that necessitate managing extra-large internal states.
In this talk, we focus on addressing the high latency issues associated with S3 storage in stream processing systems that employ a decoupled compute and storage architecture. We delve into the root causes of latency in this context and explore various techniques to minimize the impact of S3 latency on stream processing performance. Our proposed approach is to implement a tiered storage mechanism that leverages a blend of high-performance and low-cost storage tiers to reduce data movement between the compute and storage layers while maintaining efficient processing.
Throughout the talk, we will present experimental results that demonstrate the effectiveness of our approach in mitigating the impact of S3 latency on stream processing. By the end of the talk, attendees will have gained insights into how to optimize their stream processing systems for reduced latency and improved cost-efficiency.
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc
Six months into 2024, and it is clear the privacy ecosystem takes no days off!! Regulators continue to implement and enforce new regulations, businesses strive to meet requirements, and technology advances like AI have privacy professionals scratching their heads about managing risk.
What can we learn about the first six months of data privacy trends and events in 2024? How should this inform your privacy program management for the rest of the year?
Join TrustArc, Goodwin, and Snyk privacy experts as they discuss the changes we’ve seen in the first half of 2024 and gain insight into the concrete, actionable steps you can take to up-level your privacy program in the second half of the year.
This webinar will review:
- Key changes to privacy regulations in 2024
- Key themes in privacy and data governance in 2024
- How to maximize your privacy program in the second half of 2024
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfjackson110191
These fighter aircraft have uses outside of traditional combat situations. They are essential in defending India's territorial integrity, averting dangers, and delivering aid to those in need during natural calamities. Additionally, the IAF improves its interoperability and fortifies international military alliances by working together and conducting joint exercises with other air forces.
Best Practices for Effectively Running dbt in Airflow.pdfTatiana Al-Chueyr
As a popular open-source library for analytics engineering, dbt is often used in combination with Airflow. Orchestrating and executing dbt models as DAGs ensures an additional layer of control over tasks, observability, and provides a reliable, scalable environment to run dbt models.
This webinar will cover a step-by-step guide to Cosmos, an open source package from Astronomer that helps you easily run your dbt Core projects as Airflow DAGs and Task Groups, all with just a few lines of code. We’ll walk through:
- Standard ways of running dbt (and when to utilize other methods)
- How Cosmos can be used to run and visualize your dbt projects in Airflow
- Common challenges and how to address them, including performance, dependency conflicts, and more
- How running dbt projects in Airflow helps with cost optimization
Webinar given on 9 July 2024
Sustainability requires ingenuity and stewardship. Did you know Pigging Solutions pigging systems help you achieve your sustainable manufacturing goals AND provide rapid return on investment.
How? Our systems recover over 99% of product in transfer piping. Recovering trapped product from transfer lines that would otherwise become flush-waste, means you can increase batch yields and eliminate flush waste. From raw materials to finished product, if you can pump it, we can pig it.
An invited talk given by Mark Billinghurst on Research Directions for Cross Reality Interfaces. This was given on July 2nd 2024 as part of the 2024 Summer School on Cross Reality in Hagenberg, Austria (July 1st - 7th)
How RPA Help in the Transportation and Logistics Industry.pptxSynapseIndia
Revolutionize your transportation processes with our cutting-edge RPA software. Automate repetitive tasks, reduce costs, and enhance efficiency in the logistics sector with our advanced solutions.
Comparison Table of DiskWarrior Alternatives.pdfAndrey Yasko
To help you choose the best DiskWarrior alternative, we've compiled a comparison table summarizing the features, pros, cons, and pricing of six alternatives.
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxSynapseIndia
Your comprehensive guide to RPA in healthcare for 2024. Explore the benefits, use cases, and emerging trends of robotic process automation. Understand the challenges and prepare for the future of healthcare automation
7 Most Powerful Solar Storms in the History of Earth.pdfEnterprise Wired
Solar Storms (Geo Magnetic Storms) are the motion of accelerated charged particles in the solar environment with high velocities due to the coronal mass ejection (CME).
Choose our Linux Web Hosting for a seamless and successful online presencerajancomputerfbd
Our Linux Web Hosting plans offer unbeatable performance, security, and scalability, ensuring your website runs smoothly and efficiently.
Visit- https://onliveserver.com/linux-web-hosting/
Measuring the Impact of Network Latency at TwitterScyllaDB
Widya Salim and Victor Ma will outline the causal impact analysis, framework, and key learnings used to quantify the impact of reducing Twitter's network latency.
The Rise of Supernetwork Data Intensive ComputingLarry Smarr
Invited Remote Lecture to SC21
The International Conference for High Performance Computing, Networking, Storage, and Analysis
St. Louis, Missouri
November 18, 2021
Support en anglais diffusé lors de l'événement 100% IA organisé dans les locaux parisiens d'Iguane Solutions, le mardi 2 juillet 2024 :
- Présentation de notre plateforme IA plug and play : ses fonctionnalités avancées, telles que son interface utilisateur intuitive, son copilot puissant et des outils de monitoring performants.
- REX client : Cyril Janssens, CTO d’ easybourse, partage son expérience d’utilisation de notre plateforme IA plug & play.
What's New in Copilot for Microsoft365 May 2024.pptx
Client Side Performance @ Xero
1. Client-Side Performance Sucks Craig Walker, Chief Technology Officer And what you can do to make it suck less. www.xero.com
2. Your typical internal network: Easier to control Easier to predict Knowledge of almost everything from LAN speed to operating system
3. There's a reason why the words “world” and “wide” are in the acronym Control and knowledge are limited to your own environment. Even how the packets fly around the internet is out of your control. www.xero.com
4. The HTTP Request Server Browser Receive Last Byte Send Last Byte Send Data Establish Connection Initial Connection Open Socket Initial HTTP Request First Byte Receive First Byte Send First Byte Content Download ISP Get IP DNS Lookup
5. 5% Server side performance often not the problem with response time 95% Most of the response time is taken up here
8. Focus on the front-end 75-95% of the end-user response time for Xero customers is spent on the front end Much easier to optimise than server side performance Greater potential for improvement – especially from an end-users point-of-view Proven to work
10. The giants who’s shoulders I’m standing on Yahoo! Exceptional Performance team http://developer.yahoo.com/performance/ Steve Souders Former Chief of Performance at Yahoo! Now at Google Creator of YSlow and the 14 Rules Author of High Performance Web Sites Stoyan Stefanov, Patrick Meenan, Julien Lecomte, Stuart Colville, Ed Eliot and many more …
11. Zip It! Significantly reduces download size – 60-80% saving on text based content 90% of browsers support compression Benefits ALL users Zip everything you can html (aspx), js, css, xml, txt, json (ashx, axd) Benefits you too: Reduces traffic costs Doesn’t require code changes
13. Reduce HTTP Requests Less components means a faster page Every request is an overhead Combine scripts Combine CSS Combine images into CSS Sprites Don’t rely on cache: 304’s are still requests
14. CSS Sprites Combine all small images into one large image Use CSS to control the displaying of each image
18. Maximise Parallel Downloads Most browsers are limited to 6 connections total and 2 connections per hostname Increase the number of hostnames to increase the number of parallel downloads (e.g., go.xero.com, gos1.xero.com, gos2.xero.com) Don’t overdo it! (DNS lookups are expensive so limit 2-4 domains) Browser Parallel Downloads Firefox 2 2 Firefox 3 6 Internet Explorer 7 2 Internet Explorer 8 6 Safari 3.1 4 Safari 4.0 4
20. Use a CDN Content Delivery Network Distributes content closer to the last mile Distribute your static content before distributing your dynamic content Akamai most popular but very expensive Xero utilises a rudimentary CDN using IP lookup to determine location
21. How it works: Images JS CSS <xsl:value-of select="Page:RegisterCSS('/common/style/xero.css','screen')"/> <xsl:value-of select="Page:RegisterJavascript('/common/scripts/xero.js'"/> <link rel="stylesheet" type="text/css" media="screen" href="https://nzs1.xero.com/common/style/xero.css" /> <script type="text/javascript" src="https://nzs2.xero.com/common/scripts/xero.js"></script> GET Request Response with HTML document Get location from IP
22. Maximise the cache Understand the ratio of cached vs uncached Add an Expires header Not just for images – should be used on all static content Set a “Never expire” or far future expires policy if you can Reduces HTTP requests – once component is served, the browser never asks for it again Date stamping in file names makes it easier Remove ETags ETags are another caching mechanism – sent with every request Uniquely created per web server – not good in web farms Just turn them off and use Expires headers instead
23. CSS external and on top Move all inline CSS to external style sheets for both reuse and caching Put all style sheet references at the top Firefox and IE will block rendering until all the CSS is downloaded Use <link> and NOT @import In IE @import is the same as putting <link> at the bottom
24. JavaScript external and on the bottom Move scripts to external files for both reuse and caching Promotes better script design Push scripts as low as possible Often difficult with document.write or with inline calls requiring loaded JavaScript Be pragmatic – think about splitting JavaScript into “must be loaded” and “can be loaded on demand” Scripts will block both downloading and rendering until parsed Remove duplicate scripts (IE has a habit of downloading them again)
25. Notice the parallel download here … … until we hit the JavaScript files where they come down sequentially, blocking any other downloads
26. Minify all static content CSS, JavaScript, XML, JSON, HTML can all be minified Not a replacement for gzipping but is a perfect accompaniment to it Lots of tools: JSMin CSSTidy YUI Compressor JavaScript obfuscation can also be useful – just test that your app still works afterwards
27. Optimise images Use PNGs instead of GIFs Avoid alpha filters – can block rendering and freeze the browser PNG8 is best and supported by IE6 (yes – even with transparency) Optimise further with PNGOUT or PNGCRUSH Make sure you have a favicon.ico Every browser will request it Best not to respond with a 404 Make it small and cacheable
28. Preloading … Preload components you’ll need in the future Unconditional preload Xero login page preloads all core components so that the dashboard experience is better Conditional preload Often based on where you think a user might go to next
29. Reduce cookie weight Cookie’s are sent back with every request Keep cookie size small and only store what’s required – use server-side storage for everything else Consider cookie free domains for static content
30. Keep it clean Choose a good Ajax library – don’t go writing this stuff yourself Always asynchronous Use JSON over XML Accessing JSON faster and cheaper Less overhead than XML Use GET requests over POSTs wherever possible POST is a 2-step process: send headers, send body POST without a body is essentially a GET anyway And make sure the response is zipped!
31. Things to take away Focus on the front-end Be an advocate for your users Don’t let designers get in the way of performance But they will so optimise, optimise, optimise!
32. YSlow Firebug extension Grades performance – not about response times but about how well a site has adopted the techniques suggested Response time inversely proportional to YSlow score – get as close to an A as possible to get the maximum performance gain
33. Fiddler Microsoft built HTTP debugging proxy Inspect HTTP traffic, tamper with incoming and outgoing data and debug performance issues Works with all browsers
34. AOL PageTest Internal AOL utility gone public Browser plug-in for Internet Explorer Visually displays underlying requests and provides suggestions on how to improve your response times Also available as an external web-based tester at www.webpagetest.org