Сводная информация об исполнителе

Отчет обускорениизагрузкисайта

Etcetera.kz

10января, 2018

Быстрая навигация

Используемые термины.. 4

№1. Оптимизация графических элементов. 8

№2. Конвертация графических элементов в WEBP. 10

№3. Оптимизация CSS и JavaScript файлов. 12

№4. Минимизация редиректов. 13

№5. Осуществление gzip-сжатия файлов. 13

№6. Настройка кэширования для браузеров. 15

№7. Кэширование внешних скриптов. 17

№8. Оптимизация SQL-запросов к базе данных. 18

№9. Установка ограничений для роботов. 18

Выводы и рекомендации. 22

Используемыетермины

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

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

Парсер–программа по поиску и сбору данных по строго заданным параметрам.

GZIP - утилитасжатия и восстановления (декомпрессии) файлов, использующая алгоритм Deflate. Применяется в основном в UNIX-системах, в ряде которыхявляется стандартом де-факто для сжатияданных.

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

Редирект- этоперенаправление браузера с одной веб-страницы на другую.

СУБД–система управления базой данных.

Сервер–удаленный компьютер содержащий специализированное ПО для обслуживания конкретного сайта/сайтов.

Браузер–программа для посещения сайтов в интернете и их просмотра.

JavaScript–язык программирования интерпретируемый на стороне браузера.

Тематическийиндексцитирования (тИЦ) - мера веса (авторитетности) всегосайта для поисковых систем

Замер показателей сайта до начала работ онлайн-инструментом “GooglePageInsight”

На рисунке ниже показаны первоначальные замеры общего показателя сайта до начала работ (для десктопной версии сайта):

Далее рисунком ниже показаны первоначальные замеры общего показателя сайта до начала работ (для мобильной версии сайта):

Вывод: как мы видим исходя из предыдущих скриншотов показатели сайта крайне низкие несмотря на то, что сам инструмент “GooglePageInsight” имеет погрешность.

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

№1. Оптимизация графических элементов.

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

Зачастую загружаемое изображение на сайте имеет размеры (длины и ширины) гораздо больше, чем те размеры которое оно использует для отображения у пользователей. При этом ресурсы самого сервера тратятся именно на поддержание оригинальных размеров изображения. Другими словами если картинка имеет длину и ширину 1190x700, а на сайте отображается с габаритами 200x200, то сервер сначала обработает большую картинку и только потом уменьшит ее для пользователя в соответствии с параметрами заданного дизайна сайта.

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

Суть данного метода заключается в усреднении количества точек на дюйм.

№2. Конвертация графических элементов в WEBP.

Об этом факторе: в связи с популярностью использования браузеров на движке Chromium. Компания Google представила собственный формат изображении для web-документов, который существенно облегчает загрузку страниц сайта как для пользователей, так и для обработки сервером. Важно отметить, что в большинстве случаях изображения в формате WEBP до 80% могут весить меньше, чем оригиналы и иметь одинаковое качество отображения.

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

Конструкция для .htaccessдля автоматической замены изображений выглядит так:

№3. Оптимизация CSS и JavaScript файлов.

Об этом факторе: неоптимизированные СSSи JavaScriptфайлы имеют большой размер следовательно это влияет на длительность обработки их сервером и временем ожидания пользователей.

Суть данного метода заключается в вымещении “нулевых” байт реальным кодом (1 символ = 1 байт). Иными словами – каждый пробел, отступ и любое пустое пространство в коде этих файлов является символом (“пробел” – это тоже символ). Благодаря свободному синтаксису для данных форматов мы удалили ненужные “пробелы” и тем самым сократили общую длину выполняемого кода.

№4. Минимизация редиректов.

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

Для минимизации редиректов необходимо проверить наличие старых и “битых”URL’ов которые уже не присутствуют в индексе поисковых систем. А для дублирующих страниц склеить URL. Поэтому устранив лишние малоэффективные или не эффективные редиректы мы позволим серверу быстрей обрабатывать запросы к базе данных и тем самым пользователь намного быстрей будет получать доступ к требуемому контенту.

