Поделиться “Об оптимизации активных веб-элементов”
Если вспомнить, сколько времени ранее мы все расходовали на то, чтобы оптимизировать активные элементы собственных ресурсов, то становится не по себе. Сегодня пользователь интернета имеет возможность работать в значительной мере улучшенных для этого условиях, мало кто может сетовать на скорость интернет-соединения.
Также теперь мы можем использовать флеш-файлы и большие изображения.
В то же время, появление и быстрое распространение мобильных разработок опять возвращает нас в прошлое. Сегодня появилась необходимость оптимизировать свои ресурсы под мобильные устройства, при этом приложения должны работать быстро. Они должны максимально быстро реагировать на операции пользователя, и одновременно с этим быстро загружать страницы.
Поговорим для начала об оптимизации изображений. Зачастую мы используем одно и то же изображение в различных разделах своего ресурса. Если для примера взять интернет-магазин, то все представленные товары имеют групповой снимок. Давайте рассмотрим ситуацию, когда нам изображение необходимо вывести на трех разных страницах. На одной странице будет представлен общий перечень товаров, на второй – детальная информация об этом товаре, а третья будет служить для вывода самого изображения, чтобы досконально осмотреть товар.
Получается, что одно и то же изображение нам необходимо в трех разных размерах. В том случае, если мы будем загружать для всех трех вариантов один и тот же файл, то он загрузится в своем полном размере.
Для изображения в списке товаров достаточно будет размера картинки 200х200 пикселей. В том случае, когда в списке товаров есть десять позиций, а размер изображения составляет около 1 Мб, то пользователю при загрузке изображений придется выкачать до десяти Мб.
Согласитесь, что это не очень хорошо.
Получается, что если владельцу сайта уделить немного времени на создание различных изображений для разных страниц, тем самым он мог бы значительно сэкономить пользователю Кб. Кроме того, не стоит забывать о том, что нужно принять во внимание разрешение экрана аппарата потенциального пользователя.
Представьте, что пользователь заходит на Ваш ресурс с мобильного устройства, то какой ему смысл в том, чтобы загружать изображение огромных размеров, которое зачастую используют владельцы сайтов.
Воспользовавшись Медиа-запросами CSS можно пользователю отправить изображение меньших размеров.
Отметим, что загрузка изображения с использованием настроек необходимого размера является не всегда правильным шагом. Файлы определенных форматов также могут быть сжаты, притом, что качество не теряется. В этом помогут многие программы, например, тот же самый Photoshop, в котором умеет работать большинство обычных пользователей. Для этого в программе предусмотрена функция «Сохранить для Веб и прочих устройств».
В панели имеется множество опций, но наиболее важной выступает «Качество». При указании качества в 80% можно значительно снизить размер загружаемого файла.
Кроме Photoshop можно просто использовать код для сжатия файлов, но многие специалисты все-таки отдают предпочтение Photoshop.
Для увеличения производительности своего приложения можно снизить количество запросов, которые ведут на сервер. Каждое новое изображение представляет собой новый запрос. Прекрасным решением выступает объединение разных изображений в одно. Такое изображение носит название спрайт. При помощи изменения стиля размещения фонового изображения можно выводить только ту часть картинки, которая необходима пользователю.
Использование спрайтов можно увидеть в Twitter Bootstrap на главной странице. Спрайты используются здесь для вывода внутренних иконок.
Кэширование
Данный механизм может во многом помочь владельцу сайта. Специалисты отмечают, что данная процедура может во многом увеличить эффективность работы ресурса. Всем известно, что всякий браузер кэширует наполнение сайта. Управлять процессом кэширования можно, используя несколько способов. Сейчас мы попробуем разобраться в них.
Предварительная выборка
Html 5 ежедневно развивается. Этот сервис обладает одной полезной особенностью, известной под названием предварительная выборка. При помощи подобного инструмента браузер получает уведомление о том, что пользователю необходимы будут определенные ресурсы. Ему потребуется загрузить информацию о них прямо сейчас. В качестве образца можно привести следующую команду:
<link rel=»prefetch» href=»/images/background.jpg»>
Встроенные картинки
Расскажу Вам одну историю, взятую из собственной практики. Как-то раз получил я заказ на разработку простейшей веб-страницы, которая должна была содержать лишь один файл html. Разумеется, что мне предстояло встроить в один код несколько изображений, и это оказалось немного проблематичным. Данную проблему помогли мне решить схемы URL-данных. Идея заключалась в том, чтобы конвертировать изображения, имеющиеся в кодировке Base64, и трансформировать картинки в атрибут SRC, который относится к тегу IMG.
Благодаря этому методу, изображение можно сделать частью html-кода, и тогда вся страница полностью будет загружаться в виде одного html-запроса. Безусловно, при наличии огромного изображения, строка кода тоже будет не сильно короткой.
Давайте на примере покажу, как это выглядит:
Такой метод можно нередко использовать, только стоит учесть, что IE не любит обрабатывать подобные коды.
CSS
По моему мнению, описание CSS-стилей выступает неким составлением кода. Многие специалисты в своих блогах описывают стили для разных блоков своего сайта, а также о том, какая между ними связь. Поэтому получается, что CSS выступает действительно существенной вещью.
Каждая отдельная часть веб-страницы должна иметь собственный стиль и стоит сказать, что каждый стиль должен четко отличаться от другого. Чтобы хорошо организовать свою работу, можно каждый стиль хранить в отдельном файле.
Это очень удобно. Но стоит также сказать, что тут возникают некоторые проблемы.
Всем опытным специалистам известно, что использование оператора @import является не очень хорошей идеей. Это происходит из-за того, что каждый запрос этого оператора рассматривается в качестве нового запроса. Если Вы располагаете десятью файлами CSS, то это будет означать, что браузер выполнит десять html-запросов.
В этой ситуации браузер не загрузит страницу до того момента, пока каждый из стилей не будут загружен. Если какие-то файлы CSS были удалены, или имеют огромный размер, то загрузка страницы может занять слишком много времени.
В подобной ситуации в помощь придут CSS-препроцессоры. Они помогут справиться со всеми проблемами, о которых было написано выше. Вы будете иметь возможность сохранять все стили в разных файлах, но в то же время препроцессор преобразует их в один файл. Помимо прочего, CSS-препроцессоры предоставляют пользователю множество других удобных функций: вложенные и переменные блоки, наследования, а также Mixins.
Код, как и прежде, будет представлен в формате CSS, но сейчас он будет уже отформатирован и структурирован. Существует несколько препроцессоров, которые можно свободно использовать: «LESS», «Sass» и «Stylus». В качестве простейшего примера кода CSS можно привести следующий:
В результате получается следующая группировка стилей:
Частенько можно столкнуться с тем, что разработчики интернет -ресурсов не задумываются об эффективности CSS. А она, между прочим, определяет скорость вывода веб-страницы. В том случае, когда стили являются неэффективными, то браузер очень медленно будет загружать страницу. Отметим для тех, кто не знает, что браузера рассматривают селекторы CSS не так как обычно, а справа налево.
Также следует знать, что виды селекторов, если их рассматривать с точки зрения эффективности, ранжируются сначала по ID, затем по классу, тегу и универсальности.
Это является свидетельством того, что элемент с ID SET выведется быстрее, чем элемент с селектором тегов. Безусловно, что нет необходимости ко всем элементам добавлять индитификаторы в дерево DOM, тем не менее, важно в обязательном порядке проверить свой код и в тех местах, где это необходимо оптимизировать его.
Если Вы желаете более подробно ознакомиться с подобным вопросом, то советуем Вам посетить такие сайты как «css-tricks.com», кроме того, «developers.google.com».
Как говорилось несколько выше, необходимо обязательно уменьшить величину исходного кода по максимуму. Это нужно для того, что браузер не загрузит страницу полностью, пока не произойдет загрузка всех CSS.
Давайте поговорим о том, какие имеются способы для уменьшения величины файла. Для этого имеется несколько вариантов.
Старайтесь объединять похожие стили, используйте сокращения, по возможности доводите до минимума свой CSS-код. Подобные действия можно осуществить при использовании инструментов, которые разрабатывались для удаления лишних строк и пробелов. Вы можете воспользоваться «Minifycss» или же CSS «Optimiser».
Такие программы относят к обычной практике SEO-специалиста, когда эти инструменты используются для оптимизации приложений или же на серверах, когда приложение пишется на том же языке, что и движок сайта. Зачастую такие компоненты позволяют минимизировать код и преобразовать его в более удобный для приложений.
Не будет лишним, если Вы ссылки на свои CSS-файлы будете включать между тегами <head>. Это позволит браузеру взятые в тег ссылки загружать первыми.
Стоит также отметить, что на работе ресурса положительно отобразиться понижение количества запросов, отправляемых браузером к серверу. Зачастую загрузка файлов «JavaScript» не тормозит загрузку самой страницы, но до того, пока они полностью не будут загружены, некоторые части веб-страницы не будут доступны.
Для минимизации «JavaScript» существует множество библиотек. Они дают возможность уменьшить размер файлов.
Стоит иметь в виду, что со стороны разработки код должен сохраняться чистым.
Большая часть подобных инструментов используют в своей работе переименование переменных, кроме того, перестройку нескольких строчек в одну. Такое действие делает невозможной повторную отладку кода.
Важно знать, что в «JavaScript» нет механизмов, которые предусмотрены для управления модулями. Это привело к тому, что они были разработаны отдельно. Эти модули могут свободно использоваться для различных приложений.
В качестве примера можно рассмотреть следующий (взято с //requirejs.org/):
<!DOCTYPE html><html><head><title>My Sample Project</title><!– data-main attribute tells require.js to load scripts/main.js after require.js loads. –> <script data-main=”scripts/main” src=”scripts/require.js”></script> </head> <body> <h1>My Sample Project</h1> </body> </html>
При необходимости загрузки какого-либо иного сценария Вы можете в середину скрипта main.js внести функцию «require» (). Вот как это будет выглядеть:
require([«helper/util»], function(util) {
//This function is called when scripts/helper/util.js is loaded.
//If util.js calls define(), then this function is not fired until
//util’s dependencies have loaded, and the util argument will hold
//the module value for «helper/util».
});
Применение раздела имен
Если вести речь об упорядочении кода, то нельзя игнорировать разделы имен. Подобная функция в оригинальном JavaScript отсутствует, тем не менее, можно просто добавить один небольшой код, и Вы достигнете того же результата.
Не забывайте о том, чтобы использовать шаблоны дизайна. Не нужно думать над тем, что давно уже изобретено. В наши дни «JavaScript» стал широко распространенным, и имеется множество готовых решений для работы с ним.
Шаблоны дизайна являются многократными решениями для проблем программирования общего плана.
Знайте, что использование подобных шаблонов поможет Вам создавать надежные и функциональные приложения. На самом деле таких шаблонов очень много, и не будем на них останавливаться, поскольку это будет уже не статья, а полноценная книга.
Также не стоит забывать о шаблоне модуля.
Он позволяет создать публичные и частные методы. Также стоит помнить о шаблоне наблюдения, ведь у Вас обязательно имеется модерация событий и есть подписки. Соответственно, есть пользователи, которые отслеживают изменения на Вашем ресурсе, а также связанны с каким-то определенным объектом. Получается, что как только имеет место какое-нибудь действие, то объект должен уведомить наблюдателя об этом.
В ниже приведенном примере покажем Вам, каким образом можно наблюдателя присоединить к объекту пользователей:
Шаблон цепочки функций представляет собой прекрасный способ организации интерфейса модуля (публичный). Это позволит сэкономить время и улучшить читабельность модуля.
var User = { profile: {}, name: function(value) { this.profile.name = value; return this; }, job: function(value) { this.profile.job = value; return this; }, getProfile: function() { return this.profile; }}; var profile = User.name(“Krasimir Tsonev”).job(“web developer”).getProfile();console.log(profile);
Если Вы желаете узнать больше о шаблонах проектирования JavaScript, то на данный момент нет ничего интереснее по данной тематике, чем книга Адди Османи. Обязательно прочтите её, если Вы желаете разобраться в данной сфере.
Сейчас, когда мы более-менее рассмотрели тему, которой была посвящена статья, хотелось бы поделиться некоторыми собственными соображениями, которые касаются управления кодами «JavaScript», а также CSS.
Данный метод является довольно распространенным для обеспечения минимизации, объединения и компиляции логики различных приложений.
Частенько некоторые его элементы начинают запускаться в процессе кэширования, но, тем не менее, все операции протекают в момент выполнения крипта. Это действие приводит к тому, что проверяется логика кода, который помогает нам осуществлять обработку запросов CSS или JS файлов. В это время и происходит упорядочение, минимизация, а также компиляция элементов структуры собственного сайта.
Последние свои проекты мы сопровождали применением инструмента под названием «assets-pack».
Отметим функциональность и полезность этого инструмента. Еще более интересным будет для Вас то, каким образом мы его применяем. Отметим, что подобная библиотека направлена на применение только в ходе разработки сайта.
Данный инструмент не предназначен для внедрения его в исходный код ресурса, а также не используется для разворачивания на сервере. Он применяется только лишь в работе с активными элементами, то есть CSS и «JavaScript».
Библиотека позволяет отслеживать изменения, которые вносятся в папки, и запаковывает (компилирует) код в отдельный файл. После этого Вам больше не придется заботиться ни о минимизации, ни о компиляции.
Вам остается лишь отправить статистический откомпилированный файл на устройство пользователя. Это позволит повысить производительность Вашего приложения, поскольку оно обслуживает исключительно статические файлы, соответственно, упрощает весь процесс. После проведенной процедуры Вам не нужно будет настраивать на своем сервере или же думать над тем, как задать ненужную логику.
Давайте рассмотрим, как можно установить, а также использовать «assets-pack».
Инструмент является модулем «NodeJS», следовательно, перед началом установки необходимо, сначала проверить, есть ли у Вас «Node». Если его нет, то потребуется его установка. Для этого перейдите по nodejs.org/download и выберите подходящий для Вашей операционной пакет установок.
Необходимо знать, что представленный модуль функционирует в конфигурации «JSON». При его запуске из командной строки, Вы заранее должны позаботиться о том, чтобы все нужные установки для него были внесены в файл «JSON». Для этого нужно будет в командной строке (режим эмуляции) набрать следующие команды.
Необходимо создать файл «assets.json» и запустить его на исполнение в этом же каталоге следующей командой:
Настройки должны быть заданы в действующем объекте «JSON», который на самом деле является массивом объектов:
Основная структура объекта элемента имеет следующий вид:
Отметим, что параметры опции «pack» в данной ситуации вовсе не обязательно задавать. Инструмент по умолчанию настроен так, чтобы довести общий размер до минимума. Приведем несколько примеров для настроек:
CSS-оптимизация:
Оптимизация JavaScript:
Процесс оптимизации «.less» файлов происходит несколько по-другому. В этот раз параметры для опции «pack» обязательны. В основном, в их роли выступают точки входа. Вам предстоит импортировать все имеющиеся у Вас «.less» файлы. Те опции, которые будут опущены, не будут доступны для обработки.
Если у Вас возникнут проблемы в этом направлении, то нужно проверить файл «tests/packing-less.spec.js» с помощью специального сервиса «GitHub».
Оптимизация прочих форматов
Инструмент «assets-pack» предназначен для обработки любых файлов. Он позволит нам объединить несколько «html»-шаблонов в один файл.
Для этого необходимо будет немного настроить инструмент:
{ type: “html”, watch: [“tests/data/tpl”], output: “tests/packed/template.html”, exclude: [“admin.html”]}
При этом Вы должны знать, что минимизация кода не будет выполняться, что нужно учесть в своей работе.
Какой же итог можно сделать из выше написанного? Мы, как разработчики, должны пытаться обеспечить наших пользователей тем, чтобы все приложения и сервисы работали с максимальной производительностью.
Нам постоянно нужно пробовать новые инструменты в своей работе, не бояться экспериментировать, и будем надеяться, что положительные результаты не заставят нас ждать.
Описанные в статье советы, конечно же, не смогли охватить все аспекты оптимизации различных активных элементов сайта, но мы постарались передать те приемы, которые обычно, чаще всего, используются и являются эффективными в нашей работе.
Поделиться “Об оптимизации активных веб-элементов”