1. Почему WPO?
2. 1) улучшить пользовательский опыт
3. 2) WPO это не SEO, но это улучшает
4. Скорость загрузки является фактором позиционирования
5. Большая скорость загрузки = больше страниц проиндексировано
6. 3) WPO делает Adwords дешевле
7. 4) Экономим затраты на сервер
8. Несколько советов по улучшению скорости
9. 1) оптимизировать изображения
10. 1.1) Размер изображения
11. 1.2) разрешение
12. 2) Позаботься о ТТФБ
13. 2.1) Держите сервер немного перегруженным
14. 2..2) Уменьшить задержку
15. 2.3) Оптимизировать базу данных
16. 4) Сократить и объединить CSS и JS
17. 4.1) Сократить
18. 4.2) Слияние файлов
19. 5) Контролирует загрузку CSS и JS
20. CSS в начале
21. CSS с <link> вместо @import
22. JS в конце
23. Асинхронная загрузка
24. 6) Включить Gzip или Deflate
25. Как работает сжатие?
26. Как реализовать сжатие файлов: Gzip или Deflate
27. 7) Хорошо выбирайте хостинг
28. Геолокация вашей цели
29. 8) Используйте CDN для статического контента
30. Что такое CDN?
31. Какие преимущества имеет CDN?
32. 9) Вам действительно нужен этот iFrame?
33. 10) Не зацикливайтесь на доме
34. Как измерить скорость загрузки?
35. Некоторые инструменты для измерения скорости
36. YSlow!
37. Скорость страницы
38. GTmetrix
39. Тест веб-страницы
40. Тест скорости сайта Pingdom

Когда мы говорим об оптимизации веб-производительности, мы используем аббревиатуру веб-оптимизации , и это ни много, ни мало, чем набор методов, которые мы используем, чтобы улучшить способ загрузки наших веб-страниц, сделать их быстрее, менее тяжелыми и более эффективный.

В этой статье мы увидим причины для выполнения WPO , аспекты, которые могут повлиять на замедление работы нашего веб-сайта, а также некоторые советы и инструменты , которые помогут нам исправить это и сделать загрузку наших веб-страниц «видимой». и не видел »

Оптимизация веб-производительности включает в себя множество ... многих действий, которые можно выполнять как на нашем веб-сайте, так и на сервере, чтобы улучшить способ загрузки наших веб-страниц.

Некоторые из этих действий будут действительно простыми в реализации, а другие будут более сложными или потребуют определенных технических знаний.

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

Мой ответ на этот вопрос ясен: оптимизация веб-производительности вашего сайта всегда является мудрым решением

... но все в надлежащей мере и приоритезации тех действий, которые могут принести наибольшую пользу вашей конкретной странице.

И есть хитрость: расставить приоритеты. Каждый проект имеет свои особенности и использует различные ресурсы ... поэтому он также будет иметь свои собственные потребности и недостатки, которые необходимо будет исправить с помощью различных действий, включенных в нашу стратегию оптимизации веб-производительности.

Почему WPO?

Правда в том, что как только вы начнете выполнять оптимизацию веб-производительности, вы увидите, что в поведении пользователей вашего веб-сайта есть много «побочных преимуществ». Например, в Analytics вы начнете видеть, как быстро увеличиваются просмотренные страницы.

Ниже я покажу вам некоторые причины и самые замечательные преимущества, которые вы получите при оптимизации веб-производительности.

Но в случае, если вы один из тех скептиков, которым все еще не ясно, стоит ли беспокоиться о WPO, вот несколько причин и преимуществ оптимизации процесса загрузки вашего сайта:

1) улучшить пользовательский опыт

100 миллисекунд. Это время, когда затылочная доля нашего мозга хранит визуальную информацию, которую он получает от глаз. Это означает, что:

• Ниже 0,1 секунды у нас будет иллюзия, что что-то «мгновенно» (кроме ColaCao)
• В течение 1 секунды мы ждем, пока наши пользователи «перезагрузят» до 10 раз больше, чем визуальная память.
• Через 4 секунды важно чувство покинутости.
• За 6 секунд , как вы можете догадаться, на вашем сайте никого нет.

