Оптимизация скорости загрузки сайта

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

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

• уменьшение объема загружаемой страницы;
• уменьшение процентов графической информации на сайте;
• уменьшение частоты запросов браузера;
• качественный кэш;
• сокращение размера кода CSS и JavaScript.

На самом деле, многие из перечисленных операций являются частью уменьшения объёма страницы (кэш, удаление графики, сокращение кода CSS и Java). Можно сказать, что оптимизация скорости загрузки сайта на 80-90% состоит из операций по уменьшению объёма страницы. Это вполне очевидно, ведь именно «вес» страницы является здесь определяющим фактором скорости работы. Если с такими пунктами, как уменьшение количества изображений на странице все довольно просто, то другие требуют подробного рассмотрения.

Уменьшение объема загружаемой страницы

Для этого применяют утилиту gzip (GNU Zip), которая основана на алгоритме Deflate. Данный алгоритм относится к алгоритму сжатия без потерь. Когда после сжимания при обратном восстановлении файл восстанавливается на 100%, до последнего бита/ пикселя и т.д. Если с графическими и аудиофайлами допустимы микропотери, которые будут незаметны для человеческого глаза и уха, то, например, для файлов, содержащих исходный код, для системных файлов, потеря парочки символов может обернуться тем, что данные программные инструкции перестанут адекватно выполнять свои функции. Поэтому здесь так важно сжатие без потерь.

Подобное сжатие и вообще компоновка информации тесно связаны с принципом Дирихле в комбинаторике:

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

Причем имеет значение только утверждение «хотя бы одно» (хотя бы одна клетка останется свободной, хотя бы в одной клетке будет больше одного кролика), поскольку комбинаций расположения кроликов в клетках может быть очень много. Например, есть 7 кроликов и 5 клеток. Можно в 2 клетках поместить по 2 кролика и по 1 кролику в оставшихся 3. Можно в одной клетке поместить 3 кроликов, а во всех оставшихся по 1. А можно всех семерых кроликов посадить в одну клетку, оставив свободными все остальные. Используя формулу из комбинаторики, n!/(n-k)!*k! (n-кролики, k-клетки, !-факториал, означает такую операцию с числом, например, 5!=1*2*3*4*5=120), получаем 7!/5!*2! = 21 вариант расположения 7 кроликов в 5 клетках. И во всех будет соблюдаться принцип Дирихле.

Математически принцип Дирихле можно озвучить так: не существует инъекции более мощного множества в менее мощное (т.е. невозможно соблюсти принцип «каждому кролику по клетке», если кроликов больше, чем клеток). При работе с электронными носителями информации принцип Дирихле один из основополагающих. В частности, при сжатии данных: если «ячеек» памяти меньше исходного объема информации (байтов), следовательно, хотя бы в одной ячейке байтов будет больше, чем обычно, больше «определённой нормы». Однако в информатике сжатие данных не означает простую утрамбовку больших объемов информации в ограниченный сектор памяти. Здесь полезно рассмотреть принцип работы префиксного кода Хаффмана, который используется в алгоритме Deflate:

1. 1. Как известно любая ЭВМ работает исключительно с двоичным кодом, а все прочие языки программирования есть инструменты, с помощью которых человек-пользователь манипулирует двоичным кодом, задавая тем самым команды компьютеру. Допустим, нужно сжать участок двоичного кода, в котором нули превалируют над единицами (то есть в исходном файле 0 имеет большую значимость, чем 1). Первая замена 00 – 0. Здесь все просто: пусть один 0 по значимости будет равен двум, тем самым происходит сокращение файла без утраты информации, которую он несёт.

1. 1. Вторая замена 01 – 10. И вот тут самое интересное. В сжатом файле необходимо сохранить такое же соотношение значимости между нулем и единицей, как и в исходном файле. По принципу «хорошая уменьшенная модель должна повторять все основные свойства оригинала». Если здесь не произвести перестановку единицы, то в сжатом файле в комбинации 01 единица будет иметь меньшую значимость, чем в комбинации 01 в исходном файле. Ведь в сжатом файле 0 означает 00 (первая замена). Поэтому единицу необходимо вынести перед нулем.

1. 1. Третья замена 10 – 110. Здесь единица уже стоит перед нулем. И чтобы соотношение значимости 0 и 1 осталось прежним, перед нулем добавляется еще одна единица.

1. 1. Четвёртая замена 11 – 111. Аналогичное объяснение.

В итоге 16 битов 00 01 00 00 11 10 00 00 сжимаются до 13 битов 0 10 0 0 111 110 0 0. Логико-смысловая суть такого сжатия, на примере текстового файла, выражается в том, что в результате двоичный код перестаёт учитывать маловероятные буквосочетания, которые почти гарантированно в тексте отсутствуют («щы», «ъы», «чъ» и т.д.). Утилита gzipспособна работать только с одним файлом – сжимать и распаковывать (декомпрессовать). Эта особенность позволяет пользоваться gzipкак конвейером, непрерывной цепочкой пропуская через неё нужные файлы. После обработки в расширении файла появляется суффикс .gz. Чтобы сжать сразу несколько файлов, создав тем самым архив за одну операцию, нужно сначала объединить эти файлы в единый архив с помощью утилиты tar. Тогда gzipбудет воспринимать этот архив как один файл. И можно начать сжатие. Сжатый файл получит добавление в расширении в виде .tar.gzили .tgz.

