Скорость – это один из основных показателей юзабилити сайта. Даже если вы создадите самый лучший со времен человечества, интуитивно понятный интерфейс, от него не будет никакой пользы, если сайт будет долго грузиться.
Как бы на этом постулате можно было и закончить статью. Ведь в эти два предложения вложено около половины того, что вы должны знать. Сайт должен грузиться и работать быстро, и мы обязаны сделать все возможное для этого.
Можно использовать много превосходных выражений, таких как «молниеносно», или «очень быстро», или даже «быстрее, чем скорость пули», но они могут оказаться недостаточными. Проще сказать, что нет такого понятия, как «слишком быстро».
Так что же мы подразумеваем под понятием «быстрый сайт»?
Для начала нужно разобраться, какая скорость имеется в виду. Всего есть три вида скорости сайта:
1) Время загрузки
Это время, которое уходит на полную загрузку файлов сайта на любое устройство пользователя. Оно напрямую зависит от скорости соединения и размера файлов. Вы ничего не можете поделать со скоростью связи, но вот что касается размера файлов – тут все в ваших руках.
2) Время обработки
После того, как файлы загружены, они должны быть обработаны и показаны в браузере. На эту скорость влияет то, насколько хорошо написан ваш код. Так что единственное, что вы можете сделать – это следить за чистотой своего кода, но это очень многое может решить.
3) Восприятие скорости сайта или его производительности
А это уже чисто психологический фактор. Бывает так, что быстрый сайт выглядит как медленный, и наоборот, медленный, с применением некоторых трюков, может казаться быстрым. Тут вы должны сообщать пользователю, что происходит, когда он взаимодействует с вашим сайтом или приложением.
Вы должны обратить внимание на все три аспекта скорости сайта, чтобы сделать ваш сайт действительно быстрым.
Так давайте начнем!
Ускорьте ваш CSS
Иногда на CSS уходит больше времени, чем на все остальное. Есть сайты, в которых как раз больше в CSS написано, чем на HTML или JavaScript.
CSS может напрямую влиять на скорость сайта. Вроде бы файлы загружены, а прокручивается контент медленно. Он имеет прямое влияние на то, как быстро устройство способно реально отображать веб-страницы, как только файлы были загружены.
При оптимизации сайта, чтобы он стал работать быстрее, лучше всего начинать работу с CSS.
Неиспользованный код
CSS, который просто «сидит» в ваших таблицах стилей, и ничего не делает, превращает ваши файлы в неподъемные, и тормозит сайт.
Откуда он берется?
Вы удалили некоторый контент, а вот старый CSS убрать забыли. Вы можете изменить класс какого-то элемента и опять-таки забыть о старом CSS. Вот так и скапливается этот «мусор».
Неиспользованный код замедляет загрузку страницы в силу самого своего существования в качестве данных.
Просмотрите таблицы стилей и удалите ненужный код вручную, либо используйте специальные программы для этого.
«Тяжелые» свойства
Конечно, есть также CSS свойства, которые требуют на загрузку больше времени, чем другие. Классические свойства, такие как ширина, высота и цвет все еще быстрые. Но такие свойства, как тени элементов и им подобные, занимают много времени.
Процесс добавления тени к элементу является весьма сложным. Что интересно, вычислительная мощность, которая требуется для этого, может значительно варьироваться в зависимости от конкретных размеров тени.
То же самое верно и для других свойств, таких как границы радиуса и преобразования.
Опять же, это будет иметь незначительное влияние на загрузку страницы на вашем настольном компьютере или ноутбуке. Мобильные же устройства могут серьезно страдать от этого. Все ненавидят порывистую прокрутку.
Тем не менее, взвесьте все «за» и «против» использования таких эффектов – не переусердствуйте.
CSS анимация
Некоторая анимация может загружаться достаточно быстро, другая – занимать много времени. Особенно это чувствуется на мобильных устройствах.
Из CSS эффектов, которые работают достаточно быстро, стоит отметить поворот, прозрачность, положение и масштаб.
Проверьте свой сайт – какие элементы могут быть анимированы, оставаясь при этом быстрыми в загрузке.
Что еще хотелось бы отметить касательно CSS – будьте аккуратны с селекторами и используйте CSS препроцессоры, которые делают ваш код чистым, аккуратным и валидным.
Ускорьте JavaScript
JavaScript может быть очень медленным. Чтобы быть более конкретным, JavaScript может иметь гораздо большее влияние на «обработку», чем CSS. Хуже того, используя JS, можно получить экспоненциально тяжелее по размеру файл для того, чтобы достичь, казалось бы, тривиальных целей.
Наши пользователи часто становятся жертвами, особенно на мобильных устройствах.
Мы часто используем плагины, которые иногда могут быть несовместимы друг с другом. Если вы действительно хотите ускорить ваш веб-сайт, выиграть миллисекунды (или целые секунды, в некоторых случаях), вот что вам нужно сделать:
JavaScript должен быть внешним
Как CSS, лучше держать JS во внешних файлах, и связать с HTML. Не думайте, что это мелочи: внешняя CSS и JS файлы кэшируются браузером.
Так что, когда пришел запрос на эту же страницу, или другие страницы вашего сайта, которые используют один и тот же CSS или JS, то они не будут загружаться заново, будут использоваться кэшированные файлы. Это делает загрузку сайта более быстрой, так же как и обработку.
Включите JS файлы внизу страницы
Теоретически, браузер считывает ваш код снизу вверх. И привязанный файл с JavaScript может значительно притормозить загрузку вашего HTML.
Улучшить работу пользователя и уменьшить воспринимаемое время загрузки можно, связывая эти внешние файлы в нижней части страницы.
Избегайте фреймворков, если можете
Если вы разрабатываете полноценное приложение, то проигнорируйте этот раздел. Гибкий и легкий каркас может дать разработчикам огромное преимущество. Для малых и средних веб-сайтов, однако, в фреймворки JavaScript могут быть излишними. На этих сайтах JS будет в основном использоваться для администрирования контента.
Наймите разработчика
И правда, если вы сами – не программист и не разработчик, наймите понимающего человека, если видите, что что-то пошло не так. Он быстрее разберется, что к чему, исправит ошибки. Такие люди имеют опыт в поиске подобных проблем и их решении.
Самое главное, он будет знать, как сделать то, что должно быть сделано, с меньшим количеством кода. Меньше кода (обычно) работает быстрее и (всегда) загружается быстрее.
Изображения
Изображения на сайтах, как правило, большие и громоздкие, занимают много времени для загрузки. Все потому, что мы выбираем изображения хорошего качества, а они много весят.
В то время, когда каждый байт имеет значение, мы просто не можем обойти эту проблему стороной. Но, к счастью, у нее есть много вариантов решения.
Постарайтесь максимально использовать код, а не изображения
Проще говоря, если вы можете в каком-то месте сделать визуальную красоту с помощью CSS и JavaScript, не прибегая к изображениям – действуйте.
Можете также использовать SVG изображения, потому что они – не что иное, как код XML, который отображается в виде изображения. Таким образом, они должны быть использованы, когда вам нужно что-нибудь, связанное с вектором.
Выберите правильный формат для работы
Все беды с изображениями отпадут сами собой, как только вы разберетесь, какой формат использовать в конкретном случае.
Для сложной графики, такой как фотографии, используйте формат JPEG.
Для простой графики, которая использует несколько цветов, такой как иконки и логотипы, используйте SVG и / или PNG.
GIF анимации — только тогда, когда вы не можете оживить что-либо с CSS3 или JavaScript. Анимированные GIF-ы работают лучше, как содержание, чем элементы интерфейса.
Это действительно все. Если вы сделаете это, то можете получить довольно приличное качество при относительно небольших размерах файлов.
Есть еще один новый формат, WebP, который поддерживается Chrome и Opera автоматически. Google утверждает, что WebP файлы 26% меньше, чем такие же в формате PNG.
Это хорошая новость, за исключением двух вещей: Firefox и IE. Теперь, если вы не возражаете против использования дополнительных сценариев, вы можете использовать формат WebP сейчас, сегодня. Просто скачайте WebPJS.
Единственный нюанс – он не будет работать без JS.
Сжатие
Есть два вида сжатия, которые вы можете использовать для ваших изображений. Во-первых, у нас есть сжатие с потерями. Это использование формата JPEG. Он позволяет сжать любой файл примерно столько, сколько вам нравится, с пониманием того, что качество будет хуже и хуже.
Сжатие без потерь используется в таких форматах, как PNG, и может уменьшить размер файла в некоторой степени. Тем не менее, он имеет свои пределы. Всегда наступает момент, при котором невозможно сделать изображение меньше без потери качества.
Если у вас есть Photoshop, или другой редактор изображений, лучше использовать их для сжатия изображений, так как вы можете увидеть, что получится в итоге.
Реализация сжатия изображения и изменение размера в CMS
Если вы используете CMS WordPress, она будет автоматически изменять размер изображений, которые слишком велики. Можно также легко найти плагины, которые будут автоматически сжимать их для вас.
Имейте в виду, рекомендуется автоматическое сжатие в случаях, когда вы знаете, что собираетесь загружать много изображений аналогичного качества для одной и той же цели. Фотоблог является одним из примеров.
Если вы делаете сайт, где пользователи загружают свои собственные изображения, автоматическое изменение и сжатие является абсолютной необходимостью, и именно поэтому каждая социальная сеть так делает.
Общие советы
А теперь – несколько советов, которые не подходят ни под одну из описанных выше категорий.
1) Минимизируйте все. Уберите из кода лишние строки, пробелы, переносы строк. Это может значительно уменьшить размер файла.
2) Используйте сжатие. При условии, ваш сервер настроен правильно, весь код может быть отправлен в браузер в сжатом формате. Текстовые файлы сжимать очень хорошо, значительно уменьшая размер отправляемых файлов.
Конечно, это далеко не все советы, которые можно было бы дать по поводу ускорения работы сайта – это всего лишь краткое руководство. Всегда есть чему учиться и всегда нужно стремиться к лучшему. Но вооружившись этими знаниями, вы уже сможете сделать ваш сайт быстрее.
0 комментариев