Ответ
Когда весь мир ускоряется – сайты замедляются Опции темы
Старый 30.08.2013, 16:40
  #1
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

Когда весь мир ускоряется – сайты замедляются
Добрый денёк.

Не мне вам говорить, что скорость сайта(время его загрузки) должно быть его вторым именем. Ни кто не хочет, тупо сидеть и ждать, когда же прогрузится страница. Ситуация становится еще накаленной с мобильными сайтами - 50% пользователей покидают страницы, если они не загружаются в течение 10 секунд, а трое из пяти вообще не вернутся уже на этот сайт. И в чём сила, брат?

Так по некоторым исследованиям, результаты оказались весьма занятными – задержка загрузки страницы сайта в одну секунду может в конечном итоге, привести к 7% потери целевого трафика. Жуть, ведь это семь человек из ста, семьдесят из тысячи и т.д. Более того, все мы не только заинтересованы, но и прикладываем все усилия для скорости загрузки, а эффект выходит прямо обратный - средняя скорость загрузки сайта медленно падает. Чтоб не слыть пустословом, приведу следующие цифры из авторитетного источника, весной 2012 года средняя скорость загрузки страниц была в районе 6,79 секунд, казалось бы в 2013 это время должно снизиться, где-то до 6,2 – 6,3 секунд, но на самом деле в настоящее время скорость наоборот увеличилась до 7,72 секунд, это практически замедление темпа на 13,7%!

Если бегло пробежаться среди списка сайтов топ-500 по рейтингу Alexa.com, то самый шустрый сайт – Ikeaточкаком, его время полной загрузки страницы составляет 1,85 секунд, далее идёт AbeBooks (2,06 секунд) и Pixmania (2.20 секунды). Ниже доступен для просмотра топ-10 по скорости





Ну и что из этого, спросите вы? А то, что это ещё не конец. Для измерения времени загрузки существует специальная метрика, которая обозначается, как TTI - time to interact, что буквально можно перевести, как время для взаимодействия, а само значение этой метрики в том, что она направлена на определение момента точки загрузки, в который страница отображает свой основной интерактивный контент. К примеру, если вернутся к верхнему скрину, то находящийся на пятом месте Adpost имеет ТиТиАй равный 0,7 секунды, что практически приравнивает его к позициям Groupon и AbeBooks у которых TTI составляет 0,8 секунды. Чтобы ещё больше закрепить понятие метрики времени для взаимодействия, приведу ещё парочку примеров Netflix имеет TTI 1,4 секунды, но полная загрузка страницы занимает 4,37 секунд, в то время как LivingSocial имеет TTI две секунды, а полное время загрузки 8,58 секунд. Ну, и всё ещё не понятно? Зачем этот ТиТиАй?

TTI

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





Итак, если мы уже знаем среднее время загрузки среди топ-500 по рейтингу Alexa.com, то какое среднее значение TTI? А оно равно среди топ-100 сайтов, которые были протестированы на TTI, в среднем составило 4,9 секунд. Что интересно, только у 8% из 100 крупнейших сайтов TTI был ниже двух секунд, в то время как у 9% TTI был ещё хуже, восемь и более секунд. Вот мы и подошли к тому момента, когда стоит ответить на такой вопрос – а как уменьшить TTI?
А для его снижения нам предлагается, предпринять следующие действия:

1. Отложенная визуализация контента

Итак, нам предлагается, улучшить время для взаимодействия путём покадровой загрузки контента страницы. То есть мы можем выиграть время за счёт загрузки первого экрана страницы или верхней части, которая будет загружаться первой, всё что расположено ниже будет подгружаться в тот момент, когда пользователь уже может использовать страницу сайта. А для технического решения этого вопроса, предлагается, чтоб очередной раз не обновлять страницу и отказаться от reflow, когда страница будет загружена на 100%, отдать предпочтение replace для тэга <img> с уже заданными размерами по высоте и ширине.

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

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





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

3. Правильно расставляйте приоритеты

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

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

Есть целый ряд различных инструментов, которые можно использовать для проверки скорости сайта, в том числе сам Google. Дополнительно привожу список актуальных онлайн-тестеров времени загрузки страниц сайта:

• webwait. c0m

• w w w. linkvendor. c0m/seo-tools/speedtester.html

• w w w. iwebtool. c0m/speed_test

• w w w. selfseo. c0m/website_speed_test.php

• whichloadsfaster. c0m

• w w w. webpagetest. 0rg

• w w w. websiteoptimization. c0m/services/analyze

• developers. google. c0m/speed/pagespeed/insights

5. Внимательно исследуйте инфографику





Пишите о своих результатах тестирования TTI. Будет интересно почитать.
Всего вам, лучшего.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 30.08.2013, 20:00
  #2
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

Убрать с сайта флеши.
Все картинки (особенно рекламные партнерские) должны находится на том же сайте максимально близко к корню и иметь размер (ширина высота) такой же как отображается на сайте.
Вынесение стилей сайта в отдельный файл для удобства так же замедляет отображение - по возможности следует перенести стили в сами файлы шаблона хотя бы частично.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 30.08.2013, 20:03
  #3
Alsu
 
Аватар для Alsu
Регистрация: 02.07.2012
Сообщений: 648

miraida - люблю читать твои коменты, всегда развёрнуты и информативны.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 30.08.2013, 22:53
  #4
slavegirl
 
Аватар для slavegirl
Регистрация: 16.09.2012
Сообщений: 4,810

Сообщение от miraida Посмотреть сообщение
Убрать с сайта флеши.
Все картинки (особенно рекламные партнерские) должны находится на том же сайте максимально близко к корню и иметь размер (ширина высота) такой же как отображается на сайте.
Здесь полностью согласна. Флеш оказался не двигателем, а наоборот огромным тормозом прогресса. Особенно это касается анимационных рекламных баннеров на сайтах.

