Getting Your PageSpeed Score Up Google Developers Russian English

Getting Your PageSpeed Score UpYouTube↗ IA↗(long shot)
Science & Technology 95.2K views 1K likes 30 dislikes 25 Jun 2014

Google for Developers 2.7M subscribers United States YouTube↗

Click to Play Video

Вам знакомо чувство, когда вы долго смотрите

Have you ever had one of those moments

на телефон, ожидая загрузки веб-страницы

where you're staring at your phone waiting for a web page

при хорошем сигнале сети, но ничего не происходит?

to load, you've got full signal, and nothing's happening?

Это очень раздражает, правда?

This kind of sucks, right?

Сайт может быть самым лучшим и интересным.

I mean, this site could be the best thing ever.

Но если его загрузка занимает много времени, мы начинаем скучать

But if it takes too long to load, I'm going to get bored,

и заниматься другими делами.

and I'm just going to go do something else.

Имейте ввиду:

у вас есть одна секунда, прежде чем пользователь

You have about one second before a user

начнет скучать.

starts to get distracted.

Итак, что же вызывает задержку загрузки сайта

So what causes a site to have slow load time,

и как это исправить?

and how do you fix it?

Меня зовут Мэтт Гонт, я инженер-разработчик,

My name is Matt Gaunt, I'm a developer advocate,

и сегодня я расскажу об инструменте PageSpeed Insights,

and I wanted to talk to you about PageSpeed Insights,

который позволяет находить проблемы на сайте,

a tool which can be used to find issues affecting your site's

влияющие на время его загрузки, и покажу, как их можно устранить.

load time, and give you some tips on how you can fix them.

С помощью PageSpeed Insights можно выполнить проверку URL-адреса,

So when you visit PageSpeed Insights, you bash in your URL,

получить оценку скорости загрузки по 100-бальной шкале

and it'll give you a score out of 100,

и выявить проблемные области на вашем сайте.

and highlight any problem areas with your site.

Задачей данного инструмента является выявление

The focus of this tool is to point out

проблем, после устранения которых скорость загрузки

issues which, if fixed, would improve your site's

сайта повысится, и ваши пользователи будут довольны.

overall load time and make your users happier.

Вопрос в том, что вам делать с полученной информацией?

The big question is, what do you do with this information?

Основные проблемы можно разделить на три группы.

Well, the most common problems fall into three buckets.

Первая – проблемы, которые можно устранить с помощью инструментов разработки.

First, problems that can be solved with build tools.

Например, файлы JavaScript, которые можно уменьшить

For example, JavaScript files where

и выполнять отправку меньшего количества байтов,

you could minify them and send less bytes down

либо объединить несколько файлов, чтобы вместо

the wire, or mergine multiple files, so

четырех запросов выполнялся только один.

rather than make four requests, you only make one.

Вторая группа проблем связана

The second set of issues are focused

со структурой вашей страницы.

on the structured your page.

Например, с расположением ссылок на файлы JavaScript.

For instance, where you link to your JavaScript files.

И третья группа – проблемы, требующие настройки

And thirdly, problems which need server side

сервера, для обеспечения, например, кэширования ресурсов страницы.

tweaks to enable things like caching of your page assets.

Сначала давайте рассмотрим инструменты разработки.

Let's start off with looking at build tools.

Возможно, многие из вас уже используют различные инструменты разработки,

Many of you may already be using some kind of build tool today,

но я бы порекомендовал использовать

but if you want, then I recommend

Grunt или gulp js.

checking out Grunt or gulp js.

Эти инструменты становятся все более популярными

These build tools are picking up a lot of steam

в среде веб-разработчиков, они просты в использовании

within the web development community,

и помогают легко справиться с проблемой.

and they're fairly easy to get to grips with.

Основным преимуществом использования инструментов разработки

The main reason you'd want to use a build tool

является автоматизация любых задач,

is to automate any set of tasks you're

