С момента возникновения Интернет, средние размеры файлов неуклонно растут. То, что начиналось как килобайты, разрослось до мегабайтов (да, именно во множественном числе!), и наши файлы неуклонно продолжают расти в размерах. Хотя это явление, на первый взгляд никого не смущает, оно оказывает ужасающее влияние на производительность и ремонтопригодность сайтов. Добавьте к этому процесс старения устройств, ограничения пропускной способности, или медленные скорости вообще… и мы имеем гораздо большую проблему, чем казалось на первый взгляд. К счастью, мы можем контролировать не только размеры файлов, но и то, как наши страницы вообще отображаются в окне браузера. Этот вид контроля дает веб-разработчикам шанс бороться с данной проблемой, и оптимизировать код для более эффективной работы сайта.
Зачем об этом беспокоится?
Отсутствие интереса к этой проблеме полностью понятно, например, в США, где скорость интернет соединения в наши дни практически везде довольно быстрая. Возникает вопрос: зачем беспокоится, если все и так отлично работает?
Производительность и оптимизация включает гораздо больше, чем то, с какой скоростью мы сможем загрузить контент. Существуют также определенные SEO и UX преимущества, которые достойны того, чтобы мы обратили внимание на наш код. К тому же, уменьшение размеров файлов за счет оптимизации кода для лучшей производительности, имеет дополнительный бонус в виде снижения затрат на уровне пропускной способности, как для владельцев хостинга, (особенно для мобильных Интернет-провайдеров), так и для пользователей.
Первый шаг – модульное мышление
Dependency requests являются на сегодняшний день самым большим фактором в замедлении скорости загрузки большинства страниц. Каждый дополнительный запрос раздувает код и добавляет дополнительный уровень сложности в процесс разбора и загрузки. Не забывайте, что вызываемые из вашей таблицы стилей изображения, также сначала разбираются, так что не забудьте, по возможности, ограничить их и использовать альтернативные методы оптимизации, такие как спрайты или SVG.
В продолжение темы внешних зависимостей. Если ваш сайт достаточно велик, и требует, как минимум, нескольких десятков запросов — самое время рассмотреть вопрос об использовании CDN. Использование CDN для распространения контента не будет уменьшать размеры файлов и (или) время загрузки в той мере, в какой это может сделать удаление лишних запросов HTTP, однако оно поможет отсечь все медленные подключения к серверу.
Production среда vs Development среда в кодовой базе
Необходимо очень резкое разграничение при сравнении вашей рабочей среды и уровня производительности базы исходных кодов. Использование лишь только этого шага, уже позволяет наблюдать довольно большое сокращение размеров файлов по всем направлениям.
Сегодня разработчики довольно часто ссылаются на свои production или development среды, особенно в крупных проектах. Но это может быть полезным и в более мелких вещах. Наибольшую разницу между двумя средами можно увидеть при сжатии изображения и уменьшении (сжатии) кода. В конце концов, мы хотим, чтобы наша production среда, была максимально мизерной и быстрой, а наша development-среда должна быть такой же, но без сжатия изображения и кода. Использование встроенных инструментов, таких как «Save for web» в Photoshop, для сжатия может быть хорошей отправной точкой для обработки изображений. Существует множество площадок, где можно обсуждать графические форматы, алгоритмы сжатия, контроль качества и передовые приемы оптимизации изображений.
Использование методов сжатия в коде, как правило, зависит от языка, с которым вы работаете. Помогает или вредит сжатие для понимания вашего кода другими людьми – вопрос спорный, но это уже другой разговор. Когда дело доходит до простых HTML и CSS, целесообразно использовать такие сервисы как htmlcompressor от Google, и YUI Compressor для CSS.
Пишите более умный, читаемый код
Иногда написанный нами код является самым медленным звеном в цепи. Неэффективные CSS или раздутый JavaScript может повредить загрузке больше, чем вы себе представляете. Иногда некоторые части кода переходят в очень подробные детали о важности написания CSS селекторов и объяснений, как браузеры отображают их. Описывать точный путь вниз по цепочке селекторов гораздо менее эффективно, чем просто использовать маленький уникальный селектор. Они оба моделируют один и тот же элемент, но последний работает намного быстрее. JavaScript может навредить еще больше, чем плохо написанный CSS, и часто это можно легко упустить из виду. Сколько раз вы скопировали и вставили external JS library в вашем проекте на самом деле, не углубляясь в сам ресурс? Typekit является наглядным примером того, как подгружая свои шрифты на ваши веб-страницы, сия библиотека может вызвать дополнительные 30 секунд или даже минут дополнительного загрузочного времени.
К счастью, такое происходит редко, но все-таки рекомендуется вызывать JavaScript как можно позже, как в случае с Google Analytics. Это позволяет браузеру анализировать страницу через заголовочные файлы (CSS, HTTP запросы, и т.п.) и отображать разметку еще до того, как JavaScript начинает замедлять ход событий.
Поддерживайте простоту в HTML
Задаваясь целью написать компактные селекторы CSS и свести раздувание кода до минимума, уделите внимание и написанию эффективного HTML. Зачастую CSS Resets нацелены на все элементы и обеспечивают «перезагрузку» стилей. Таким образом, даже если вы не нацелены на применение дополнительных div, то работа замедлится из-за необходимости держать padding и margin на минимальном уровне. Как правило, один или два дополнительных div не приносят много вреда. Но, когда в конечном итоге вы начинаете «бороться» с десятками из них, эта ситуация просто сводит вас с ума. С введением нескольких элементов в спецификации HTML5, у нас появилось гораздо больше возможностей в этой области написания кода.
Google любит чистый код
Приоритетная тенденция Google сегодня — привести Интернет сообщество в надлежащее состояние. Теперь, для того, чтобы занять первые позиции в результатах поиска, страницы должны уделять критическое внимание различным атрибутам и тому, как они воспроизводятся. Вызов слишком большого количества внешних ресурсов, наличие нелепо больших изображений, или даже просто плохо написанный JavaScript могут опустить сайт в поисковом рейтинге. Не забывайте, что хороший поисковый рейтинг строится вокруг передовой практики в области веб-разработок. Google также предлагает довольно солидное руководство по оптимизации различных аспектов вашего сайта для лучшего SEO, которое, к тому же способствует развитию феерических методов разработки.
Заключение
При оптимизации кода, мы должны думать не только о размерах файлов, но и учитывать, как он будет читаться — браузером или пользователем. Нельзя упускать из внимания и факт использования мобильных устройств, ибо, в настоящее время, многие мобильных операторы, поддерживают довольно сдержанные кодовые базы.
Конечно, для оптимизации сайта вам придется потратить дополнительное время. Но, к этому, безусловно, нужно стремиться, поскольку в результате вы добьетесь более высокой производительности сайта, как в обычном браузере, так и на мобильном устройстве, а также получите возможность продвижения лучших методов веб разработки. К тому же, ваш контент будет иметь более высокий рейтинг в поисковых системах.