Итак, как воспользоваться gzip? В системе управления содержимым WordPress в панели управления зайти в файловый менеджер (диспетчер файлов). Найти каталог , открыть его, там будет файл . Кликнуть по этому файлу правой кнопкой мыши и выбрать «редактировать». Если файла нет, то можно в настройках менеджера файлов поставить галочку напротив «показать скрытые файлы». Если и это не помогло, то такой файл в файловом менеджере легко создать по обычной схеме: правая кнопка мыши на свободном участке панели менеджера, создать новый файл, назвать – готово.

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

КЭШ и скорость загрузки страницы

Следующей мерой по уменьшению объема страницы и одновременно увеличению скорости её загрузки является включение кэша на стороне браузера. В данном случае подразумевается небольшой объём памяти, используемой ЭВМ, из которого прикладное программное обеспечение для просмотра web-страниц и будет брать данные. Файлы открытой страницы временно сохраняются в кэше, после чего повторный запрос этой страницы окажется гораздо быстрее. Поскольку страница подгрузится из кэша, а не с сервера. Главным минусом здесь выходит то, что кэш сильно ограничен по размерам. Если он будет продолжать заполняться файлами, то предыдущие файлы автоматически удалятся, чтобы освободить место для новых. Для браузера включить кэш несложно – в тот же файл .

Однако данная процедура ускорит загрузку страниц авторского сайта. То есть браузер не будет постоянно обращаться на сервер, где хранится сайт пользователя, а будет брать нужные файлы из временной памяти компьютера пользователя. А если стоит задача ускорить работу других ресурсов, то есть нужно включить кэш внешних файлов? Здесь полезно воспользоваться сервисом Google Page Speed. Все ссылки на внешние ресурсы объединяются с помощью таких инструментов как Google Analytics и Яндекс.Метрика. В Google Page Speed можно сделать так, что ссылки на все внешние ресурсы, объединяемые с помощью этих инструментов поисковых систем, будут кэшироваться на стороне браузера. Сначала создается файл kesh_js.php, а потом с помощью блокнота notepad++.

После downloads необходимо вставить ссылку из PageSpeed, например, на Яндекс.Метрику, а после realpath нужно написать имя конечного файла. Количество добавляемых запросов ничем не ограничено. Только надо проверять, чтобы названия файлов не повторялись.

Работа с CSS и JavaScript

Существует такая вещь как сеть доставки контента, СДК (Content Delivery Network, CDN). Базируется она на том, что работа сайта связана с несколькими серверами. Под контентом здесь подразумеваются статические составляющие сайта:

Библиотеки Java Script (отвечают за работу приложений).

Файлы CSS (отвечают за внешний вид страницы)

Фотографии и картинки различных форматов (PNG, JPEG, GIF)

Файлы Adobe Flash Reader (в плане работы сайта необходимы для воспроизведения видеороликов, со звуком или без)

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

Кроме того, CSS и JavaScript можно объединить в один файл. И тогда они будут загружаться только один раз, и быстрее, т.к. файл один. Хотя некоторые специалисты рекомендуют все же не смешивать эти файлы, а пользоваться компрессорами для Java Script (Closure Compiler, The JavaScript CompressorRater или готовый компрессор на exlab). С помощью подобных инструментов можно значительно сократить код JavaScript, упростив работу для браузера.

Напоследок следует дать ещё несколько ценных советов по разгону сайта:

• ненужные плагины необходимо снести;
• в плане скорости загрузки страницы самый лучший формат для фотографий это jpg, а для прочих изображений png;
• сами изображения можно дополнительно сжать с помощью инструментов OptiPNG, PNGOUT и jpegoptim;
• кнопками социальных сетей можно пренебречь;
• если допустимо, использовать только один шрифт для сайта;
• реализация эффектов анимации с помощью JavaScript (когда в его файлах можно найти что-то вроде $(«#x»).fade() или такое $(«#y»).slideDown()) – уже вчерашний день, сейчас лучше использовать CSS3;
• не стоит пренебрегать спрайтами для изображений (HTTP-запросов станет меньше, соответственно, уменьшится нагрузка на сервер), спрайт означает, что множество изображений объединяются в одно, точнее воспринимается ПО как единое.

Спрайты делают в CSS файлах. Добраться до этих файлов несложно на примере работы с Joomla!: в админ. панели данной CMS зайти в «расширения», потом в «шаблоны», в параметрах шаблона и будут папки CSS. В «дереве» открытого файла CSS нужно тег img поменять на br (background), объединить изображения, поместить часть спрайта в «окошке», а затем его сдвинуть.