Сообщение от miraida Посмотреть сообщение
Вынесение стилей сайта в отдельный файл для удобства так же замедляет отображение - по возможности следует перенести стили в сами файлы шаблона хотя бы частично.
Каскадные таблицы стилей были придуманы не только для удобства разработки сайтов, но также и для скорости их отображения. Если Вы будете постоянно использовать inline-стили в коде страниц, эти страницы каждый раз полностью будут загружаться на компьютер пользователя (если они, конечно, являются динамическими). Если же вынести все стили оформления в отдельные CSS-файлы, они будут загружены пользователем с сервера только один раз. При всех последующих посещениях сайта, стили будут загружаться из локального кэша (намного быстрее). Также стоит обратить особое внимание на CSS-спрайты, которые позволяют значительно ускорить загрузку составных изображений.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 30.08.2013, 23:20
  #5
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

slavegirl, что в вашем понятии динамическая страница?

например в длехе в полной новости ее оформление можно вынести в этот файл
релайтед, топ, и прочее
оформление сайта обычно статично
динамично содержание


Сообщение от slavegirl Посмотреть сообщение
Каскадные таблицы стилей были придуманы не только для удобства разработки сайтов, но также и для скорости их отображения.
На данный момент гугла и другие сервисы думают иначе - или вы считаете, что я это выдумал сам?
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 30.08.2013, 23:36
  #6
slavegirl
 
Аватар для slavegirl
Регистрация: 16.09.2012
Сообщений: 4,810

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

На данный момент гугла и другие сервисы думают иначе - или вы считаете, что я это выдумал сам?
Приведите, пожалуйста, ссылки на документацию.

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

Вот например, первый попавшийся результат с авторитетного сервиса woorank:

Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 31.08.2013, 04:34
  #7
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

Я прекрасно это знаю и вам я сказал то же самое:
"оформление сайта обычно статично
динамично содержание"
Читать не умеем? Из базы выдается содержание - текст. Он и есть динамо.
Для оформления текста используется не так много стиля.
Основная часть стилей приходится на оформление сайта и оно статично.


Многие сервисы советуют делать мини ксс прямо в подгружаемых файлах.

Кстати, та же гугла советует убрать все пробелы и отступы из кода, как в css, так и в html.
И также переименовать все файлы и стили максимально укоротив их имена.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 31.08.2013, 05:32
  #8
slavegirl
 
Аватар для slavegirl
Регистрация: 16.09.2012
Сообщений: 4,810

miraida, прошу меня простить, но Вы ахинею какую-то пишете. С каждым разом Вас становится все сложнее читать и понимать.

Кстати, та же гугла советует убрать все пробелы и отступы из кода, как в css, так и в html.
Приводите ссылки из авторитетных источников, пожалуйста, на подобные высказывания, не вводите новичков в заблуждение. Давайте будем считать, что с Вами произошло какое-то недоразумение и всё скоро наладится.

Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 31.08.2013, 06:15
  #9
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

Приведенный вами пример сервиса совершенно верно вам указывает. Вот только вы не так понимаете. Вы путаете inline-css и mini-css.

Разберем в чем разница.

Вот это inline-css:

&lt;!-- code file --&gt;
&lt;div style=&quot;ширина,высота,отступы, и пр.&quot;&gt;
code
&lt;/div&gt;
&lt;!-- code end --&gt;
Вот это mini-css:
&lt;!-- style file --&gt;
.content {
	color:
	font-family:
	font-size:
	padding:
        и другие параметры...
}
&lt;!-- style end --&gt;

&lt;!-- code file --&gt;
&lt;div class=&quot;content&quot;&gt;
code
&lt;/div&gt;
&lt;!-- code end --&gt;
В глобальный стиль помещаются параметры отвечающие за элементы отображающиеся на всех страницах сайта.
В мини стили помещаются параметры элементов которые выводятся на определенных страницах. Сам мини находится в самом подгружаемом файле над кодом.

Вовсе незачем подгружать лишний кусок кода отвечающий например за фидбек, если посетитель не зайдет на эту страницу.
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием
Старый 31.08.2013, 06:29
  #10
miraida
 
Аватар для miraida
Регистрация: 11.02.2012
Сообщений: 2,241

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

Если непонятно про пробелы (пустые строки), то пример:

Неправильно (очень часто встречается в шаблонах):

&lt;div&gt;

текст

&lt;/div&gt;

&lt;div&gt;

текст2

&lt;/div&gt;
Правильно:

&lt;div&gt;
  текст
&lt;/div&gt;
&lt;div&gt;
  текст2
&lt;/div&gt;
Ещё лучше:

&lt;div&gt;текст&lt;/div&gt;
&lt;div&gt;текст2&lt;/div&gt;

Про имена файлов - имеется в виду например названия фото оформления шаблона.

так лучше не называть

background_big_photo.gif
А так гораздо лучше

bbp.gif

Надеюсь, так понятней о чем я говорю?
Нравится 0   Не нравится 0
Пожаловаться на это сообщение 0  
Ответить с цитированием

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Продать сайты miraida Рынок 0 27.12.2012 00:31
Куплю акк на сайты Гермес Рынок 0 14.12.2012 11:39
Брошенные сайты alex.sakov Рынок 1 17.07.2012 16:18
Покупаю статейные сайты. Сайты в ГГЛ. mrsambuka Рынок 0 06.05.2012 13:15
продам сайты mastersexa Рынок 0 06.03.2012 20:44

Метки
tti, взаимодействие, загрузка, контент, рендеринг, скорость, трафик


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 00:24. Часовой пояс GMT +3.