выполняемых для вашего проекта регулярно.

going to run on your project on a regular basis.

Большинство инструментов разработки позволяют использовать

And most build tools will allow you to pull in third party

сторонние модули, обеспечивая множество бесплатных ресурсов.

modules, which means you get a lot of stuff for free.

Рассмотрим базовый пример в виде

So let's look at a basic example,

уменьшения и объединения файлов JavaScript.

like JavaScript minification and concatenation.

Другими словами, возьмем файлы JavaScript,

In other words, take some JavaScript files,

уберем пробелы, заменим переменные

strip out any white space, replace variable names

на более короткие и объединим все файлы вместе.

with shorter ones, and then just squish all the files together.

Это позволяет уменьшить файл JavaScript, увеличив

This way our JavaScript file is smaller, making it faster

скорость его загрузки и уменьшив количество файлов

to download, but the browser also

для загрузки браузером.

has fewer files to download.

Для этого можно использовать преобразование внешнего вида файлов.

To achieve this, you can use the uglify task.

Укажите файлы, которые необходимо уменьшить и объединить,

You define which files to minify and merge,

а все остальное будет выполнено автоматически.

and it just takes care of it for you.

cssmin и htmlmin сделают то же самое с CSS и HTML.

cssmin and htmlmin will do the same thing for CSS and HTML.

Другой частой проблемой является оптимизация изображения.

Another common problem area is image optimization.

При запуске PageSpeed Insights проверяется,

When you run PageSpeed Insights, it looks at your site

не превышают ли изображения на вашем сайте

and basically checks whether any of the images

необходимый размер, и для устранения проблемы

are larger than they need to be, and in the guidelines

рекомендуется jpegoptim – инструмент командной строки,

it will recommend jpegoptim, which is a command line

который удаляет метаданные из файлов изображений

tool which strips out any metadata from the image files,

и позволяет существенно уменьшить размер

and can lead to some really impressive reductions in file

Когда я говорил о метаданных, я имел ввиду,

And when I say it strips out metadata,

например, такие данные, как какой камерой был сделан снимок.

I mean things like which camera was used to take the photo.

Браузеру не требуется прорисовывать изображение

It's not needed for a browser to render the image

для его удаления.

to just get rid of it.

Для добавления данной функции в процесс разработки используйте imagemin

So to add this to your build process, use imagemin

для растровых изображений и svgmin для векторных.

for raster images, and svgmin for vectors.

svgmin выполнит удаление пробелов, ненужных тегов

And svgmin will strip out white space, and any unnecessary tags

и атрибутов из файлов SVG.

and attributes from your SVG files.

Вторая группа проблем связана со

The second set of problems falls into the category

структурой страницы.

of page structure.

Возможно, вы так и не делали, но я раньше

Now, I don't know about you, but I've definitely

размещал файл JavaScript в заголовке страницы.

put a JavaScript file in the head of my page before.

Связанная с этим проблема заключается в том, что браузер

The problem with this is that the browser will

начинает пропускать документ, поскольку

start to pass the document, and as it

считывает тег HTML, тег заголовка,

reads the HTML tag, the head tag,

затем тег скрипта, и именно поэтому

it will eventually reach your script tag,

вам приходится долго смотреть на пустой экран.

and this is where you'll see the screen of bad times.

Причина, по которой на странице останавливается прорисовка,

The reason the page stops rendering

связана с тем, что JavaScript может управлять DOM и CSS.

is because JavaScript can manipulate the DOM and CSS.

Поэтому браузеру приходится получать JavaScript

So the browser needs to go and fetch the JavaScript

с сервера и выполнять его после загрузки.

from the server and execute it once it's downloaded.

Это выполняется на случай, если сервер изменит DOM или CSS.

This is just in case the script changes a DOM or CSS.

И только после завершения работы JavaScript

And it's only after the JavaScript

прорисовка страницы может продолжиться.