С этим нетерпением в нашей ДНК не удивительно, что мы так одержимы всеми продуктами, которые рекламируются как «быстрее» (будь то автомобили, интернет-связь или еда). Действительно, скорость является одной из характеристик, которые продают больше всего.

Что еще хуже: мы привыкли потреблять информацию так быстро, что наше терпение уменьшилось, и там, где раньше нам казалось, что ожидание 3 секунды теперь приемлемо похоже на вечность ,

С другой стороны, мы часто наполняем наш рот такими фразами, как

Неужели SEO думает о пользователе, а не думает о поисковых системах?

... и это нормально, но если мы много заботимся об этом, когда говорим о создании контента, почему бы нам не сосредоточиться на пользователе, который должен загружать Интернет, например, с устройства 3G и небольшого покрытия? ... Ну вот и все: пользователь также имеет значение в этом аспекте.

2) WPO это не SEO, но это улучшает

Давайте проясним с самого начала: WPO не является частью SEO , но это во многом связано с результатами, которые мы получаем при нашем органическом позиционировании.

Скорость загрузки является фактором позиционирования

Ни один SEO не должен пренебрегать этим аспектом, который иногда имеет значение для других сайтов, с которыми мы конкурируем в поисковой выдаче. Скорость загрузки долгое время была одним из факторов, влияющих на позиционирование нашей страницы ,

Большая скорость загрузки = больше страниц проиндексировано

Но помимо того, что это важный фактор, который является частью алгоритма Google, мы должны помнить, что чем медленнее наша страница, тем хуже она будет проиндексирована. Если ваш сайт работает медленно, паукам Google удастся сканировать меньше страниц вашего сайта в одно и то же время, и они наверняка потратят меньше времени на отслеживание вашего сайта.

3) WPO делает Adwords дешевле

Если вы делаете SEM, вы должны быть ясны: скорость загрузки перейдет прямо в ваш карман.

Показатель качества Adwords - это способ, которым Google должен измерять качество ваших объявлений, и напрямую влияет на цену за клик (CPC), которую вы будете платить.

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

• Актуальность посадки с рекламой. Важно ... но это не то, что касается нас.
• Скорость загрузки посадки.

Таким образом, снижение скорости загрузки нашего веб-сайта также поможет SEM, повысив наш показатель качества и сократив наши расходы.

4) Экономим затраты на сервер

Услуги хостинга, которые мы нанимаем, часто включают в себя плату за передачу данных, поэтому забота о размере веб-страниц нашего сайта, а также об улучшении их загрузки может значительно сократить передачу данных с нашего хостинга. и, таким образом, сократить расходы на эту услугу.

Несколько советов по улучшению скорости

Теперь, когда нам ясно, что такое WPO и как она может помочь нам достичь целей нашего онлайн-проекта, мы увидим некоторые приемы и действия, которые мы можем реализовать в большинстве проектов.

1) оптимизировать изображения

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

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

Когда мы говорим об оптимизации изображений, мы должны сосредоточиться на 3 аспектах:

1.1) Размер изображения

Если мы собираемся показать изображение размером 150xx150px, мы должны четко понимать, что мы не получим более высокое качество изображения из-за использования изображения большего размера или с большим разрешением.

Изображение никогда не должно занимать больше размера, чем увидит пользователь. Итак, если размер, который вы собираетесь увидеть, равен 150x150px ... тогда вы должны сохранить его в этом размере и не увеличивать его.

В этом примере вы можете увидеть большую экономию, которая происходит при оптимизации изображения.

Изображения, как правило, являются самыми тяжелыми элементами наших страниц и, следовательно, являются одним из первых ресурсов, в которых мы должны искать, чтобы оптимизировать скорость загрузки веб-сайта.

1.2) разрешение

О том, что речь идет об адаптации изображений к разрешению устройства, в котором они будут видны. За пределами этой плотности пикселей пользователь не заметит улучшения в изображении, но оно увеличится в размерах.

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

Это не то же самое, что использовать изображение в формате JPG, как в PNG8 или PNG24. В зависимости от типа изображения и его характеристик нам придется выбирать подходящий формат, который наилучшим образом соответствует резкости и весу изображения.

