От простого к сложному

Ilya Grigorik

web performance engineer, Google

Блог и презентации — www.igvita.com

Предзагрузка и предварительный рендеринг

• <link rel="dns-prefetch">
• <link rel="prefetch">
• <link rel="prerender">
• <script async>

matchMedia

				if (window.matchMedia("(min-width: 720px)").matches) {
				  // the view port is at least 720 pixels wide
				} else {
				  // the view port is less than 720 pixels wide
				}
			

matchMedia

				var mql = window.matchMedia("(min-width: 720px)");
				mql.addListener(function (mediaQueryList) {
				  // mediaQueryList.matches
				  // true if the document currently matches
				  // the media query list; otherwise false
				}
			

matchMedia

				Environment.waitForDesktop(function () {
				  Modernizr.load([
				    "/styles/desktop.css",
				    "/scripts/desktop.js"
				  ]);
				});
			

matchMedia

Статья, исходный код и примеры —
noteskeeper.ru/1133

<picture>

				<picture>
				  <source srcset="examples/images/large.jpg,
				      examples/images/extralarge.jpg 2x"
				    media="(min-width: 720px)">
				  <source srcset="…" media="…">
				  <img src="examples/images/small.jpg" alt="">
				</picture>
			

<picture>

				<picture>
				  <source srcset="examples/images/large.jpg 640w,
				      examples/images/extralarge.jpg 1280w"
				    media="(min-width: 720px)">
				  <source srcset="…" media="…">
				  <img src="examples/images/small.jpg" alt="">
				</picture>
			

srcset и sizes

				<img src="small.jpg"
				  srcset="medium.jpg 640w, small.jpg 320w"
				  sizes="(min-width: 36em) 33.3vw, 100vw"
				  alt="Responsive image"/>
			

Srcset and sizes

Вся специфика применения популярно объясняется в статье http://ericportis.com/posts/2014/srcset-sizes/

				<span data-alt="Responsive image" data-picture>
				  <span data-src="mobile.jpg"></span>
				  <span data-src="retina.jpg" data-media="
				    only screen and (-webkit-min-device-pixel-ratio: 1.5),
				    only screen and (min-resolution: 1.5dppx),
				    only screen and (min-resolution: 144dpi)"></span>
				  <span data-src="desktop.jpg" data-media="
				    (min-width: 720px)"></span>
				</span>
			

Хостинг картинок + CDN

Обрезка, изменение размеров, конвертирование форматов, сохраниение с нужным качеством

• Uploadcare (scale, crop)
  /crop/200x300/center/image.jpg
• Cloudinary (scale, crop, face crop)
  /w_200,h_300,c_fill,g_face/image.jpg

Face crop

Обрезка по центру

Простой способ

				@import "layout";
				@import "component-a";
				@import "page-1";
				@import "page-2";
				@import "layout_desktop";
				@import "page-1_desktop";
			

Сложный способ

				{
				  "mobile": [
				    "layout", "component-a", "page-1", "page-2"
				  ],
				  "desktop": [
				    "layout_desktop", "page-1_desktop"
				  ]
				}
			

Спасибо за внимание

Владимир Кузнецов
Twitter: @mista_k
Блог: noteskeeper.ru

Слайды презентации: bit.ly/wsd-spb-mf