SitePoint недавно опубликовал книгу « Lean Websites » Барбары Бермес — книгу, в которой представлены новейшие методы повышения производительности веб-страниц. В этой статье Барбара подробно описывает некоторые подводные камни в производительности, которые слишком часто застают нас врасплох.
Веб-производительность имеет значение. Исследования показали, что повышение производительности веб-сайта, например, времени загрузки страницы, может значительно увеличить вовлеченность пользователей и прибыль.
Однако жизнь коротка, а время — деньги. Как веб-разработчики, нам платят за выполнение работы — клиенты, руководители и коллеги, которые могут не ценить важность производительности сайта. Таким образом, соблазн состоит в том, чтобы срезать углы, чтобы выполнить работу — найти самое быстрое решение, не обращая внимания на производительность. В наше время растущего использования мобильных устройств и предпочтений поисковых систем для скудных веб-сайтов средний вес страниц продолжает расти . Это не очень хорошая ситуация.
Искушение: давление, чтобы поддаться желанию легкого или немедленного удовольствия
Последствия того, чтобы поддаться искушению, часто не ощущаются до тех пор.
В этой статье описываются некоторые соблазны, с которыми вы, вероятно, сталкивались в процессе веб-разработки, и почему лучше не поддаваться им.
Использование готовых скриптов
Это типичный сценарий: вам нужно что-то добавить на веб-страницу, например, слайд-шоу. Таким образом, вы гуглите «веб-слайд-шоу» и получаете сотни результатов. Есть так много на выбор, все готово к работе и бесплатно. Почему бы не использовать его как есть, сэкономить время и получить оплату? Не все ли?
Мы часто забываем рассмотреть производительность выбранных нами скриптов. Код хорошо написан? Это оптимизировано? Нужны ли нам все функции, которые он содержит?
В главе 4 « Бережливых веб-сайтов» я изучаю, как различать копирование и вставку, а также копирование и утилизацию .
Красивые картинки и дизайны
Картинка стоит тысячи слов; и когда дело доходит до веб-производительности, картинка может стоить более тысячи строк кода с точки зрения веса страницы! Плохо оптимизированные изображения — самая большая причина вздутых сайтов.
Существуют некоторые особенности изображения, которые могут существенно повлиять на производительность веб-страницы.
Не каждому устройству нужно высокое разрешение
Нет необходимости показывать всем версию изображения с высоким разрешением, если она не нужна. Быть чувствительным к контексту, внимательным и уважительным. Не заполняйте свою страницу ненужными тяжелыми ресурсами, такими как изображения, только потому, что вы не знаете, что еще там разместить. Поверьте мне, никто из ваших пользователей на своем мобильном устройстве в роуминге не хочет загружать изображение сетчатки размером 2 МБ.
Изображения Стоимость пропускной способности
Изображения остаются самыми большими виновниками производительности. В настоящее время они занимают большую часть размеров и использования файлов в Интернете, как показано на диаграмме ниже:
Использование пропускной способности различных типов контента
Искушение, с которым сталкиваются веб-разработчики, особенно при работе в условиях нехватки времени, заключается в простом подключении больших изображений без учета необходимости преобразования их в более эффективный размер или формат изображения.
В моей книге « Lean Websites» я подробно рассмотрю способы оптимизации ваших изображений и других ресурсов сайта, чтобы обеспечить максимальную производительность вашего сайта, особенно на устройствах, подключенных к мобильным сетям.
Оптимизация производительности как часть развития
Когда время — деньги, всегда есть искушение срезать углы. Один из способов срезать углы — это откладывать вещи и никогда не заканчивать их. Тестирование и оптимизация производительности очень важны, но заманчиво отложить их на потом, а потом забыть о них.
Оптимизация производительности часто вообще не упоминается как часть общего жизненного цикла разработки программного обеспечения. Но, как говорит Илья Григорик, « производительность — это особенность », и ее не следует откладывать на второй план.
На Lean Websites обсуждается, как можно автоматизировать оптимизацию и сделать ее частью процесса развертывания с помощью некоторых простых в использовании и бесплатных инструментов.
Библиотеки и рамки
Кристиан Хейлманн, веб-евангелист Microsoft, называет это « смертью тысячи плагинов ». Попытаться использовать современные тенденции веб-разработки так просто, добавив еще один плагин или библиотеку. Иногда мы забываем, что все, что вы разместите на своей странице, будет стоить вам и вашему посетителю, когда речь заходит о производительности. Не позволяйте слишком многим плагинам раздувать ваш сайт. Хайльманн также призывает нас помнить, что «речь идет не о том, что вы можете добавить, а о том, что мы не можем отнять». Что-то, что нужно запомнить в следующий раз, когда вы захотите вставить другой плагин на свой сайт.
Такие библиотеки, как jQuery, Dojo и YUI, являются популярными инструментами, которые помогают разработчикам запускать проекты JavaScript, делая доступ к объектам и методам JavaScript быстрее и проще. Они упрощают процесс кодирования — но какой ценой?
Самые популярные библиотеки
Размер файла этих библиотек может сильно различаться, особенно если они не уменьшены, не сжаты и не сжаты. Сжатие и сжатие jQuery почти в восемь раз меньше, чем его передача по проводам без оптимизации (252 КБ без сжатия, 32 КБ с уменьшением и сжатием).
Важно решить, какую среду или библиотеку использовать в начале проекта. Обычно не имеет смысла использовать более одной библиотеки или более одного JavaScript-фреймворка MVC с проектом, поскольку разные библиотеки стремятся достичь одной и той же цели. И, конечно же, библиотеку следует загружать только один раз, хотя нередко можно видеть несколько экземпляров jQuery на одной странице:
| Интернет сайт | подсчитывать | Загружена другая версия jQuery |
|---|---|---|
| www.reddit.com | 2 | 1.7.2,1.7.1 |
| www.washingtontimes.com | 2 | 1.4.2,1.4.4 |
| www.tudoseo.com | 10 | 1.6.2,1.7.2,1.7.1,1.6.4,1.8.2, 1.4.2,1.10.1,1.4.4,1.9.0,1.8.3 |
Повторная загрузка jQuery, источник: пример Google Big Query в HTTP-архиве за июль 2014 года
Почему вы хотите загрузить более одной версии jQuery? Разве это не крик о хорошей уборке? Там определенно есть какой-то устаревший код, для которого может потребоваться более старая версия jQuery. Следовательно, соблазн достаточно велик, чтобы просто добавить новую версию в дополнение к использованию новых функций в jQuery. Это кажется большим количеством проблем с обслуживанием и наследством. Вместо этого потратьте некоторое время, изучите функциональность вашего сайта и определите, в какую версию конвертировать.
Хотя иногда может быть веская причина для включения нескольких JavaScript-фреймворков, могут быть и другие причины, которые следует проверить. Перекрытие и дублирование плагинов может происходить по разным причинам:
- Команда разработчиков сайта не согласилась с общей структурой или библиотекой для использования.
- Запутанный код, с которым разработчики должны работать. Иногда они обеспечиваются только изолированными включаемыми файлами, которые очень плохо видны для родительского кода. У них может возникнуть соблазн просто подключить предпочитаемую библиотеку и версию, если необходимо, чтобы продолжить свою работу.
- Отсутствующие методы принуждения.
- Беспечность или лень разработчиков.
- Использование других веб-компонентов, включая те же фреймворки.
Lean Websites подробно рассматривает последствия использования библиотек и фреймворков и способы их оптимального использования без негативного влияния на производительность сайта.
Социальные сети, реклама и отслеживание
Если вы работаете в компании с отделом бизнес-аналитики, аналитики или маркетинга, высока вероятность того, что вас попросят включить все, что может помочь измерить успех компании.
Социальные сети, реклама и сценарии отслеживания — это большие соблазны для маркетологов и компаний лучше понять своих клиентов и добавить или найти другие источники дохода, такие как продажа рекламы. Но любой иностранный контент, который вы добавляете поверх своего собственного контента, особенно если он основан на JavaScript, увеличит вес и время загрузки вашей страницы.
Там нет ни одной социальной сети или инструмента отслеживания, который маркетинг не хотел бы попробовать. Lean Websites подробно рассматривает, как правильно и безопасно включать сторонние скрипты и плагины.
Полезное практическое правило заключается в том, что значение, получаемое при использовании стороннего сценария, должно быть больше, чем его производительность.
Вывод
Оптимизация производительности часто является компромиссным упражнением, и всегда необходимо учитывать конкурирующие интересы.
В этой статье были затронуты лишь некоторые из вопросов, связанных с оптимизацией сайта — тема, которая, наконец, становится зрелой.
Lean Websites предоставляет подробный, всесторонний обзор многих факторов, вовлеченных в создание эффективных, эффективных веб-сайтов — от понимания пользовательского опыта и ожиданий до мониторинга производительности, автоматизации задач и оптимизации запросов сервера, ресурсов сайта и сетей, на которых работают наши сайты. ,
Надеемся, что это краткое введение разожгло ваш аппетит, чтобы узнать больше! Я хотел бы задать любые вопросы или комментарии, которые вы можете иметь.