Чтобы улучшить этот аспект, я рекомендую вам взглянуть на эту статью, которую я опубликовал некоторое время назад о форматы изображений использовать на веб-страницах

2) Позаботься о ТТФБ

TTFB (или время до первого байта) не больше, чем время, необходимое для того, чтобы первый байт достиг браузера пользователя, когда он запрашивает определенный URL-адрес.

Это особенно важный фактор, когда мы беспокоимся о SEO (... что всегда должно быть)

В эксперименте, выполненном Мос, в ходе которого они проанализировали более 100 000 веб-страниц, был сделан вывод о том, что TTFB - это параметр, который Google учитывает как часть своего алгоритма. Ни общее время зарядки, ни другие характеристики, которые влияют на процесс зарядки, не влияют.

Почему это так? Ну ... в принципе, кажется, потому что это легче всего "измерить". Другие аспекты, такие как время зарядки, будут сильно зависеть от внешних переменных, которые трудно контролировать.

Это адекватно? Недалеко (это мое мнение) ... но это то, что есть. Таким образом, вы должны знать, что вы можете улучшить TTFB вашего сайта, заботясь о 3 аспектах:

2.1) Держите сервер немного перегруженным

Если у вас есть хостинг «наверх», вы не будете помогать ему быстро обслуживать первый байт. Вам не хватит ресурсов.

2..2) Уменьшить задержку

Задержка - это не что иное, как время, необходимое для передачи информации по сети с сервера на целевое устройство.

2.3) Оптимизировать базу данных

Неоптимизированная база данных будет менее эффективной и займет больше времени для обработки запросов. Часто оптимизация базы данных CMS является простой задачей и может значительно улучшить TTFB.

Когда вы посещаете веб-страницу в первый раз, браузер должен будет загрузить все ее ресурсы. Это занимает время (которое должно быть как можно меньше).

Однако, когда вы посещаете вторую (или третью) страницу на том же сайте, кеш браузера не позволяет снова загружать определенные элементы, общие для всего сайта (например, логотип). Эти статические элементы будут загружены только один раз, читая их после кэша, если они не изменятся.

Использование кэша браузера поможет нашему сайту с разных точек зрения:

• Улучшена скорость загрузки: если вам не нужно повторно загружать определенные элементы Интернета, время загрузки сокращается. Это, очевидно, то, что нас волнует, когда мы говорим об оптимизации веб-производительности.
• Снижение затрат на сервер. Если при каждом посещении хостинга делается меньше запросов, очевидно, что мы будем меньше использовать сервер, и это поможет нам сократить их расходы.
• Опыт пользователя: у вас нет ни малейшего сомнения в том, что чем быстрее вы откроете страницу для более высокого пользователя, тем вы будете удовлетворены. Нет ничего более раздражающего, чем просмотр с мобильного устройства, и страницы сильно замедляются.

В большинстве CMS вы можете сделать это из самой конфигурации или с помощью простого плагина. Но вы также можете сделать это напрямую, добавив несколько строк в ваш файл .htaccess (что в итоге и сделает эти «дополнения» ... но более дружественным образом)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<IfModule mod_expires. с>

ExpiresActive On

ExpiresDefault "доступ плюс 600 секунд"

ExpiresByType image / x - значок «Доступ плюс 604800 секунд»

ExpiresByType image / jpg «Доступ плюс 604800 секунд»

ExpiresByType image / jpeg "Доступ плюс 604800 секунд"

ExpiresByType image / png "доступ плюс 604800 секунд"

ExpiresByType image / gif "доступ плюс 604800 секунд"

ExpiresByType text / css "доступ плюс 604800 секунд"

ExpiresByType text / javascript "доступ плюс 604800 секунд"

Приложение ExpiresByType / x - JavaScript "доступ плюс 604800 секунд"

ExpiresByType text / html "доступ плюс 7200 секунд"

Приложение ExpiresByType / xhtml + xml «доступ плюс 7200 секунд»

</ IfModule>

<IfModule mod_headers. с>

<FilesMatch "\\. (Ico | jpeg | jpg | png | gif | swf | css | js) $">

Заголовок набора Cache - Control "max-age = 604800, public"

</ FilesMatch>

<FilesMatch "\\. (X? Html? | Php) $">

