The document discusses how mobile sites are getting slower due to larger page sizes from images, CSS, JavaScript and fonts. It provides tips for optimizing images, such as using responsive images and smaller image sizes. It also recommends prioritizing critical content over non-essential elements like unnecessary JavaScript and web fonts to improve page load times.
The document provides a list of small ideas and asks to write the big idea for each set. The small ideas include types of coins, bills and cards; animals, plants and trees; colors, shapes and numbers; sizes, numbers and letters; and shapes, colors and numbers. Video game options include Angry Birds, Madcaps and Pacman. Household items include utensils, cleaners and tools. Food categories include vegetables, fruits and cakes (listed twice). Appliances, gadgets and utensils are also listed. The document prompts the reader to identify the overarching big idea or category that each set of small ideas falls under.
Gilas Pilipinas defeated China 80-79 to win the bronze medal at the 2014 FIBA Asia Cup in Wuhan, China. Ranidel De Ocampo led the Philippines with 18 points while Makan scored 23 points for China. The game was close throughout with the lead changing hands multiple times. Lee sealed the win for Gilas Pilipinas by making 3 free throws with 6.7 seconds remaining after being fouled on a 3-point attempt by Gao with no time left on the clock.
This document summarizes several traditional Filipino games:
- Tayukok/Agawan base involves two teams trying to tag members of the opposing team who are hiding at their base.
- Luksong tinik involves players jumping over a tinik (bundle of sticks) held up by two other players. The tinik is raised as the game progresses.
- Bahay-bayahan is a role-playing game where children pretend to be family members doing household chores.
- Takyan involves kicking bundled rubber bands upwards and scoring based on the number of times the bundles are hit.
The document introduces music basics including identifying pitch names on the staff, reading simple musical notations, and introduces the world of music through a song. It discusses the grand staff which uses ledger lines to notate notes above and below the regular staff lines and spaces. It asks multiple choice questions about musical elements like clefs, staff, and pitch names.
The document provides a list of small ideas and asks to write the big idea for each set. The small ideas include types of coins, bills and cards; animals, plants and trees; colors, shapes and numbers; sizes, numbers and letters; and shapes, colors and numbers. Video game options include Angry Birds, Madcaps and Pacman. Household items include utensils, cleaners and tools. Food categories include vegetables, fruits and cakes (listed twice). Appliances, gadgets and utensils are also listed. The document prompts the reader to identify the overarching big idea or category that each set of small ideas falls under.
Gilas Pilipinas defeated China 80-79 to win the bronze medal at the 2014 FIBA Asia Cup in Wuhan, China. Ranidel De Ocampo led the Philippines with 18 points while Makan scored 23 points for China. The game was close throughout with the lead changing hands multiple times. Lee sealed the win for Gilas Pilipinas by making 3 free throws with 6.7 seconds remaining after being fouled on a 3-point attempt by Gao with no time left on the clock.
This document summarizes several traditional Filipino games:
- Tayukok/Agawan base involves two teams trying to tag members of the opposing team who are hiding at their base.
- Luksong tinik involves players jumping over a tinik (bundle of sticks) held up by two other players. The tinik is raised as the game progresses.
- Bahay-bayahan is a role-playing game where children pretend to be family members doing household chores.
- Takyan involves kicking bundled rubber bands upwards and scoring based on the number of times the bundles are hit.
The document introduces music basics including identifying pitch names on the staff, reading simple musical notations, and introduces the world of music through a song. It discusses the grand staff which uses ledger lines to notate notes above and below the regular staff lines and spaces. It asks multiple choice questions about musical elements like clefs, staff, and pitch names.
Dokumen ini membahas tentang Growth Rate (Tingkat Pertumbuhan) dan cara menghitungnya untuk menganalisis kinerja keuangan suatu perusahaan. Growth rate digunakan untuk melihat pertumbuhan penjualan, laba, arus kas, dan metrik keuangan lainnya secara konsisten demi memilih perusahaan dengan kinerja baik. Dokumen ini juga menjelaskan rumus-rumus seperti CAGR (Compound Annual Growth Rate) dan CMGR (Compounding Monthly Growth
This document outlines a lesson plan for teaching 3rd grade students to visualize and represent numbers from 1,001 to 10,000. It includes learning competencies, procedures, examples, and assessments. Students will practice writing numbers using blocks, flats, longs and squares to represent thousands, hundreds, tens and ones. They will also visualize numbers using number discs and drawings. The goal is for students to develop understanding of numerals up to 10,000.
English 4 misosa following directions using sequence signalsFlordeliza Betonio
Here are the answers in my notebook:
1. a
2. b
3. b
4. a
5. c
Nasal Spray for Congestion
Use: Spray 1-2 sprays in each nostril as needed for congestion. Do not exceed 6 sprays per day.
Dr. Jane Tan
1. Spray it into each nostril
2. Twice (2 sprays in each nostril as needed, not exceeding 6 sprays per day)
Invasion games are team sports where the objective is to invade the opposing team's territory while scoring points. They involve carrying, throwing, catching, or kicking a ball into a target area. Examples include rugby, basketball, lacrosse, hockey, soccer, ultimate frisbee, and water polo. Key skills include passing, receiving, dodging, changing direction, spatial awareness, anticipation, and maintaining possession of the ball or object. Attacking strategies focus on keeping possession, avoiding defenders, and creating space to attack the goal, while defensive strategies defend the goal and space and try to regain possession.
It's about visualizing numbers through the use of flats, long and squares or you may use number discs to further explain how many thousands, hundreds, tens or ones the number is. A grade 3 lesson where you can use numbers also up to 10, 000 as your subject matter.
This document discusses the proper elements to observe when planting trees and fruit-bearing trees using technology. It identifies key factors like climate, temperature, sunlight, soil, and moisture that affect plant growth. The document also outlines the general steps for proper transferring of planting trees, which includes choosing a suitable location, digging holes, carefully placing seedlings, covering roots with soil, and watering. Conducting surveys using technology can help identify these important elements to ensure higher survival rates for planted trees and fruits.
This document provides a lesson plan for teaching students about using "born in" and "born on" correctly. It includes objectives, examples, drills identifying places, a review of a previous lesson, a motivational song, a dialogue where students introduce themselves with their birthplace and date, discussion questions, a generalization, and applications like self-introductions and a group sharing activity. Students are also given a homework assignment to list 5 four-letter words.
Speed matters, So why is your site so slow?Andy Davies
Slides from my talk at ReDevelop 2015
Covers business case for web performance, along with the fundamentals of how latency and the critical rendering path affect page load performance
The document discusses Microsoft's mobile browser, Internet Explorer Mobile, covering its features such as a refreshed user interface, support for widgets and geolocation services, and demonstrations of browsing and using maps and location-based applications. It provides an overview of Internet Explorer Mobile's capabilities and improvements, including its support for a more optimized mobile experience, full browsing functionality, and tools to help manage data consumption.
Dokumen ini membahas tentang Growth Rate (Tingkat Pertumbuhan) dan cara menghitungnya untuk menganalisis kinerja keuangan suatu perusahaan. Growth rate digunakan untuk melihat pertumbuhan penjualan, laba, arus kas, dan metrik keuangan lainnya secara konsisten demi memilih perusahaan dengan kinerja baik. Dokumen ini juga menjelaskan rumus-rumus seperti CAGR (Compound Annual Growth Rate) dan CMGR (Compounding Monthly Growth
This document outlines a lesson plan for teaching 3rd grade students to visualize and represent numbers from 1,001 to 10,000. It includes learning competencies, procedures, examples, and assessments. Students will practice writing numbers using blocks, flats, longs and squares to represent thousands, hundreds, tens and ones. They will also visualize numbers using number discs and drawings. The goal is for students to develop understanding of numerals up to 10,000.
English 4 misosa following directions using sequence signalsFlordeliza Betonio
Here are the answers in my notebook:
1. a
2. b
3. b
4. a
5. c
Nasal Spray for Congestion
Use: Spray 1-2 sprays in each nostril as needed for congestion. Do not exceed 6 sprays per day.
Dr. Jane Tan
1. Spray it into each nostril
2. Twice (2 sprays in each nostril as needed, not exceeding 6 sprays per day)
Invasion games are team sports where the objective is to invade the opposing team's territory while scoring points. They involve carrying, throwing, catching, or kicking a ball into a target area. Examples include rugby, basketball, lacrosse, hockey, soccer, ultimate frisbee, and water polo. Key skills include passing, receiving, dodging, changing direction, spatial awareness, anticipation, and maintaining possession of the ball or object. Attacking strategies focus on keeping possession, avoiding defenders, and creating space to attack the goal, while defensive strategies defend the goal and space and try to regain possession.
It's about visualizing numbers through the use of flats, long and squares or you may use number discs to further explain how many thousands, hundreds, tens or ones the number is. A grade 3 lesson where you can use numbers also up to 10, 000 as your subject matter.
This document discusses the proper elements to observe when planting trees and fruit-bearing trees using technology. It identifies key factors like climate, temperature, sunlight, soil, and moisture that affect plant growth. The document also outlines the general steps for proper transferring of planting trees, which includes choosing a suitable location, digging holes, carefully placing seedlings, covering roots with soil, and watering. Conducting surveys using technology can help identify these important elements to ensure higher survival rates for planted trees and fruits.
This document provides a lesson plan for teaching students about using "born in" and "born on" correctly. It includes objectives, examples, drills identifying places, a review of a previous lesson, a motivational song, a dialogue where students introduce themselves with their birthplace and date, discussion questions, a generalization, and applications like self-introductions and a group sharing activity. Students are also given a homework assignment to list 5 four-letter words.
Speed matters, So why is your site so slow?Andy Davies
Slides from my talk at ReDevelop 2015
Covers business case for web performance, along with the fundamentals of how latency and the critical rendering path affect page load performance
The document discusses Microsoft's mobile browser, Internet Explorer Mobile, covering its features such as a refreshed user interface, support for widgets and geolocation services, and demonstrations of browsing and using maps and location-based applications. It provides an overview of Internet Explorer Mobile's capabilities and improvements, including its support for a more optimized mobile experience, full browsing functionality, and tools to help manage data consumption.
Data and Behavior Change: Is Seeing Believing, and is That Enough?Sustainable Brands
How do we drive behavior change by enabling easy digestion of one's consumption behavior, or the context of one's social circles? What hard evidence do we have that 'recently liberated,' easily accessible data in energy use, water use, nutrition, and life/work satisfaction is changing behavior? What have we learned about user/consumer reactions to different types of data visualization and what advice do respective solution providers have for brands entering their own data transparency journeys aiming to attract or change customers, employees and other stakeholders?
This document provides information about the Sysview Confidential DataBoard, a digital signage and interactive whiteboard product. It describes the key features and functions of the DataBoard, including its touchscreen capabilities, automatic recording and sharing of audio and visual materials, ability to display various types of media content, and remote management system. Applications of the DataBoard discussed include modern digital education, conferences, multimedia classrooms, mobile cinemas, and digital signage.
This document summarizes Barack Obama's successful 2008 presidential election campaign, which made innovative use of internet technologies and social media. It discusses how Obama's campaign embraced new forms of online organizing, fundraising, and mobilizing volunteers. Through social networks, online videos, and interactive web platforms, Obama's campaign engaged and energized grassroots supporters, particularly younger voters, helping propel him to victory and make history as the first African American president.
The document discusses various topics in a disorganized manner with many repeated phrases and symbols. It touches on industry trends in the early 2000s, including the growth of outsourcing and its impact on manufacturing jobs. It also mentions workforce training programs and the need to retrain displaced workers.
This document provides an overview and agenda for a presentation on cloud computing technologies and the cloud services model. It discusses different categories of cloud services including Software as a Service (SaaS), Platform as a Service (PaaS), and Infrastructure as a Service (IaaS). Specific examples are provided for each category. The presentation also covers technological developments in cloud computing and the transition to cloud-based services and applications.
UGC allows users to generate and share content such as text, images, and videos by placing it on online platforms for others to view. Examples of UGC include blogs, wikis, video and photo sharing sites, podcasts, microblogging, and social networks. Research estimates that by 2010, the number of times UGC content is downloaded will exceed 650 billion times, generating $8.5 billion in revenue for UGC-based businesses. Common categories of UGC include blogs, wikis, video and photo sharing sites, podcasts, microblogging, social networks, news sites, functional tools, and educational content.
Social commerce is a subset of e-commerce that uses social media to assist with online buying and selling. It allows consumers to get opinions from friends on products and shop online in a synchronous way similar to in-person shopping. Social commerce adds value by connecting social networks to vendors, putting virtual "storefronts" in social spaces, and allowing discussion of products. Businesses can also enhance offline products with online features and provide extra value to current customers through social commerce.
This document discusses using Web APIs, specifically the Google Chart API, to generate charts and graphs. It provides:
1) An overview of what a Web API is and how it can be used to access functionality from another application over HTTP.
2) A description of the Google Chart API and how it can be used to generate charts as PNG images by specifying parameters in a URL.
3) Details on common parameters for the Google Chart API including how to specify chart size, data, type, and colors.
This document provides an overview of the iPhone and tips for designing mobile web content for the iPhone. It discusses iPhone features like screen orientation, touch gestures, and Safari capabilities. It also provides guidance on using CSS, XHTML, and media queries to create responsive designs that work across iPhone and other mobile devices. Key topics include liquid layouts, viewport settings, touch targets, and CSS3 properties like border-radius and multiple backgrounds.
This document provides guidelines and downloadable assets for branding and promotional materials for an organization called NowWeMove. It includes sections on logo usage, colors, and formats; key visuals and graphics; typography guidelines and font family; and templates for posters, outdoor advertising, event banners, folders, promotional merchandise, online and offline materials. The document emphasizes adhering to style rules for consistency in representing the NowWeMove brand across different channels and materials.
This monthly trend report from Trendbird provides information on emerging global trends and industry issues from November 1st to 30th, 2008. It offers a trend analysis service that filters crowdsourced data and daily updates on trends to help businesses anticipate future opportunities. The report also references Trendbird's trend database, sector experts, and global benchmarking to deliver practical information and new business ideas to clients.
The document discusses the transition from Web 1.0 to Web 2.0 and the implications for religious organizations. It notes that many religious groups have established websites but mainly focus on information dissemination rather than interactive sharing. It suggests religious organizations should embrace the collaborative and participatory principles of Web 2.0 by allowing free sharing of user-generated content and moving away from a top-down approach.
This document provides information about Google Summer of Code 2008 including:
1) It is a program that allows students to work on open source projects over the summer.
2) Important application dates are listed ranging from February 25th to April 21st.
3) Eligible student projects include coding, documentation, design work, and more over the summer period.
This document discusses TypeCast, an open source mobile blogging platform developed by Six Apart. It filters HTML for different mobile carriers in Japan, splitting content into multiple pages if needed. It uses the Atom format and API to access blog content and generates common HTML. Performance is optimized by caching Atom feeds and generated HTML. The goal is to make Six Apart's blogging platforms accessible on mobile via the Atom API.
This document summarizes the technical challenges of blog mining and analysis in Chinese. It discusses how the large volume of Chinese social media data presents opportunities but also challenges from the Chinese language itself, including word segmentation, ambiguity, and network language. It also covers the need for multi-dimensional analysis of data over time on topics, sentiments, industries and products to gain deeper insights. Solutions proposed include using OLAP data cubes to enable fast, flexible analysis of aggregated blog data.
Chinese Blogger Conference CIC Presentation SlidesDenis Yu
This document discusses the technical challenges of blog mining and analysis in Chinese. It provides statistics on internet and blog usage in China and explores natural language processing challenges like word segmentation for the Chinese language. It also covers approaches to blog content categorization, sentiment analysis, and data processing techniques like OLAP for multi-dimensional analysis of blog data. Finally, it argues that while Chinese language analysis presents major challenges, technologies are becoming increasingly mature to make better sense of data from blogs and social media in China.
Technical challenge of Blog mining and analysisDenis Yu
This document discusses the technical challenges of blog mining and analysis in Chinese. It provides statistics on internet and blog usage in China and explores natural language processing challenges like word segmentation for the Chinese language. It also covers approaches to blog content categorization, sentiment analysis, and data processing techniques like OLAP for multi-dimensional analysis of blog data. Finally, it argues that while Chinese language analysis presents major challenges, technologies are becoming increasingly mature to make better sense of data from blogs and social media in China.
AB Testing, Ads and other 3rd party tags - London WebPerf - March 2018Andy Davies
Talk at Smashing Conf - 7th Feb 2018 (Video - https://vimeo.com/254703766)
Explores some of the issues that 3rd-party tags introduce when we add them to our sites, some ways of measuring the impact, and challenges we still have
AB Testing, Ads and other 3rd party tags - SmashingConf London - 2018Andy Davies
Talk at Smashing Conf - 7th Feb 2018 (Video - https://vimeo.com/254703766)
Explores some of the issues that 3rd-party tags introduce when we add them to our sites, some ways of measuring the impact, and challenges we still have
Inspecting iOS App Traffic with JavaScript - JSOxford - Jan 2018Andy Davies
This document discusses inspecting iOS app traffic with JavaScript by injecting scripts using Frida. It demonstrates capturing encrypted network traffic from an iOS app, extracting the TLS master secret and client/server randoms using a Frida script, and sending these values to the host computer to allow decrypting the traffic with Wireshark. The key steps are: using Frida to inject a script into an app, hooking the TLS PRF function to extract secret values, and sending these to the host to decrypt the HTTPS traffic in Wireshark. With these techniques, patterns in encrypted app traffic can be observed.
Slides from my talk at Bristol WebPerf Meetup 2017-07-20 where I talked about some of the approaches I use to persuade people that they should invest in making their sites faster
Speed: The 'Forgotten' Conversion FactorAndy Davies
Speed is a critical factor when it comes to converting browsers into buyers but it's often forgotten and other factors prioritised instead. Using real data from UK retailers this talk explores the relationship between speed and conversion
Building an Appier Web - London Web Standards - Nov 2016Andy Davies
Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead.
Slides from talk at London Web Standards, Nov 2016
Building an Appier Web - Velocity Amsterdam 2016Andy Davies
Explores progressive web apps, what advantages they have versus native apps, how to build, and test them, and some of the challenges we still have ahead.
Slides from talk at Velocity Amsterdam 2016
The Case for HTTP/2 - GreeceJS - June 2016Andy 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 GreeceJS in Athens, June 2016
Slides from my talk at NCC Group's Web Performance Day in May 2016.
Compares the features of apps and the web, what's great about each and explores some of the technologies that will allow us to build websites that can deliver native like experiences.
The Fast, The Slow and The Unconverted - Emerce Conversion 2016Andy Davies
Slides from my talk at Emerce Conversion, Amsterdam on the importance of performance(page speed) for conversion.
Explore some of the performance issues we face when relying on third-party CRO products / services
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
The Case for HTTP/2 - EpicFEL Sept 2015Andy Davies
HTTP/2 is here but why do we need it, and how is it different to HTTP/1.1?
Video - https://www.youtube.com/watch?v=ob-CnA9YmiI
These are the slides from my talk at Front-End London's one day conference, EpicFEL
HTTP/2 addresses limitations in HTTP/1.x by multiplexing requests over a single TCP connection, compressing headers, and allowing servers to push responses. It leads to more efficient use of network resources and faster page loads. While browser support is good, server implementations are still maturing and need to fully support HTTP/2 features like streams, dependencies, and server push to provide optimizations. Efficient TLS is also important to avoid delays in taking advantage of HTTP/2 performance benefits.
HTTP/2 provides improvements over HTTP/1.1 such as multiplexed requests, header compression and priority hints from browsers that can reduce latency. While it shows benefits in testing, real-world impacts may be more modest depending on server and client configurations. Further optimizations are still needed and HTTP/2 opens up new possibilities around features like server pushing and progressive content delivery that could enhance performance.
This document discusses the importance of website speed and performance. It notes that most top retail sites take over 3 seconds to load critical content, and median page load times have slowed by 23% year-over-year. Faster sites see benefits like 10% higher conversions. Network latency has a greater impact on performance than bandwidth. Techniques like preloading fonts and images can help mitigate latency. Frameworks and features like service workers may also help if designed deliberately for performance. Regular measurement and setting performance budgets are recommended to build fast user experiences.
Talk from The Web Is in Cardiff, October 2014 exploring the business case for web performance, and some of the underlying factors that can make sites slow
Are Today’s Good Practices… Tomorrow’s Performance Anti-Patterns?Andy Davies
Talk from Akamai Edge 2014 looking at some of our current web performance optimisation practices and how they may need to change as new standards and protocols emerge
Using ScyllaDB for Real-Time Write-Heavy WorkloadsScyllaDB
Learn about major architectural shifts that enable new levels of elasticity and operational simplicity
ScyllaDB just launched the first release featuring our new “tablets” architecture. Tablets builds upon a multiyear project to re-architect our legacy ring architecture. Our metadata is now fully consistent, thanks to the assistance of the Raft consensus protocol. Together, these changes enable new levels of elasticity, speed, simplicity, and efficiency. Data is dynamically redistributed as the workload and topology evolve. New nodes can be spun up in parallel and start adapting to the load in near real-time.
Join ScyllaDB Co-founder Dor Laor to learn what this new approach means for:
- Rapidly responding to traffic spikes without overprovisioning
- Performing safe, concurrent, fast bootstrapping
- Simplifying cluster administration (e.g., cleanup, repair, tombstone garbage collection)
- Increasing efficiency and eliminating overprovisioning
Using ScyllaDB for Real-Time Write-Heavy Workloads
Making Mobile Sites Faster
1. Making Mobile Sites Faster
@andydavies
NCC Group, Oct 2015
http://www.flickr.com/photos/b-tal/156919562
2. The mobile web is under threat…
Digital media usage time is exploding right now, and it’
predominantly being driven by mobile apps.
476,553 480,967 550,522
409,847
621,410
778,95477,081
97,440
118,299
0
200,000
400,000
600,000
800,000
1,000,000
1,200,000
1,400,000
1,600,000
Jun-2013 Jun-2014 Jun-2015
TotalMinutes(MM)
Desktop Mobile App Mobile Browser
Growth in Digital Media Time Spent
Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience
+53%
vs. 2013
+90%
vs. 2013
+16%
vs. 2013
3. And mobile audience growth is being driven more by m
properties, which are actually bigger and growing faste
Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties
Source: comScore Mobile Metrix, U.S., Age 18+
-
1,000
2,000
3,000
4,000
5,000
6,000
7,000
8,000
9,000
10,000
Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015
UniqueVisitors(000)
Apps Mobile Web +42%
y/y
+21%
y/y
Or is it?
5. “At the beginning of 2013 mobile (excluding tablet)
accounted for 26% of our traffic, and we ended the
year with it contributing 33%.”
Stuart McMillan, Schuh
As of Feb 2015 - 45%
6. “Historically, mobile baskets have always been
lower value than desktop but just before
Christmas the difference was only about 6%”
Stuart McMillan, Schuh
9. “We’ve remade the Internet in our image… obese.”
Jason Grigsby
http://www.flickr.com/photos/mrtopher/1414159786
10. Mobile Pages are Growing
0
100
200
300
400
500
600
700
800
900
1,000
1,100
1,200
1,300
1,400
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
Size doubled in just
three years!
11. We’re relying on ever faster phones and networks
http://www.flickr.com/photos/willposh/3825768273/
12. 4G isn’t going to bail us out
GSMA Intelligence + operators
Estimated 20% of connections will be LTE by end of 2017
77.3M
mobile connections
2-3M 4G
connections
14. So many devices… so much variation…
http://www.flickr.com/photos/adactio/12674230513
15. Meet the $25 Smartphone
http://www.flickr.com/photos/mozillaeu/12748349115
16. Networks are Improving
2G 2.5G 3G 4G WiFi
Faster, Lower Latency???
Special networks…
Conference, Hotel, Coffee shop WiFi
17. Latency is still the big issue
“In 2012, the average worldwide RTT to
Google is still ~100ms, and ~50-60ms within
the US.”
http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/
“we are looking at 100-1000ms RTT range
on mobile”
Ilya Grigorik
19. 3G Radio Resource Control
http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf
IDLE CELL_FACH
CELL_DCH Idle for 5s
Idle for 12s
1-2s delay!
Exact timings vary and depend on carrier NOT device
1s delay
22. HTML size isn’t changing much
0
10
20
30
40
50
60
70
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
23. Images are the Bulk of Download
0
100
200
300
400
500
600
700
800
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
24. Time to bury bitmapped images?
http://www.flickr.com/photos/tonyjcase/7183556158
30. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
srcset specifies the images and their width
31. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
sizes specifies how they should be displayed at each window width
32. <img src="cat.jpg" alt="cat"
srcset="cat-160.jpg 160w, cat-320.jpg 320w,
cat-640.jpg 640w, cat-1280.jpg 1280w"
sizes=“(max-width: 480px) 100vw,
(max-width: 900px) 33vw, 254px">
Size images for the viewport
fall back for browsers that don’t support srcset
33. Runner gets
lost as image
shrinks
As images get smaller need to focus on subject
35. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Switch images for different viewports
36. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Source element specifies uses media query to indicate which image to use
Switch images for different viewports
37. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
Can specify multiple sources with different media queries
Switch images for different viewports
38. <picture>
<source srcset="runner-wide.jpg" media="(min-width: 1200px)">
<source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)">
<img src="male-runner-square.jpg" srcset="runner-square.jpg"
alt="Photograph of man running along pier during sunset">
</picture>
img fallback for browsers that don’t support picture or when no query matches
Switch images for different viewports
44. CSS size is creeping up
0
10
20
30
40
50
60
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
45. Doubled Javascript in 3 Years!
0
50
100
150
200
250
300
350
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
How much of it do we
actually need?
46. Added 160kB to page
Increased bounce rate by 12% on mobile
https://speakerdeck.com/lara/design-for-performance
47. We’ve fallen in love with web fonts
http://www.flickr.com/photos/splorp/4951916342
48. and their use has exploded!
0
10
20
30
40
50
60
70
N
ov
'12
Jan
'13
Jun
Jan
'14
Jun
O
ct'15
Requests
Size (kB)
http://mobile.httparchive.org/
54. font-display: auto | block | swap | fallback | optional;
(coming soon)
https://tabatkins.github.io/specs/css-font-display/
Control whether a font blocks rendering
65. Be deliberate, design for performance
https://www.flickr.com/photos/9760699@N08/3748770917
66. Measure frequently - during build…
http://www.flickr.com/photos/chandramarsono/4324373384
67. 0.0%
0.5%
1.0%
1.5%
2.0%
0 2.0 4.0 6.0 8.0 10.0 12.0 14.0 16.0 18.0 20.0 22.0 24.0
Tablet
Phone
Desktop
and in live - visitor’s experience varies
Page Load Time
%ofvisitorsperdevice
68. New opportunities are arriving too
https://www.flickr.com/photos/inucara/14981917985
69. They mix reach of the web, with ease of apps
Service Worker
(programmable proxy in the browser)
Installable Web Apps
(add launch icon to home screen plus control
behaviour)
Push Notifications
(native notifications via web APIs)
70. For a faster mobile site:
Move less bytes
Prioritise what you move
Move them while no-one is looking
Deploy Service Workers etc.
Distract the visitor!