is finished executing that the page can continue rendering.

Во избежание этой задержки просто переместите JavaScript

So to avoid this delay, simply move your JavaScript

в нижнюю часть основного элемента.

to the bottom of the body element.

Таким образом браузер может выполнять передачу и отображение страницы

This way the browser can pass and render the page

до данного момента, а после этого –

up to this point, and then it'll handle

сбор JavaScript в самом конце.

fetching the JavaScript at the very end.

Другим чуть более эффективным способом

An alternative and slightly more performant

является использование атрибута async.

technique is to use the async attribute.

Атрибут async указывает браузеру

Now, what async does is it tells the browser

выполнить асинхронную загрузку и запуск JavaScript,

to download and excuse the JavaScript asynchronously,

избегая блокировки отображения.

avoiding the render block.

Секрет большей эффективности этого процесса в том,

The reason it's slightly more performant

что браузеру не требуется ждать загрузки

is the browser doesn't need to wait on the DOM and CSS

DOM и CSS для выполнения JavaScript.

to be loaded before it can execute the JavaScript.

Однако необходимо соблюдать осторожность, поскольку при этом

But you need to be careful, because it

нельзя быть уверенным, что DOM, CSS или другой файл JavaScript

means you can't rely on the DOM, CSS, or any other JavaScript

будет загружен ко времени фактического выполнения

file to be loaded by the time your JavaScript actually

Вам, вероятно, потребуется пересмотреть

Essentially, it might require you

свой способ использования JavaScript

to think a little differently to how you use JavaScript,

в зависимости от выполняемой задачи.

depending on what you're doing.

Второй наш враг в структуре страницы – это CSS.

The second page structure woe is CSS.

При добавлении тега ссылки CSS отображение страницы

When we add a CSS link tag, the rendering of the page

блокируется, как и в случае с JavaScript.

will block much like it did with JavaScript.

Мы видим, как оно проходит через тег HTML, в заголовок,

We'll see it step through the HTML tag, into the head,

считывается CSS и в результате...

read to CSS, and boom.

Мы получим пустой экран.

We'll hit the sad screen of nothing.

Но браузеру приходится это выполнять из-за отсутствия других вариантов.

The browser has no choice but to do this.

Перед выполнением других действий он осуществляет загрузку CSS,

It has to download the CSS before it can start anything,

иначе пользователь увидит неоформленное содержимое,

otherwise the user would see unstyled content

затем мигания CSS в процессе загрузки,

followed by just a flash of all the CSS's as it's loaded,

а затем добавится оформление.

and everything is styled.

Устранить это достаточно непросто.

The fix for this can be quite involved,

Существует много способов, каждый из которых имеет как преимущества,

and there's a lot of caveats, each with their own pros

так и недостатки.

Если у вас мало CSS на странице,

If you have a relatively small amount of CSS for a page,

их можно выровнять непосредственно в HTML,

you can in line it directly into the HTML,

удалив все запросы файла CSS

removing any requests for a CSS file,

и разрешив прорисовку страницы

and allowing the page to be rendered

сразу после загрузки HTML.

as soon as the HTML is loaded.

Но если у вас много CSS, вы можете

If you have a large amount of CSS, however,

выполнить выравнивание над всеми CSS,

you could in line just above the full CSS

поэтому браузер будет сначала выполнять прорисовку важного содержимого,

so the browser can render the most important content,

а затем загрузку всех CSS с помощью JavaScript.

and then the load the of your CSS using JavaScript.

Очевидным недостатком данного способа является

The obvious downside of this approach

необходимость использования JavaScript, поэтому если он

is that it requires JavaScript, meaning if it's switched off,

отключен, вы не сможете получить дополнительные стили.

you won't get the additional styles.

Оба способа выравнивания не позволяют

With both inlining techniques, you also

использовать кэширование файлов CSS, что

lose the ability to cache the CSS files, which