Кэш-память набора заголовков - элемент управления "max-age = 7200, private, must-revalidate"

</ FilesMatch>

</ IfModule>

Обратите внимание, что вы всегда должны указывать продолжительность кеша. В этом случае одна неделя (604800 секунд) для статических файлов и пара часов (7200 секунд) для файлов html и php.

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

4) Сократить и объединить CSS и JS

Файлы CSS и Java Script отвечают за большую часть веса нашего веб-сайта (особенно JS). Эти файлы, по сути, являются не более чем текстовыми файлами и, как таковые, содержат пробелы и разрывы строк.

Эти пробелы и разрывы строк не нужны для отображения страницы. Программисты включают их, чтобы иметь возможность интерпретировать код с ограничениями человека. (Да ... программисты тоже люди 😉)

4.1) Сократить

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

Мы можем выполнить этот процесс самостоятельно, используя такие инструменты, как CSS Compressor , Java Script Minifier (среди прочего), с помощью которого мы сгенерируем минимизированный файл, который затем загрузим на сервер.

Но мы также можем использовать плагины или расширения для CMS, которую мы используем. В WordPress, например, он дает очень хорошие результаты WP Minify ,

4.2) Слияние файлов

Обычно на наших сайтах много файлов CSS и JS. Это если файл для стиля панели навигации, другой для того классного плагина, который мы только что установили ... и то же самое происходит с файлами JavaScript. Это нормально, и это способ сохранить все организованным в логическом порядке.

Однако это приводит к тому, что при загрузке страницы на сервер делается много запросов (по одному на файл) ... и это, несомненно, задержит общую загрузку страницы.

Объединение файлов - это не что иное, как объединение нескольких файлов в одном файле.

О чем идет речь, так это о том, что

<link rel = "stylesheet" href = "style.css" media = "all">

<link rel = "stylesheet" href = "nav.css" media = "all">

<link rel = "stylesheet" href = "plugin1.css" media = "all">

<link rel = "stylesheet" href = "plugin2.css" media = "all">

<link rel = "stylesheet" href = "banner.css" media = "all">

К этому другому, где мы называем только один файл, который объединяет содержимое предыдущих, упорядоченных последовательно:

<link rel = "stylesheet" href = "main.css" media = "all">

и если мы будем говорить о JS, то это не сильно изменится. Речь идет о прохождении всего этого:

<script src = "nav.js"> </ script>

<script src = "plugin1.js"> </ script>

<script src = "component.js"> </ script>

<script src = "plugin2.js"> </ script>

к этому:

<script src = "main.js"> </ script>

Когда мы говорим о комбинировании файлов, мы должны учитывать одну вещь: порядок .

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

Я бы посоветовал перед объединением этих файлов сделать резервную копию на тот случай, если при объединении чего-либо (или всего) он перестает работать.

5) Контролирует загрузку CSS и JS

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

CSS в начале

По возможности, мы должны помещать загрузку CSS-файлов в заголовок, непосредственно перед тегом </ head>.

Таким образом, мы добьемся того, чтобы стили страницы загружались как можно быстрее, и мы не воспринимаем загрузку сети без стилей, которые должны ждать, пока она «обретет форму».

CSS с <link> вместо @import

Есть два способа загрузки файлов стилей CSS: с помощью тега <link> в коде HTML или с помощью директивы @import в одном из файлов CSS (или внутри тега <style>)

<link rel = "stylesheet" href = "style.css" media = "all" />

@ import url ('style.css');

Первый всегда лучший вариант, потому что @import делает невозможной параллельную загрузку файлов, и поэтому всегда будет медленнее.

JS в конце

С JavaScript это происходит с точностью до наоборот. JS удобно загружать в конце страницы, непосредственно перед меткой </ body>

Когда браузер находит файл JavaScrip, он останавливает процесс загрузки во время загрузки. Затем он выполняет его и продолжает процесс загрузки.

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

Асинхронная загрузка

Иногда невозможно загрузить JS в конце документа. В этих случаях оптимальной будет загрузка асинхронно. Это параллельно с загрузкой остальных компонентов.

Таким образом, мы получим файл JS без остановки загрузки.