№5. Осуществление gzip-сжатия файлов.

Об этом факторе: GZIP обеспечивает сжатие без потерь, иными словами, исходные данные можно полностью восстановить при распаковке. Он основан на алгоритме DEFLATE, который использует комбинацию алгоритма LZ77 и алгоритма Хаффмана. Иными словами, этот метод сжатия файлов значительно ускоряет загрузку всего сайта, а не только некоторых конкретных элементов. Единственный его недостаток – это потребление ресурсов сервера во время операций запаковки и распаковки файлов.

Процесс получения сжатого контента между клиентом (браузером) и сервером достаточно прост. Если у браузера есть поддержка GZIP/DEFLATE, он даёт серверу понять это благодаря заголовку “Accept-Encoding”. Тогда, сервер может выбрать — отправлять содержимое в сжатом или оригинальном виде.

№6. Настройка кэширования для браузеров.

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

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

#Кэширование

FileETagMTimeSize

<IfModulemod_expires.c>

ExpiresActiveOn

ExpiresByTypeapplication/javascript "accessplus 1 year"

ExpiresByTypetext/javascript "accessplus 1 year"

ExpiresByTypetext/css "accessplus 1 year"

ExpiresByTypetext/html "accessplus 7 day"

ExpiresByTypetext/x-javascript "access 1 year"

ExpiresByTypeimage/gif "accessplus 1 year"

ExpiresByTypeimage/jpeg "accessplus 1 year"

ExpiresByTypeimage/png "accessplus 1 year"

ExpiresByTypeimage/jpg "accessplus 1 year"

ExpiresByTypeimage/x-icon "access 1 year"

ExpiresByTypeimage/vnd.microsoft.icon "access 1 year"

ExpiresByTypeapplication/x-shockwave-flash "access 1 year"

</IfModule>

№7. Кэширование внешних скриптов.

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

1) Сервер сначала выкачивает этот скрипт сохраняя у себяв буфере.

2) Затем этот скрипт отправляет пользователю.

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

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

Примеры внешних скриптов: частные счетчики статистики; шрифты; коллбэквиджеты; виджетытех.поддержки и некоторые другие.

№8. Оптимизация SQL-запросов к базе данных.

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

Данная процедура значительно сокращает объем базы данных, что позволяет серверу быстрей обрабатывать пользовательские запросы.

№9. Установкаограничений для роботов.

Об этом факторе: не все поисковые роботы и роботы которые занимаются сканированием/парсингом в сети одинаково полезны. Большинство из них просто собирают информацию для частных сервисов и агреггатор такие как: SEOrush, ahrefs, megaindex, liveInternet и другие не несут сайту никакой пользы, а только осуществляют дополнительную нагрузку для сервера. По этому Мы добавляем их в черный список на посещение, а для нужных нам поисковых роботов: Google, Yandex, Mail.ru, Bingмы создаем задержку между каждым их обращением к серверу в 25 секунд (директивой Crawl-delay: 25), тем самым отдавая наибольший приоритет для обычных посетителей сайта (пользователей).

На рисунке ниже показано два графика ежедневной нагрузки на сервер “до работ” и “после работ”:

Замер показателей сайта после работ онлайн-инструментом “GooglePageInsight”

Выводы и рекомендации

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

Сводная информация об исполнителе

Компания «IMarketing» специализируется на развитии и продвижениибизнеса в Интернете, в частности, на поисковойоптимизации и продвижении веб-сайтов на просторах Интернета.

Компания «IMarketing» – это:

· Более12 летопыта на рынке;

· Более1 400проектов по продвижениюбизнеса в Интернете;

· Более7 000ключевыхслов в поисковомпродвижении веб-сайтов;

· Более1 000 000посетителей, привлекаемых на сайтыпартнёров ежемесячно.