может быть серьезным недостатком при использовании одних стилей

could be a big loss if you have styles shared

среди множества страниц. В этом случае

across multiple pages, in which case

следует разделить стили по файлам CSS для

it might be worth splitting out the styles to CSS files

их кэширования и выравнивания уникальных стилей

so you can cache them, and inlining

для каждой страницы.

any unique styles for each page.

Поэкспериментируйте, чтобы понять, что лучше всего подходит для вашего сайта.

Ultimately, test it and see what works best for your site.

Последним элементом, замедляющим загрузку страницы,

The final element of the page load gotchas

являются настройки сервера.

is server side tweaks.

Давайте сразу рассмотрим кэширование.

Jumping straight in, let's look at caching.

Когда браузер делает запрос файла с сервера,

When the browser makes a request for a file from your server,

всегда должен возвращаться заголовок срока хранения управления кэш-памятью.

it should always return a cache control max age header.

Именно это сообщает браузеру время хранения файла в кэш-памяти,

This is what tells the browser to cache a file for how

чтобы при следующем входе пользователя

long, meaning the next time a user visits your page

браузеру не требовалось снова выполнять загрузку файла.

and it needs a file, it doesn't need to download it again.

Он просто будет извлечен из кэша.

It's just good to go from the cache.

Что касается кэширования, вам нужно задать себе

When it comes to caching, there are a few things

несколько вопросов.

you need to ask yourself.

Во-первых, сколько мне требуется хранить файлы в кэш-памяти?

First, how long can I cache my files for?

Во-вторых, как выполнить на сервере

Second, how do I actually get my server

возврат заголовка срока хранения управления кэш-памятью?

to return this cache control max age header?

И в-третьих, что делать, если мне нужно изменить файл?

And thirdly, what do I do when I need to change a file?

При ответе на первый вопрос о сроке хранения

Answering the first question of how long

файлов в кэш-памяти лично мне очень

do I cache my files for, I personally

помогает использование HTML5 Boilerplate.

found HTML5 Boilerplate to be a good source of guidance.

При рассмотрении файла доступа HD HTML5 Boilerplate

If you look at HTML5 Boilerplate's HD access file,

есть несколько правил кэширования для определения

there are a number of caching rules

периода кэширования в зависимости от типа файла.

to finding the caching period depending on the type of file.

Вот фрагмент файла.

Here's a snippet of the file.

Мы настроили сохранение в кэш-памяти CSS и JavaScript в

We've got CSS and JavaScript cached

течение года, изображений – в течение месяца,

for a year, images cached for a month,

а для HTML отключили кэширование совсем.

and HTML isn't cached at all.

Но это только рекомендация.

Now, this is just a guideline.

Вы можете настроить хранение изображений в кэш-памяти весь год,

You may want to cache your images for a year,

для HTML – от 30 минут до часа, чтобы при частом

you may want to cache your HTML for 30 minutes to an hour,

переходе вперед и назад по страницам

just so that any user hopping backwards and forwards

скорость работы была оптимальной.

between pages gets a smooth experience.

Если вы используете Apache для размещения сайта,

If you're using Apache to host your site,

можно просто использовать этот файл доступа HD

then you can just use this HD access

для внедрения правил кэширования.

file to implement the caching rules.

Если вы используете другой сервер,

If you're using a different server,

обратитесь к его документации, чтобы узнать,

then check out the documentation on how

как добавлять такие заголовки.

you can add these headers.

Возможно, вам потребуется изменить несколько файлов

Now, chances are you're going to want

перед истечением срока хранения в кэш-памяти.

to change some of these files before the cache expires,

В этом случае следует дополнительно

in which case consider adding a build step

переименовать файлы.

to revision your file names.

Это поможет вам избежать проблем

This way, there won't be any issue

со старыми версиями используемых файлов.

with older versions of files being used.

filerev – это пример задачи, созданной специально

filerev is an example task designed specifically