Способ заставить JavaScript загружаться асинхронно через атрибут async, добавленный в тег, который вызывает файл.

<script async type = "text / javascript" src = "script.js"> </ script>

Покрытый JS загружается асинхронно. Загруженные таким образом файлы будут выполнены, как только они закончат загрузку, и мы не сможем определить порядок их загрузки и / или выполнения.

Это приведет к тому, что, если, например, некоторые из файлов, которые мы вызываем асинхронно, используют jQuery, и он еще не загружен, когда они выполняются, возникает ошибка.

Решением является загрузка jQuery в заголовок (перед элементом </ head>). Таким образом, мы будем делать Интернет немного медленнее, но без ошибок.

6) Включить Gzip или Deflate

Сжатие веб-файлов перед их передачей всегда должно быть приоритетом в любом аудите веб-оптимизации (WPO) по трем причинам:

• Это очень просто реализовать
• Это предполагает экономию перевода от 50% до 70%
• Это значительно сокращает время загрузки в большинстве случаев.

Как работает сжатие?

Суть в том, что вся передаваемая информация сжимается на сервере перед отправкой. Таким образом, мы передаем файлы намного меньшего размера, увеличивая скорость загрузки веб-страниц .

Как только браузер получен, он распаковывает и интерпретирует их.

Как реализовать сжатие файлов: Gzip или Deflate

Чтобы сжать файлы перед их отправкой, мы можем включить сжатие Gzip или Deflate . Оба типа сжатия и, хотя существуют мнения для всего, правда в том, что их коэффициенты сжатия очень похожи и простота их реализации также.

Чтобы реализовать любой из двух типов сжатия, мы просто должны убедиться, что соответствующий модуль активирован на сервере, и добавить несколько строк в файл .htaccess в корневом каталоге, где находится наш веб-сайт.

В случае с Gzip мы должны добавить это:

<IfModule mod_gzip. с>

mod_gzip_on Да

mod_gzip_dechunk Да

Файл mod_gzip_item_include \. (html? | css | js | phpl) $

обработчик mod_gzip_item_include ^ cgi - скрипт $

mod_gzip_item_include mime ^ text /. *

mod_gzip_item_include mime ^ application / x - JavaScript. *

mod_gzip_item_exclude mime ^ image /. *

mod_gzip_item_exclude rspheader ^ Содержание - Кодировка :. * gzip *

</ IfModule>

А в случае с Deflate это другое:

<IfModule mod_deflate. с>

<filesMatch "\. (js | css | html | php) $">

SetOutputFilter DEFLATE

</ filesMatch>

</ IfModule>

7) Хорошо выбирайте хостинг

Суперхостинг, супер мощный, с множеством ресурсов, с супер быстрыми дисками и конденсатором потока на случай, если мне придется вернуться в прошлое, чтобы восстановить резервную копию за 0,001 секунды ... очевидно, что все обеспечит лучшую скорость передачи, чем общий хостинг Размещается на медленном жестком диске и загружается до флага.

Первый, очевидно, будет дороже. Второй, с другой стороны, будет означать мало денег (... но, конечно, в конечном итоге это будет стоить дороже)

Док знает, что если вы выберете хостинг по цене, это может быть дорого.

Таким образом, выбор хорошего хостинг-провайдера станет одним из лучших вложений, которые вы можете сделать для повышения производительности нашего сайта. Чтобы избежать ошибок на выборах, советую вам посмотреть, как они это сделали Мигель Анхель Флоридо выбрать свой VPS или Рубен Алонсо выбрать виртуальный хостинг, предлагающий лучшую производительность.

... однако, хотя хороший хостинг может улучшить производительность вашего сайта, это не делает WPO. WPO O означает оптимизацию, а это не так.

Геолокация вашей цели

Несмотря на это, с точки зрения WPO (Оптимизация веб-производительности), есть ли что-то, что вы должны принять во внимание, когда нанимаете эту услугу. Спросите себя: где находится ваша цель?

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

Помните, когда мы говорили о «задержке»? Что ж, это именно то, чего вы достигнете, физически приближаясь к своим пользователям: уменьшите время ожидания.

Это улучшит TTFB и SEO ваших страниц.

8) Используйте CDN для статического контента

