A 30 minute presentation given to the Toronto Web Performance Meetup about Google's PageSpeed and the SPDY Protocol.
This presentation covers the following topics.
- What is PageSpeed, how to use and install.
- Should you use SPDY? Or wait for HTTP 2?
- Shortcomings of HTTP 1.1
implement lighthouse-ci with your web development workflowWordPress
This presentation is about implementing the performance as first approach in web development and a bit of real case study. Then implement the Lighthouse-CI in the development workflow to keep the site performance high.
In this presentation, I have shown how a webpage is loaded on your viewport after you request for the same. The process is simple. Once you click on the URL, the browser makes a request to the webserver. The request is processed by the webserver.
Web server files the response to the request and sends it to the browser. The requested page is sent to the web browser. The browser then loads and renders the page content. The requested page is then shown on the viewport.
A performance optimization presentation for WordCamp Sacramento 2016. Presented by Austin Gil.
This presentation addresses issues in design, development, and project management, where performance is most greatly affected. We look at various opportunities and techniques within each stage that may offer more speed. The subjects range from beginner to advanced with tips and advice that just about anyone can walk away with, and we end with a collection of recommended tools.
This presentation was designed so the slides would be useful even out of context of the presentation. Please enjoy.
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!
Large websites with large customer bases should have fast page loads no matter where your customers are coming from. In this day and age speed is expected. Getting there requires engineers to both have data and the ability to analyze and find problems.
This talk will address page load speed in two parts. A "cold" load where a user first comes to your site and a "warm" load which deals with intra-site page load speed. We will dive into the details of each page load and what is really going on. From network optimization to browser render performance, all things matter when it comes to optimizing the load of your web page. Furthermore, we will look into some tools that can be used to analyze and help developers discover and address problems.
implement lighthouse-ci with your web development workflowWordPress
This presentation is about implementing the performance as first approach in web development and a bit of real case study. Then implement the Lighthouse-CI in the development workflow to keep the site performance high.
In this presentation, I have shown how a webpage is loaded on your viewport after you request for the same. The process is simple. Once you click on the URL, the browser makes a request to the webserver. The request is processed by the webserver.
Web server files the response to the request and sends it to the browser. The requested page is sent to the web browser. The browser then loads and renders the page content. The requested page is then shown on the viewport.
A performance optimization presentation for WordCamp Sacramento 2016. Presented by Austin Gil.
This presentation addresses issues in design, development, and project management, where performance is most greatly affected. We look at various opportunities and techniques within each stage that may offer more speed. The subjects range from beginner to advanced with tips and advice that just about anyone can walk away with, and we end with a collection of recommended tools.
This presentation was designed so the slides would be useful even out of context of the presentation. Please enjoy.
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!
Large websites with large customer bases should have fast page loads no matter where your customers are coming from. In this day and age speed is expected. Getting there requires engineers to both have data and the ability to analyze and find problems.
This talk will address page load speed in two parts. A "cold" load where a user first comes to your site and a "warm" load which deals with intra-site page load speed. We will dive into the details of each page load and what is really going on. From network optimization to browser render performance, all things matter when it comes to optimizing the load of your web page. Furthermore, we will look into some tools that can be used to analyze and help developers discover and address problems.
Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve
JavaScript is great, but let's face it, being stuck with just JavaScript in the browser is no fun.
Why not write and run Ruby in the browser, on the client, and on the server as part of your next web application?
Sharing my slides on a talk I held at the Berlin-based FullStack JS meetup. Tips and tricks how I reduced our build time (full / incremental) from 60s / 4s to 8s / 300ms.
Full config:
https://gist.github.com/trueter/0e861403e59a9e27a476f3ad7ada1a89
Give us a visit at http://www.pixsy.com
PlayNode Conference 2012 (NodeConf 2012 in Korea) 에서 발표한 node.js 기반의 정적 페이지 블로그 엔진 하루프레스
하루프레스의 기능적인 특징, 철학 그리고 기술적인 특징을 통해 알아보는 개발 노하우에 대한 내용을 닮고 있습니다.
Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts
There’s no one-size-fits-all approach to metrics. In this session, Cliff Crocker and I walk through various metrics that answer performance questions from multiple perspectives — from designer and DevOps to CRO and CEO. You’ll walk away with a better understanding of your options, as well as a clear understanding of how to choose the right metric for the right audience.
Slides for my tutorial from Velocity 2014 on some of the more advanced features in WebPagetest.
Video is available on Youtube:
Part 1: http://youtu.be/6UeRMMI_IzI
Part 2: http://youtu.be/euVYHee1f1M
Presentation from webinar held on August 19th, 2020, with Xdebug developer Derick Rethans and Seravo CEO Otto Kekäläinen.
This presentation shows you how to use Xdebug (which is very easy with the Seravo WordPress development environment!) to make a record of what the WordPress PHP code does during a website page load, and how to use that information to optimize the performance of your WordPress site.
For a video recording and Dericks presentation see https://seravo.com/blog/webinar-xdebug-profile-php/
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
How to investigate and recover from a security breach in WordPressOtto Kekäläinen
Talk given at the first ever WordCamp Nordic on March 8th, 2019.
How to investigate and recover from a security breach – real-life experiences with WordPress
Sometimes the bad guys get in, despite all the protections and precautions. If that happens, there are many techniques that can be used to stop further damage, track down what the intruder did and how they got in. Finally the site needs to be cleaned up and re-opened for visitors. In this talk the most important techniques are presented along with real-life examples when they were used.
As developers or users, we all are concerned about our site's performance. ⚡
We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster
Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance.
http://bit.ly/2M14Jks
Building your WordPress website with Gatsby is super simple.
Let's learn how to build a WordPress website with gatsby i
ION Toronto, 11 November 2013: In this session, Tim will discuss the current state of IPv6 adoption across the globe, including statistics and lessons learned from and since World IPv6 Launch, and the next steps needed to move forward with IPv6 deployment.
Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve
JavaScript is great, but let's face it, being stuck with just JavaScript in the browser is no fun.
Why not write and run Ruby in the browser, on the client, and on the server as part of your next web application?
Sharing my slides on a talk I held at the Berlin-based FullStack JS meetup. Tips and tricks how I reduced our build time (full / incremental) from 60s / 4s to 8s / 300ms.
Full config:
https://gist.github.com/trueter/0e861403e59a9e27a476f3ad7ada1a89
Give us a visit at http://www.pixsy.com
PlayNode Conference 2012 (NodeConf 2012 in Korea) 에서 발표한 node.js 기반의 정적 페이지 블로그 엔진 하루프레스
하루프레스의 기능적인 특징, 철학 그리고 기술적인 특징을 통해 알아보는 개발 노하우에 대한 내용을 닮고 있습니다.
Metrics, metrics everywhere (but where the heck do you start?)Tammy Everts
There’s no one-size-fits-all approach to metrics. In this session, Cliff Crocker and I walk through various metrics that answer performance questions from multiple perspectives — from designer and DevOps to CRO and CEO. You’ll walk away with a better understanding of your options, as well as a clear understanding of how to choose the right metric for the right audience.
Slides for my tutorial from Velocity 2014 on some of the more advanced features in WebPagetest.
Video is available on Youtube:
Part 1: http://youtu.be/6UeRMMI_IzI
Part 2: http://youtu.be/euVYHee1f1M
Presentation from webinar held on August 19th, 2020, with Xdebug developer Derick Rethans and Seravo CEO Otto Kekäläinen.
This presentation shows you how to use Xdebug (which is very easy with the Seravo WordPress development environment!) to make a record of what the WordPress PHP code does during a website page load, and how to use that information to optimize the performance of your WordPress site.
For a video recording and Dericks presentation see https://seravo.com/blog/webinar-xdebug-profile-php/
In the beginning, progressive enhancement was simple: HTML layered with CSS layered with JavaScript. That worked fine when there were two browsers, but in today's world of multiple devices and multiple browsers, it's time for a progressive enhancement reboot. At the core is the understanding that the web is not print - the same rules don't apply. As developers and consumers we've been fooled into thinking about print paradigms for too long. In this talk, you'll learn just how different the web is and how the evolution of progressive enhancement can lead to better user experiences as well as happier developers and users.
This deck is a conference-agnostic one, suitable to be shown anywhere without site-specific jokes!
How to investigate and recover from a security breach in WordPressOtto Kekäläinen
Talk given at the first ever WordCamp Nordic on March 8th, 2019.
How to investigate and recover from a security breach – real-life experiences with WordPress
Sometimes the bad guys get in, despite all the protections and precautions. If that happens, there are many techniques that can be used to stop further damage, track down what the intruder did and how they got in. Finally the site needs to be cleaned up and re-opened for visitors. In this talk the most important techniques are presented along with real-life examples when they were used.
As developers or users, we all are concerned about our site's performance. ⚡
We sometimes have to face fierce battles ⚔️ to get our sites, just a few milliseconds faster
Gatsby, a modern blazing-fast static site generator for React.js, is gaining popularity ❤️ because of its performance, developer experience, and ecosystem. It follows Google's PRPL architectural pattern to boost your website's performance.
http://bit.ly/2M14Jks
Building your WordPress website with Gatsby is super simple.
Let's learn how to build a WordPress website with gatsby i
ION Toronto, 11 November 2013: In this session, Tim will discuss the current state of IPv6 adoption across the globe, including statistics and lessons learned from and since World IPv6 Launch, and the next steps needed to move forward with IPv6 deployment.
Why your slow loading website is costing you sales and how to fix itRobert Flournoy
Learn: Why your website MUST be fast to be competitive, how a page is loaded by the browser, how to measure page speed and 5 simple ways to speed up YOUR website
.
Fluent 2018: Tracking Performance of the Web with HTTP ArchivePaul Calvano
Have you ever thought about how your site’s performance compares to the web as a whole? Or maybe you’re curious how popular a particular web feature is. How much is too much JavaScript? The HTTP Archive has been keeping track of how the web is built since 2010. It enables you to find answers to questions about the state of the web past and present.
Paul Calvano explores how the HTTP Archive works, how people are using this dataset, and some ways that Akamai has leveraged data within the HTTP Archive to help its customers.
Part I: Introduction to Cloud Computing
- What is Cloud Computing?
- Classification of Cloud Computing
Part II: Introduction to Google App Engine
- What is Google App Engine?
- Why Google App Engine?
- Core APIs & Language Support
- Google App Engine for Business
- Google App Engine Customers
- Q&A
The Case for HTTP/2 - Internetdagarna 2015 - StockholmAndy Davies
HTTP/2 is here but why do we need it, how is it different to HTTP/1.1 and what does the mean for developers?
Slides from my talk at Internetdagarna 2015, Stockholm
Apigility is a tool introduced in 2013 by Zend and the Zend Framework community, designed to handle in a simple graphical interface the configuration, management and creation of APIs, and provides classes to support API development.
This presentation is a quick but hopefully interesting introduction to this tool, aiming to demonstrate some of the most important features.
The O'Reilly Velocity Conference Europe was held in London from 13th to 15th November 2013. In a few days I shared my notes with my fellow webspeeders at the Web Performance Barcelona Meetup. These are the slides I used.
Supercharge Application Delivery to Satisfy UsersNGINX, Inc.
Users expect websites and applications to be quick and reliable. A slow user experience can have a significant impact on your business. Join us for this webinar where we will show you a number of ways you can use NGINX and other tools and techniques to supercharge your application delivery, including:
- Client Caching
- Content Delivery Networks (CDN)
- OCSP stapling
- Dynamic Content Caching
View full webinar on demand at http://bit.ly/nginxsupercharge
10 things you can do to speed up your web app today stir trek editionChris Love
Why is Web Performance Optimization Important and what are some things developers can do to ensure their applications perform well and please end users?
Apigility is a tool introduced in 2013 by Zend and the Zend Framework community, designed to handle in a simple graphical interface the configuration, management and creation of APIs, and provides classes to support API development.
This presentation is a quick but hopefully interesting introduction to this tool, aiming to demonstrate some of the most important features.
10 Things You Can Do to Speed Up Your Web App TodayChris Love
Web Performance is a serious issues these days. 80% of web performance issues are in the client. Many developers either do not realize what they are leaving on the table and how that affects the success of their application. These are 10 things any web developer can do in about 30-60 minutes to drastically increase page load times and thus increase the application's profitability.
Join us for this 40-minute webinar where we will do a recap of the announcements made during Cloudflare’s inaugural Speed Week. Cloudflare released several new products that are designed to improve the web experience for our customers. We’ll explore each of the announcements that include:
- How Cloudflare Argo is getting smarter and faster
- How HTTP/2 requests can be handled and prioritised more effectively
- Simplify image management, and reduce the number of image variants needed for mobile and other display types
- Improving the load times of progressive images with HTTP/2 prioritisation
- Optimising the delivery of live video stream content with reduced lag
- Supporting a lightweight, faster JavaScript framework
We have also specially invited Harshad Rotithor, Chief Architect of Carousell, to share on how the smartphone and web-based marketplace for buying and selling new and used goods, has successfully leveraged on Cloudflare's products and services to improve its APAC business performance.
If web performance matters to you, and you ever needed a reason to try Cloudflare, this webinar is especially for you. Learn how we’re different, and how we’re challenging the status quo, believing that fast is never fast enough.
How Do you Scale for both Predictable and Unpredictable Events on such a Larg...Blake Crosby
The Canadian Broadcasting Corporation is Canada's national public broadcaster. Our website, www.cbc.ca, is one of the largest and most visited in the country, delivering 700 million hits per day on an origin infrastructure composed of only six web servers.
With the right combination of publishing methods, content delivery networks and fine-tuned caching rules, the CBC’s infrastructure has enough headroom to handle spikes of 40x normal traffic during major news events.
How do you scale to almost infinite capacity when you can't predict the world’s events? It's impossible to prepare for that influx of visitors when a celebrity dies, a natural disaster occurs or for other breaking news. Scaling for predictable events is easier, but although we know when the next Federal Election, Olympics Games or FIFA Cup is scheduled, these events present different challenges. Balancing the architecture for both scenarios is important.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
1.Wireless Communication System_Wireless communication is a broad term that i...
PageSpeed and SPDY
1. Page Speed and SPDY | Toronto Web Performance Group
July 8, 2014 | Blake Crosby
2. PageSpeed & SPDY | July 8, 2014
• Quick Introduction
• Using PageSpeed
• An introduction to SPDY
• The future of the web: HTTP 2.0.
• Questions
Agenda
3. PageSpeed & SPDY | July 8, 2014
• Twitter: @blakecrosby
• E-Mail: me@blakecrosby.com
• Personal Website: http://www.blakecrosby.com/
• GitHub: https://github.com/blakecrosby/
I’m an Operations Engineer at Fastly, in San Francisco, California.
Blake Crosby
5. PageSpeed & SPDY | July 8, 2014
• It’s split into two components:
• A browser plugin and web service for analyzing your site
• A module for Apache and Nginx to perform FEO on the fly.
What’s PageSpeed?
http://developers.google.com/speed/pagespeed/insights/
6. PageSpeed & SPDY | July 8, 2014
• Gives you a web performance score (out of 100 points).
• Also has an API (used by HTTP Archive)
PageSpeed Insight
Website PageSpeed Score
Google 98
Facebook 99
YouTube 93
Yahoo 97
HTTP Archive, May 15, 2014 Run
7. PageSpeed & SPDY | July 8, 2014
PageSpeed Suggestions
HTTP Archive, May 15, 2014 Run
8. PageSpeed & SPDY | July 8, 2014
Installation
• Available as a package for Debian, Ubuntu, Centos, and Fedora.
• Installs two configuration files: pagespeed.conf and pagespeed_libraries.conf
9. PageSpeed & SPDY | July 8, 2014
Turning On Features
• By default mod_pagespeed doesn’t enable certain features (for safety
reasons)
• In order to Minify Javascript & CSS, and recompress images:
• ModPagespeedEnableFilters recompress_images
• ModPagespeedEnableFilters collapse_whitespace
• ModPagespeedEnableFilters rewrite_javascript
• Keep in mind that your output is now different than what is stored on disk!
10. PageSpeed & SPDY | July 8, 2014
Results
73 → 86
• Could save 63% (14KB) of bytes downloaded by compressing Twitter images
• Could decrease page render time by not using blocking JS
12. PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
13. PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
14. PageSpeed & SPDY | July 8, 2014
The Problem with HTTP
Source: High Performance Browser Networking By: Ilya Grigorik
15. PageSpeed & SPDY | July 8, 2014
• If the bottleneck is TCP and network latency, why don’t we just use UDP?
So, Wait!! What about UDP?
QUIC
Blakes-mbp:~ bcrosby$ curl -I http://www.google.com/
HTTP/1.1 302 Found
Cache-Control: private
Content-Type: text/html; charset=UTF-8
Location: http://www.google.ca/?gfe_rd=cr&ei=Y_27U-7WG4mN8QfVioGoCQ
Content-Length: 258
Date: Tue, 08 Jul 2014 14:17:07 GMT
Server: GFE/2.0
Alternate-Protocol: 80:quic
16. PageSpeed & SPDY | July 8, 2014
• Developed SPDY in early 2009, with the following goals in mind:
• Target a 50% reduction in page load time (PLT).
• Avoid the need for any changes to content by website authors.
• Minimize deployment complexity, avoid changes in network infrastructure.
• Develop this new protocol in partnership with the open-source community.
• Gather real performance data to (in)validate the experimental protocol.
Google: We can fix this!
Source: High Performance Browser Networking By: Ilya Grigorik
17. PageSpeed & SPDY | July 8, 2014
Example of SPDY Connection
• chrome://net-internals/#spdy
18. PageSpeed & SPDY | July 8, 2014
HTTP 2.0
Source: High Performance Browser Networking By: Ilya Grigorik
19. PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Compressed Headers
Source: High Performance Browser Networking By: Ilya Grigorik
20. PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Multiplexing
Source: High Performance Browser Networking By: Ilya Grigorik
21. PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Server Push
Source: High Performance Browser Networking By: Ilya Grigorik
22. PageSpeed & SPDY | July 8, 2014
HTTP 2.0 Backward Compatibility
Source: High Performance Browser Networking By: Ilya Grigorik
23. PageSpeed & SPDY | July 8, 2014
Should You Use SPDY?
• Ask yourself:
• Is the majority of your traffic over HTTPS?
• Am I using load balancing software/hardware?
• Are your clients typically over high latency connections (satellite)?
• Are you comfortable using an experimental protocol?
• Don’t mind delivering assets over SPDY for only ~60% of your visitors*
* From http://caniuse.com/#feat=spdy
24. PageSpeed & SPDY | July 8, 2014
• HTTP 2 will replace SPDY by 2015. (Final draft of specification being
submitted this November)
• HTTP 2 support already in CURL and libcurl.
• F5 Load balancers support HTTP 2.
Current Status
Recommendation: Wait for HTTP 2 instead of implementing SPDY
Plugin is handy to test sites that are not available publicly (such as development or QA versions of your site)
Analyses your site for common optimizations (cache times, css/js/html minification, image sizes and types)
Top 4 sites by Alexa Ranking
Sample output for my personal site.
Demo output of tool
Show configuration file
There are a lot of optimizations. Be sure to check out the entire list at: https://developers.google.com/speed/pagespeed/module/filters
Was able to improve my page score from 73 to 86.
3rd party scripts were keeping my score low.
3rd party Word Press template has custom JS.
Didn’t have to release code, or a new version of the site.
The TCP three way handshake.
Typical connection flow without using keepalives. (284ms)
Multiply this by 40 or 50 requests (for JS, CSS, Images, etc..) and the load time increases.
Using Keepalives helps (Loading HTML and CSS) reduced the page load time to 228ms.
With the TCP session open, no need for another handshake. However improvements can still be made.
A study done by Google tested the impact of page load times as bandwidth increases vs. decreasing latency.
Notice that performance stops increasing past ambit
However, page load time decreases linearly as latency decreases.
QUIC: Quick UDP Internet Connections
An experimental protocol to send HTTPS traffic over UDP packets.
You can enable it in Chrome chrome://flags
SPDY is being used by Twitter, Google, and Facebook.
It only works under HTTPS / encrypted connections.
The IETF is using the lessons learned from SPDY to help develop HTTP 2.0
SPDY uses key value pairs for header information. And in chrome developer tools, the headers show up like this (with using colons).
HTTP is now a binary protocol.
Duplication of headers have been eliminated. Header state is saved between requests.
Remaining header data is then compressed using
Object requests can be sent to the origin while responses are being sent.
No need to wait for the entire response to be returned before you can issue a new GET.
No need to explicitly ask for specific resources any more. Reduces latency.
Server can push associated page assets without having to wait for the browser to ask for them.
1. Special Upgrade header to tell the server that the client supports HTTP 2
2. HTTP 2.0 settings payload encoded in base64
3. If the server declines the upgrade, than the object is returned via 1.1
4. If the server accepts the upgrade, then an HTTP 101 status code is sent along with the HTTP 2.0 payload.
The majority of the SPDY benefits are found in HTTP 2
If you are using a CDN, SPDY support is probably already available.