для этого случая, которая может использоваться с другими модулями

for this use case, and can even be used with other modules

для замены имен файлов в HTML и CSS,

to replace file names in your HTML and CSS

поэтому указывает на файл изменения.

so it's pointing to the revision file.

Последнее, что необходимо активировать на сервере – это GZip.

The final thing to enable on your server is GZip.

Если вы не работали с ним раньше, будьте уверены,

If you've not come across this before,

этот инструмент поддерживается всеми браузерами

it's supported by all browsers, and it's

и предоставляет мощные возможности для сжатия

an incredibly powerful tool for compressing

текстовых ресурсов.

any text based assets.

С помощью него можно повысить коэффициент

There are some huge wins to be had

сжатия до 80% и добиться больших преимуществ.

with compression rates up to 80%.

Процесс активации данного инструмента будет зависеть от вашего сервера,

Now, how you enable this will depend on your server,

но преимущества огромны по сравнению с количеством требуемых

but the gains are big for a relatively small amount

действий.

Я недавно начал это использовать на сервере Nginx,

I recently got this working on my Nginx server,

и мне потребовалось просто добавить GZip.

and it was as simple as just adding GZip on.

Мы рассмотрели три наиболее распространенные проблемные области,

So those are the three most common problem areas

выявляемые PageSpeed Insights.

raised by PageSpeed Insights.

Уменьшение времени разработки, структура страниц и изменения настроек

Build times fixes, page structure, and server side

на сервере.

Но это не единственные инструменты, помогающие повысить производительность,

Now, these aren't the only tools to help with performance,

поэтому если вам нужны другие советы или вы просто хотите узнать

so if you're looking for more tips, or just curious

о других имеющихся инструментах, я настоятельно

about what other tools exist, I strongly

рекомендую ознакомиться с этим постом из блога Эдди Османи.

recommend checking out this blog post by Addy Osmani.

В нем подробно описаны многие инструменты,

It includes many of the tools mentioned

которые я упомянул в этом видео.

in this video in much more detail.

Надеюсь, благодаря ему вы поняли,

Hopefully this has been a useful insight

как уменьшить время загрузки вашего сайта.

into how you can improve your site's load time performance.

Думаю, вы сможете получить 100 очков в PageSpeed за скорость загрузки.

I challenge you to get 100 points on your PageSpeed score.

Similar videos:

What's new in WebView
Google for Developers
19.8K views 121 likes 6 dislikes 25 Jun 201475% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201471% match

Touch in a Web App? No Problem
Google for Developers
14.2K views 156 likes 0 dislikes 25 Jun 201464% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201460% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201458% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201446% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201440% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201437% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201437% match

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201435% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201434% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201434% match

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201433% match

Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201433% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201432% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201432% match

Faster Loading Images with WebP
Google for Developers
24.6K views 133 likes 13 dislikes 25 Jun 201432% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201432% match

Polymer: making Web Components accessible
Google for Developers
27.6K views 195 likes 11 dislikes 13 Jun 201431% match

Building Node.js applications with App Engine and Custom Runtimes
Google for Developers
26.1K views 168 likes 4 dislikes 25 Jun 201431% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201431% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201429% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201429% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201428% match

WebRTC tutorial
Google for Developers
134.5K views 649 likes 23 dislikes 30 Jun 201426% match

DevBytes - What is BigQuery?
Google for Developers
95.7K views 373 likes 19 dislikes 24 Mar 201426% match

Getting started with AdMob
Google for Developers
65.9K views 646 likes 71 dislikes 20 Feb 201426% match

Google I/O 2014 - HTTPS Everywhere
Google for Developers
157K views 805 likes 113 dislikes 26 Jun 201426% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201426% match

Google I/O 2014 - Polymer and the Web Components revolution
Google for Developers
48.9K views 344 likes 14 dislikes 25 Jun 201426% match

Settings Privacy About Contact Donate