У вас уже есть хороший хостинг? Хорошо. Хорошо, теперь запомни это

Что такое CDN?

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

Если вы не используете CDN и ваши пользователи распределены по всему миру, сервер будет отвечать за предоставление ваших страниц всем. Очевидно, что это сделает скорость загрузки очень разной в том же городе, где у вас есть страница, размещенная на другой стороне мира.

Теперь представьте, что у вас есть несколько серверов, распределенных по всей планете, которые копируют статическое содержимое вашего веб-сайта ... и что, когда кто-то запрашивает вашу страницу из точки вашего хостинга, эти файлы будут обслуживаться с точки, ближайшей к пользователю: Так работает CDN.

Используя CDN, мы сократим время, в течение которого мы будем обслуживать страницу в разных точках, а также уменьшим нагрузку на сервер.

Какие преимущества имеет CDN?

Ну, 2 самых важных преимущества:

1) Увеличьте скорость загрузки: пользователю придется ждать намного меньше, чтобы получить веб-страницу.

2) Сократите передачу вашего сервера: все данные, отправленные CDN пользователю, не являются передачей вашего хостинга ... поэтому вы сэкономите на этом деньги.

9) Вам действительно нужен этот iFrame?

IFrame представляет встроенный контент с других сайтов.

Некоторые из наиболее часто используемых iFrame - это YouTube или SlideShare (например). Они могут быть действительно полезными, потому что они позволяют нам значительно обогатить содержание нашего сайта.

Однако мы должны учитывать, что каждый iFrame похож на веб-страницу, размещенную на нашем собственном веб-сайте. Каждый iFrame будет загружать свои HTML, CSS, JS ...

Поэтому, возможно, нам следует рассмотреть реальную полезность некоторых iFrames в виде кнопок социальных сетей или очень популярного окна с кнопкой «Нравится» на Facebook.

Нам следует подумать, действительно ли мы хотим подождать 0.806 сек. загрузить «лайк» из фейсбука.

10) Не зацикливайтесь на доме

Интересно, возможно, мне следовало начать с этого трюка (а не действия), который поможет вам сосредоточиться на том, что действительно важно для получения конверсий в вашем проекте: на ваших целевых страницах.

Это одна из самых распространенных ошибок, когда кто-то начинает беспокоиться о скорости загрузки. Внезапно обращаюсь к бесчисленным инструментам, которые измеряют нагрузку, я пытаюсь улучшить счет ... но страница, которую они анализируют, является доменом: домом.

Анализируя дом, мы могли подумать, что все было хорошо. Но, глядя на посадку одного из продуктов, мы понимаем, что что-то происходит.

В действительности ваши пользователи не всегда заходят на эту страницу. Что вы должны попробовать, так это то, что каждая посадка подготовлена ​​к сверхбыстрой загрузке.

Каждая статья вашего блога, каждый файл продукта в вашей электронной коммерции даже более важны, чем сам дом, потому что, если посещение достигает этих страниц (либо с помощью результата поиска, платной рекламы или ссылки на другом веб-сайте) ) много раз это будет гораздо более квалифицированный визит, и он ищет что-то гораздо более конкретное, чем то, которое приземляется в доме.

Выделите внимание WPO всего веб-сайта, но особенно тем ключевым целевым страницам, с помощью которых вы знаете, что люди заходят на ваш сайт.

Как измерить скорость загрузки?

Но бесполезно знать, как оптимизировать, если мы сначала не знаем, что не так в нашем конкретном случае.

К счастью, в нашем распоряжении имеется большое количество инструментов, которые помогут нам измерить не только скорость загрузки, но и влияние каждого ресурса на нашем веб-сайте в этом процессе.

Некоторые даже дают нам небольшое руководство о том, как решить каждый аспект, который нам нужно улучшить.

Прежде чем рекомендовать те из них, которые я считаю более полными, позвольте мне рассказать вам пару вещей, которые будет полезно принять во внимание при оценке эффективности вашего веб-сайта:

• Не ограничивайте себя одним измерением: производительность веб-страницы может варьироваться от одного момента к другому. Существует множество факторов, которые могут влиять на производительность в определенный момент времени (нагрузка на сервер, запросы, посещаемые в данное время, ...). В идеале вы должны сделать несколько измерений в разное время, чтобы получить более надежное представление о том, как работает страница. ,
• Не зацикливайтесь на примечании: как я уже говорил в начале этой статьи, каждая страница имеет свои особенности. Иногда исправить любое из показаний, предлагаемых этими инструментами, может быть даже более вредно для пользователя, чем оставить его как есть. Всегда оценивайте каждую индикацию, принимая во внимание изменения, которые необходимо осуществить, и реальные выгоды, которые вы получите от этого улучшения.

Некоторые инструменты для измерения скорости

YSlow!

Yslow - это инструмент, который Yahoo! провести аудит того, что они считают наиболее важными аспектами, о которых мы должны позаботиться, чтобы добиться действительно эффективного процесса загрузки.

Мы можем установить Yslow как плагин или расширение практически во всех браузерах и, выполнив его, проведем анализ, после которого он даст нам примечание на 100, но он также скажет нам, в какой мере мы оптимизировали каждый из параметров, которые они считают важными, и меры, которые мы должны предпринять чтобы улучшить их.

Скорость страницы

Назначение и скорость Page Speed ​​аналогичны Yslow, но на этот раз мы говорим об инструменте, который Google предоставляет нам для проверки WPO страницы.

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

GTmetrix

GTmetrix - действительно полезный инструмент с того момента, как он предоставляет нам в одном месте анализы Page Speed ​​и Yslow, включая их оценки (в%, от A до F и с цветовыми кодами) и рекомендации.

Но не только это, но GTmetrix также показывает нам временную шкалу, графически представляющую процесс загрузки. В этом вы можете увидеть, какие процессы замедляют работу страницы и предпринимают необходимые действия для ее исправления.

«Водопад» - это представление, которое GTmetrix дает процессу загрузки в виде каскада процессов. В этом мы видим, какие из них задерживают нагрузку.

Существуют платные версии этого инструмента, которые позволят вам хранить данные и даже создавать отчеты с белой меткой. Но чтобы сделать ваши собственные измерения, бесплатная версия действительно завершена.

Тест веб-страницы

Тест веб-страницы - один из моих любимых инструментов как для обширной информации, которую он предоставляет, так и для огромных возможностей настройки теста.

Расширенные параметры конфигурации позволяют указать место, браузер, тип подключения, ... и даже если мы хотим выполнить несколько тестов на странице.

Еще одним преимуществом теста веб-страниц является то, как он суммирует нагрузку на Интернет. С одной стороны, он показывает оценку от А до F с цветовыми кодами наиболее важных общих аспектов. Но с другой стороны, он показывает таблицу со значениями очень важных параметров как при первом посещении, так и во втором (где вмешивается кэш)

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

Тест скорости сайта Pingdom

Pingdom позволяет нам проводить анализ, выбирая из 6 различных географических мест.

Сводка результатов покажет нам примечание около 100, а также количество запросов, время загрузки и размер страницы.

Как и GTmetrix, он показывает нам процесс загрузки в каскадном формате «водопад», но также предоставляет нам подробную информацию о параметрах, которые влияют на заметку, а также анализ страницы и кое-что действительно интересное: историю измерений на странице. ,

Есть еще много инструментов для мониторинга производительности нашего сайта, но это мои любимые.

Есть также много (много) больше аспектов, которые могут влиять на процесс загрузки, но это, на мой взгляд, некоторые из тех, которые обычно требуют особого внимания на большинстве страниц.

Не могли бы вы добавить еще один аспект в список предметов первой необходимости? У вас есть другой предпочтительный инструмент для мониторинга веб-оптимизации вашей страницы?

Я почти всегда говорю о SEO, онлайн-маркетинге и веб-дизайне (... я проконсультировался с врачом, и он говорит, что это хроническое заболевание)

Оптимизация веб-производительности (WPO): управление процессом загрузки 2015-03-30 2018-08-13 https://pernas.eu/wp-content/uploads/2018/04/logojpamo.png Блог Иисуса Пернаса https: //www.pernas.eu/wp-content/uploads/2015/03/turbo-wpo-265x174.jpg 200px 200px

Похожие

Комментарии