10 способов суперускорения JavaScript разработки


Оглавление (нажмите, чтобы открыть):

Стоит ли учить JavaScript: перспективы, ситуация на рынке труда, мнения экспертов

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

Экскурс в теорию: информация о JavaScript, сферах применения и особенностях языка

JavaScript (JS) — высокоуровневый язык программирования, который поддерживает императивный, функциональный и событийно-ориентированный стили. Относится к языкам с динамической типизацией, входит в группу интерпретируемых языков.

Справка: в разговорной речи специалисты употребляют названия «яваскрипт», «джейэс» и даже «жабаскрипт». Кстати, у нас есть мини-словарь профессионального сленга программистов.

В число основных особенностей JS входят:

  • Динамическая типизация — тип данных определяется в момент присваивания значения константе или переменной.
  • Интерпретируемый язык — код приложения интерпретируется при обращении, не требуется предварительная компиляция.
  • Функции как объекты первого класса, то есть функции в JavaScript можно возвращать из функций, передавать в качестве параметров в другие функции, присваивать переменным.
  • Поддержка прототипного и объектно-ориентированного подхода.
  • Универсальность — все популярные браузеры поддерживают JavaScript.

ES6, современная спецификация JavaScript, поддерживает синтаксис стрелочных функций, дестракчеринг, операторы spread и rest, модули и классы. Эти и другие инструменты делают JavaScript гибким и выразительным языком программирования.

Важная особенность JavaScript — развитая инфраструктура. Вокруг этого языка программирования сформировано многочисленное сообщество. Разработчикам доступны мощные инструменты, например:

  • Библиотеки и фреймворки для создания приложений (React, Vue).
  • Сборщики (Webpack, Gulp).
  • Вспомогательные библиотеки (Lodash, Underscore).
  • Генераторы статических сайтов (Gatsby.js, Next.js).

Сферы применения JavaScript

В первую очередь JavaScript широко используется во фронтенд-разработке. Этот язык вместе с HTML и CSS входит в базовый набор инструментов фронтендера. На JavaScript создаются приложения, которые исполняются в браузере на стороне клиента. Они обеспечивают интерактивность сайтов. Например, когда пользователь заполняет форму и нажимает кнопку «Подписаться», мгновенная реакция на это действие обычно обеспечивается кодом, написанным на JavaScript.

Сферы применения JavaScript не ограничиваются браузерами и веб-приложениями. С помощью этого языка решают такие задачи:

  • Разработка нативных приложений. Например, с помощью фреймворка React Native создаются приложения для Android и iOS.
  • Серверная разработка. Например, Node.js применяется для бэкенд-разработки. Об этом направлении в перспективе выйдет отдельная статья.
  • Разработка десктопных приложений. Например, JS применяется в офисных пакетах Microsoft и OpenOffice, в приложениях компании Adobe.
  • Программирование оборудования и бытовой техники, например, платёжных терминалов, телевизионных приставок.

В данной статье рассматривается перспектива изучения JavaScript для использования в разработке фронтенда.

Популярность, рейтинг и перспективы JavaScript

Как отмечалось выше, по состоянию на середину 2020 года JavaScript входит в число самых популярных языков программирования. JS занимает седьмое место в индексе TIOBE, который составляется на основе статистики поисковых запросов. Этот язык на данный момент популярнее, чем PHP, Swift, Objective-C, Ruby.

JavaScript занимает первое место по популярности в сообществе разработчиков на GitHub. Этот показатель рассчитывается по количеству репозиториев.

Как и PHP, JavaScript можно считать одним из способов быстро войти в разработку. JavaScript-программистов берут на работу веб-студии, которые есть как в крупнейших городах, так и в регионах.

О перспективах JavaScript подробно рассказывают эксперты в комментариях ниже. Стоит обратить внимание на два момента.

Первый: как отмечалось выше, JavaScript обеспечивает интерактивность сайтов и используется в популярных современных браузерах. Эти задачи можно решать и с помощью альтернативных технологий, например, WebAssembly, но это не вопрос краткосрочной перспективы. В ближайшем будущем с большой долей вероятности JS останется основным языком программирования фронтенд-приложений.

Второй момент: в настоящий момент растет популярность прогрессивных веб-приложений (PWA, progressive web apps). Эту технологию активно продвигает Google. Прогрессивные веб-приложения представляют собой гибрид сайта и мобильного приложения. В среднесрочной перспективе у PWA есть хорошие шансы отвоевать значительную долю рынка у нативных приложений.

Для разработки PWA применяется JavaScript. Например, сайты, созданные с помощью генератора Gatsby.js, поддерживают функциональность прогрессивного веб-приложения из коробки. Это ещё один плюс в пользу востребованности JS в ближайшей перспективе.

Сколько платят фронтендерам, или О зарплатах JavaScript-программистов

Заработок JavaScript-программиста зависит от уровня квалификации, региона проживания и работы, режима трудоустройства.

По данным trud.com на май 2020 года, средняя зарплата JavaScript-разработчика в России составляет 100 000 рублей. Больше всего вакансий на этом ресурсе с предложением зарплаты в диапазоне от 62 000 до 121 000 рублей (см. иллюстрацию). Чаще всего фронтенд-разработчики требуются в Москве, Санкт-Петербурге и Новосибирске.

По данным NewHR, вилка зарплат фронтенд-разработчиков уровня middle в июне 2020 года составляла от 160 000 до 190 000 рублей. По информации «Мой круг», медианная зарплата JavaScript-программиста в России во втором полугодии 2020 года составляла 85 000 рублей.

На сайте hh.ru по состоянию на конец июля 2020 года есть 81 вакансия для JavaScript-разработчиков в Казани (город взят для примера). Уровень зарплаты варьируется от 20 000 до 165 000 рублей.

Информацию по своему региону можно получить самостоятельно с помощью сайтов поиска работы.

Перспективы JavaScript: взгляд экспертов

Мы попросили известных в отрасли экспертов поделиться взглядами на перспективу изучения JS, ситуацию на рынке труда и востребованность JavaScript в будущем.

Сергей Рубанов: спрос на рынке труда JavaScript-разработчиков сильно превышает предложение

По вашему опыту, почему стоит изучать JS?

Несмотря на то, что JS имеет свои странности, он невероятно прост для изучения и терпим к ошибкам. Экосистема языка хорошо развита, так что если вы чувствуете в себе силы, то сможете легко настроить более строгие правила для написания кода, используя различные инструменты, позволяющие избегать популярных ошибок или даже добавить статическую типизацию. В данный момент JavaScript — единственный высокоуровневый динамический язык, доступный практически везде, в том числе (и в первую очередь) на веб-страницах. Это позволяет выучить один язык, частично переиспользовать готовые наработки для клиента, сервера, в роботостроении, для интернета вещей, даже для машинного обучения. А ещё у JavaScript огромное, невероятно классное и самое открытое комьюнити.

Какие перспективы у этого языка программирования по сравнению с другими языками?

JavaScript — один из самых распространенных языков в мире. В индексе TIOBE в данный момент он занимает 7 место (и индекс растет), а по количеству репозиториев на GitHub и популярности по результатам опроса Stack Overflow он находится на первом месте и является вторым желаемым языком после Python. Пакетный менеджер npm является самым крупным пакетным менеджером из всех существующих. Все это говорит о том, что перспективы у языка великолепные.

Будет ли он востребован в будущем?

Только недавно стали появляться технологии, которые в чём-то смогут заменить JavaScript в браузерах, но понадобится ещё очень долгое время, прежде чем эти технологии достигнут достаточного уровня развития и научатся всему тому, что может JavaScript. К тому же на сервере и во встраиваемых системах у JavaScript есть много альтернатив, но и там он имеет свою нишу. Многие компании вкладывали и вкладывают огромные деньги в развитие движков, в которых JavaScript исполняется, что позволяет делать язык всё эффективнее и не терять своей актуальности.

Каковы перспективы JS-разработчика на рынке труда?

Спрос на рынке труда JavaScript-разработчиков сильно превышает предложение, отсюда же и хорошие зарплаты. Компании ищут разработчиков любого уровня, в том числе начинающих.

Почему новичку стоит обратить внимание на этот язык?

количество информации, которую можно найти в интернете;

развитая экосистема в виде огромнейшего количества библиотек и инструментов для разработки;

очень хорошее комьюнити;

одного языка достаточно, чтобы писать веб приложения, мобильные приложения, серверы и многое другое;

высокий спрос на рынке труда;

Сергей Рубанов, опытный разработчик и лидер сообществ. Приглашённый эксперт TC39 (комитет, который занимается разработкой языка JavaScript), участник WebAssembly Community Group, член команды Babel, соорганизатор BeerJS Moscow, WebAssembly Moscow, ведущий канала Juliarderity (совместно с Романом Дворновым).

Павел Черторогов: эх, а ведь были времена, когда разработчики стеснялись говорить, что они пишут на JavaScript. Сейчас всё не так


По вашему опыту, почему стоит изучать JS?

JavaScript в последние годы стал набирать безумные обороты.

На это была простая причина: клиенты стали более требовательными к скорости работы и отзывчивости интерфейсов. Поставив лайк, посетители хотят сразу видеть +1, а не ждать полсекунды, пока сервер ответит. Нажал кнопку, моментально получил реакцию. И это можно сделать, если избавиться от сетевых задержек между сервером и клиентом — перенести исполняемый код, который дает результат максимально близко к клиенту, то есть в его браузер.

А в браузерах обосновался старичок JavaScript. Причем если лет 5-10 назад было стыдно говорить, что ты программируешь на JavaScript, так как его было сложно считать удобным и производительным языком, то после выхода ES6 удобство резко возросло и продолжает расти благодаря работе комитета TC39 (куда входят куча спецов из больших компаний), который развивает синтаксис языка.

Производительность языка постоянно увеличивается. Но благодаря большому комьюнити, интересу больших интернет гигантов к языку, неуклонно растет количество инструментария, которые сильно облегчает разработку. Например, ESlint (проверка стиля кода), Prettier — автоформатирование кода, Babel — для транспилинга кода и напиcания всяких AST-трансформеров, JIT-компиляторов.

Но что не может не радовать, так это TypeScript, который позволяет писать статически типизированный код (Flowtype проиграл для меня войну). Статическая типизация позволяет писать более стабильный и качественный код, дает плюшки автоподстановки в IDE. В общем, корпоративный сектор все больше задач может доверить миру JavaScript. Современный джаваскрипт с классами, декораторами, интерфейсами, типизацией все больше и больше становится похожим на Java в хорошем смысле этого слова. А если учесть, что JavaScript сейчас работает как на клиенте (в браузере), так и на сервере (NodeJS), то это это для бизнеса открывает возможность писать изоморфные приложения.

Будет ли этот язык востребован в будущем?

За пару лет популярность JS должна будет только расти. Ведь столько еще чудовищных интерфейсов вокруг, столько мертвых страниц, сгенерированных сервером. JS будет теснить PHP и Ruby.

Так или иначе JavaScript еще будет востребован как минимум лет 10, дальше прогнозировать сложно.

Что угрожает JavaScript/TypeScript:

WebAssembly маячит на горизонте, но он пока еще незрелый. Если проблемы с доступным функционалом и инструментарием. Со временем он отберет часть задач на себя (будет чуть меньше работы JS разработчикам), но убить JS он не сможет (т.к. он использует существующие части виртуальной машины JavaScript и ее среду изоляции).

Страшнее всего для JS-разработчика смена способа потребления контента. Допустим, мы откажемся от браузеров, перейдем на голосовых помощников, или нам вставят электрод в голову, или приклеят хитрую линзу на роговицу. Тут может оказаться, что JS будет не тем языком, который будет использоваться в этих каналах передачи информации. Хотя, поживем — увидим.

В любом случаем надо постоянно учиться и развиваться, чтоб соответствовать текущему времени. Но, к бабке не ходи, лет через 10 надо точно будет чему-то сильно переучиваться.

Каковы перспективы разработчика JS на рынке труда?

Сейчас есть некий перекос в сторону фронтенд-разработчиков, которые производят wow-эффект на клиентов. К примеру, на Украине сейчас активно ищутся React/Vue/Angular разработчики. И нередко зарплата таких фронтенд-специалистов с опытом 1-2 года по зарплате соизмерима со среднестатистическим Java-бэкендером с опытом 6-8 лет. Нужны легкие деньги после универа?! Вперед в JS!

Почему новичку стоит обратить внимание на JS?

Начав учить этот язык, вы сможете стать как фронтендером, так и бэкендером. Посмотреть, на какой стороне вам больше нравится, понять, к чему душа лежит — к удобству для людей или к производительности и нагрузкам на железяках.

Павел Черторогов, архитектор информационных систем, GraphQL-гуру.

Роман Дворнов: JavaScript вряд ли куда-либо денется в ближайшие годы

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

JavaScript находится в группе языков, которые постоянно недооценивают. С одной стороны, можно сказать, что у JavaScript есть определенные недостатки, связанные с ошибками в дизайне языка. С другой стороны, эти недостатки могут также являться и плюсами, позволяя решать определенный класс задач. Тем не менее, новые редакции языка и его имплементации, со временем исправляют ключевые недостатки.

Кстати, о новом. JavaScript — один из немногих языков с таким немалым возрастом (был создан в декабре 1995-го), который настолько динамично развивается сегодня. Формально все началось в 2015 году, когда вышла новая редакция ES2015 (или ES6) и было решено выпускать новую редакцию каждый год, хотя на самом деле всё началось задолго до этого. Не каждый год случаются значительные изменения, но изменения происходят и чувствуется темп. Можно следить за работой TC39 (комитет работающий над спецификацией языка), участвовать в обсуждениях предложений, вносить свои предложения и так далее – процесс открыт, и это здорово. К тому же, сегодня имплементаторы внедряют новые фичи накануне принятия новой редакции спецификации языка, а не несколько лет спустя, как это было раньше.

Низкий порог входа всегда был предметом споров: с одной стороны, вовлекается больше людей, с другой — их уровень как специалистов невысок. Это, плюс часто неглубокое изучение, обычно и создает негативное отношение к языку. Чтобы использовать JavaScript эффективно, его нужно изучать полностью, и дополнительно множество смежных областей, а особенно Computer Science, как это делают в случае с другими языками. Все больше задач с применением JavaScript не уступают по сложности задачам решаемым с другими языками.

Если говорить о перспективах, то JavaScript вряд ли куда-либо денется в ближайшие годы. Во-первых, это единственный язык такого класса, поддерживаемый браузерами, и нет предпосылок, что это может поменяться, хотя попытки были. Всё, что создается как альтернатива JavaScript, в конечном итоге конвертируется в него.

Во-вторых, необходимость шарить логику между клиентом и сервером, Server Side Rendering и прочее, укрепляет позиции JavaScript на серверной стороне. В-третьих, тулинг для JavaScript, как и для клиентского веб-стека, по большей части написан на JavaScript.

В-четвертых, колоссальные ресурсы, которые вкладываются в развитие JavaScript движков, дают свои плоды: снижаются требования движков, и они начинают работать на все более слабых платформах и устройствах. Так что специалисты со знанием JavaScript будут востребованы еще достаточно долго, пока программисты вообще будут востребованы, если вы понимаете о чем я 😉

Роман Дворнов, эксперт в области фронтенд-разработки, ведущий канала Juliarderity (совместно с Сергеем Рубановым). Профиль на GitHub.

Андрей Оконечников: будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS

По вашему опыту, почему стоит изучать JS? Какие перспективы у этого языка программирования по сравнению с другими языками?

Несмотря на интересные альтернативы, такие как ReasonML, Kotlin и уже существующие языки, которые компилируются в JS, такие как ClojureScript и Elm, это никак особенно не влияет на всё растущую популярность JS. Причина для того, на мой взгляд, в низком пороге входа и огромной экосистеме (npm). На JS написано несколько миллионов опенсорс модулей, которые можно установить за считанные секунды. Плюс возможность открыть консоль разработчика в браузере и начать писать код.

Развитие распределенных сред разработки, которые работают напрямую из браузера, например CodeSandbox, ещё более уменьшают порог входа для новичков. Инструменты разработки становятся лучше и лучше, позволяя использовать JS в больших командах.

Одновременно с этим, растущая производительность JS runtimes, например V8, делает использование этого языка все более приемлемым на платформах вне веб-браузеров.

Благодаря инициативам ECMA этот язык также очень быстро развивается, получая все более современные фичи.

Уже сейчас JavaScript — один из самых популярных языков программирования в мире. И со временем он только будет набирать популярность благодаря выходу на новые платформы, такие как IoT и тд.

Будет ли JS востребован в будущем?

JavaScript никуда не денется в ближайшее время, хотим мы того или нет. На этом языке уже сейчас написано огромное количество кода, и количество это будет только увеличиваться. И даже если появится более современный язык, веб-браузеры все равно будут вынуждены поддерживать JS. Так устроен web — вечная совместимость. Будем ли мы писать JS через несколько лет — неизвестно, но 99% что мы будем продолжать компилировать в JS.

Каковы перспективы разработчика JS на рынке труда? Почему новичку стоит обратить внимание на JS?

Сейчас перспективы как никогда лучше. Особенно связанные с фронтендом. Веб превращается в платформу для по-настоящему сложных приложений, и рынок просто не способен удовлетворить потребность компаний. Но JS не единственный фактор. Умение писать CSS и доступный HTML важны сегодня как никогда. Рынок JS разработчиков наполняется в основном из backend-разработчиков, переквалифицирующихся во frontend. Если вы видите себя во frontend, я бы очень рекомендовал обратить внимание на основы дизайна, user experience, HTML + CSS и, конечно же, JavaScript.

Если вы дизайнер и уже умеете писать разметку и CSS, я бы так же советовал начать изучать JavaScript. В будущем граница между JS и CSS-программистами будет исчезать, так как очень сложно сделать хороший user experience в Web без использования обоих языков.

Андрей Оконечников, фронтенд-разработчик и UI-дизайнер родом из Ярославля, живущий в Вене, Австрия. Более 10 лет он придумывает и разрабатывает пользовательские интерфейсы, используя современные веб-технологии. До этого он работал дизайнером веб-сайтов и пользовательских интерфейсов. Комбинация опыта дизайнера и разработчика помогает ему лучше понимать проблемы пользователей и находить оригинальные решения в пользовательских интерфейсах.

Андрей работал с такими компаниями, как Yandex, JetBrains, Feedly, Netlify и многими другими. Он основатель консалтинг-компании component-driven.io, специализирующейся на дизайн системах и сложных веб-интерфейсах, и создатель macOS приложения цветовой пипетки для разработчиков и дизайнеров ColorSnapper.

Александр Казаченко: на одного подходящего кандидата приходится 10 или более неподходящих, это печалит

По вашему опыту, почему стоит изучать JS?

Когда пользователи включают компьютер, смартфон или планшет, они первым делом запускают браузер. В основном именно в браузере люди развлекаются, работают и учатся.

Нет, я не отрицаю, что у нативных или десктопных приложений достаточно большой рынок, но он не сравнится по размеру с рынком веб-приложений и веб-сайтов.

Сейчас достаточно большой тренд на разработку приложений под мобильные устройства с использование технологий основанных на браузере.

И на сервере JS тоже имеет свою нишу в виде Nodejs.

Исходя из этого, достаточно очевидно, что JS — очень популярный и востребованный язык, как минимум поэтому стоит его изучать.

Но если посмотреть не с точки зрения прагматизма, а с точки зрения энтузиазма, то в этом смысле JS тоже очень привлекателен.

Сейчас существует множество языков, транспилирующихся в JS (TypeScript, CoffeeScript, Kotlin и так далее), много фреймворков и библиотек разного уровня абстрактности, что позволяет разрабатывать на JS так, как нравится именно вам.

Какие перспективы у самого языка программирования в сравнении с другими? Будет ли он востребован в будущем?


Как я отмечал выше, у JS очень большой рынок, где он востребован и где ему нет аналогов (веб-браузер).

Соответственно, можно считать, что в ближайшие лет 10 JS не только не умрет, но и будет активно развиваться.

На какое направление при изучении JS обратить больше внимания — frontend или backend?

Изначально JS применялся сугубо для frontend’а, соответственно и развился он больше в эту сторону. Но это не имеет никакого значения, при выборе направления — frontend или backend. Более значимым в этом выборе будет то, чем интересно заниматься именно вам. Так как язык один и тот же, разница только в окружении.

Какие перспективы у JS-разработчика в работе? Почему новичку стоит обратить внимание на этот язык программирования?

Мне кажется, сейчас у многих на слуху выражение «вкатиться во фронтенд», и это неспроста. Порог вхождения в рынок разработки фронта для обычных веб-сайтов очень низкий, и можно, потратив пару месяцев на обучение, начать на этом зарабатывать.

У меня два друга перекатились из администрирования и бэкенд разработки во фронтенд, чувствуют себя хорошо. Но лично мне такая тенденция не нравится. Потому что многие не хотят нормально осваивать профессию и рвутся за большой зарплатой в компании, где нужны профессионалы.

За последние 3 года я прособеседовал не менее 200 человек, и на одного подходящего кандидата приходится 10 или более неподходящих, это печалит.

Поэтому не экономьте на качественном обучении. Даже не имея опыта, но имея хорошие знания и навыки вы сможете легко найти работу с достойной зарплатой.

Стоит ли браться за JavaScript: итоги

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

Эксперты считают, что в краткосрочной перспективе JavaScript останется востребованным языком. В то же время фронтенд-разработчикам в любом случае придётся постоянно изучать новые технологии.

Примечание: мнение экспертов может не совпадать с мнением администрации и сотрудников Хекслета.

Как ускорить загрузку сайта 10 способов

Доброго времени суток, дорогие коллеги! Хочу вернуться ещё раз к важной теме — как ускорить загрузку сайта WordPress и сейчас добавлю к предыдущим постам еще один небольшое повествование. Попить чайку, принять душ и заняться домашними делами … Всё это люди не хотят делать, пока загружается ваш сайт. По статистике, посетители покидают сайт, который грузится более 3 — х секунд. Я лично всегда так делаю, не жду, а перехожу на другой источник.

Как ускорить загрузку сайта

В этой статье мы рассмотрим 10 способов, с помощью которых можно повысить скорость загрузки сайта и улучшить пользовательский опыт.

1. Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

Чтобы ускорить WordPress-сайт, лучшее, что можно сделать, – это установить кэширующий плагин, который позаботится о большинстве из пунктов, которые мы рассмотрим ниже.

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

Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании.

Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.

2. Подключение к сети доставки контента

Этот шаг важен для каждого владельца сайта, включая тех, чьи ресурсы работают на WordPress. В качестве примера мы будем использовать CloudFlare, но эти принципы применимы к любой CDN.

CDN – это крупная сеть серверов, распределённых по всему миру, способная кэшировать файлы вашего сайта, а затем отправлять эти файлы с ближайшего к вашим пользователям сервера. Таким образом, в идеальной ситуации пользователь в Нью-Йорке загрузит файлы сайта с северо-востока Соединенных Штатов, а не западного побережья или Европы.

Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.

Мастер Йода рекомендует:  Как правильно организовать IT-конференцию международного уровня

Чтобы настроить CDN, например CloudFlare, выполните следующие действия:

Зарегистрируйте аккаунт на сайте https://www.cloudflare.com/ .

Добавьте в него свой сайт. (С системой справится даже ребенок. Вы просто указываете адрес своего сайта и нажимаете большую зеленую кнопку. В течение минуты ваш сайт анализируется и затем на странице отображаются все предыдущие настройки DNS. Также предлагается изменить/добавить некоторые значения, если что-то вдруг перенеслось неправильно. В чем плюс? Все очень просто, ваш сайт перенесется и не будет простаивать. Ваши пользователи даже не заметят каких-либо изменений).

Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare:

Плагин Cloudflare для WordPress

При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка ��

3. Оптимизация изображений

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

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

Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG.

Веб-сервис TinyPNG, который позволяет сжимать PNG-файлы

Далее, можно оптимизировать изображения, используя более новый стандарт WebP. Однако на сегодняшний день этот стандарт поддерживают не все браузеры (только Google Chrome, Android и Opera), поэтому при его применении обязательно нужно использовать резервные методы для корректной загрузки изображений в других браузерах.

4. Объединение и удаление файлов Javascript

Для выполнения этой задачи нужно иметь представление о JavaScript, в противном случае можно нарушить эту функциональность на сайте.

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.

Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress ( https://jscompress.com/ ).

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt ( https://gruntjs.com/ ) или Gulp ( https://gulpjs.com/ ) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache ( https://www.modpagespeed.com/doc/filter-js-minify ), который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.

После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте — http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html .

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird ( https://premium.wpmudev.org/blog/hummingbird/ ) или плагин Async JavaScript ( https://wordpress.org/plugins/async-javascript/ ), которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

Процесс для CSS-файлов схож с процессом для JavaScript-файлов, но при этом он менее рискованный. Поскольку CSS в первую очередь относится к стилю и форматированию сайта, изменения в этой области не влекут за собой риска нарушения его функциональности.

Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.


Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier — https://www.minifier.org/ .

6. Загрузка динамических частей через AJAX

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

Например, на сайте PriceListo те страницы, на которых находятся счётчики репостов в социальных сетях, могли бы загружаться медленно, поскольку сайту нужно связываться с серверами Facebook и Twitter для правильного расчёта общего числа репостов.

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

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

Если вы не являетесь веб-разработчиком, то вам может быть сложно разделить свой сайт на несколько вызовов AJAX. Но если вы точно знаете, что определённая часть вашего сайта является узким местом с точки зрения загрузки всей страницы, то стоит нанять специалиста, который решит эту задачу для вас.

7. Использование браузерного кэширования

Браузерное кэширование – это способность браузера сохранять локально ресурсы, такие как изображения, файлы JavaScript и файлы CSS, чтобы их не нужно было загружать каждый раз. Хотя использование этой функции влияет в основном на повторных посетителей, это по-прежнему важный шаг для ускорения сайта.

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

Использование браузерного кэширования

Чтобы включить браузерное кэширование на серверах на базе Apache, вы можете попробовать добавить код, подобный этому — https://gtmetrix.com/leverage-browser-caching.html , в файл .htaccess в корневом каталоге вашего сайта.

8. Использование алгоритма сжатия Gzip

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

Вы можете включить сжатие Gzip так же, как браузерное кэширование. Просто добавьте следующий код в файл .htaccess в корневом каталоге вашего сайта:

Если вы используете CloudFlare, ваши ресурсы автоматически будут автоматически сжиматься с помощью Gzip.

9. Избегание загрузки большого количества внешних ресурсов

Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.

Проблема в том, что когда вы добавляете сторонние фрагменты кода на свой сайт, он, скорее всего, загрузит различные зависимые объекты и файлы, чтобы их функциональность работала. Это в свою очередь экспоненциально увеличит время загрузки вашего сайта – вплоть до 100%.

Что же с этим можно сделать? Самое простое решение – свести к минимуму количество сторонних скриптов, добавляемых на сайт. Например, если вы используете несколько рекламных сетей, попробуйте консолидировать все свои объявления в одну или две сети максимум.

Если вы используете другие сторонние ресурсы, такие как формы, чат, всплывающие оповещения и т. д., то вам нужно будет проверить сайт с помощью инструмента GTmetrix ( https://gtmetrix.com/ ). На вкладке Waterfall вы сможете просмотреть скорость загрузки всех файлов, найденных на странице, и понять, какие из них больше всего её замедляют.

10. Настройка Google AMP

Google AMP (Accelerated Mobile Pages) – это фреймворк для создания облегчённых версий веб-страниц для мобильных устройств. Для ускорения загрузки эти страницы предварительно загружаются и кэшируются серверами Google.

Для настройки AMP пользователям WordPress рекомендуется использовать официальный AMP-плагин.

Плагин AMP for WordPress

Владельцам пользовательских веб-сайтов нужно будет создать шаблон, который будет следовать рекомендациям AMP. Этот вариант реализации AMP сложнее, чем предыдущий, а процесс в целом будет зависеть от того, какой тип сайта используется, сколько страниц он содержит и так далее.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Yahoo: лучшие способы ускорения сайта

Предлагаем Вашему вниманию перевод статьи Стива Содерса с Yahoo по улучшению производительности сайта путем правильного проектирования HTTP/HTML/CSS/JS.

В статье рассмотрены 14 весьма(!) полезных правил

В 2004 году я создал группу Exceptional Performance на Yahoo!. Тогда мы были небольшой командой, целью деятельности которой было улучшение производительности продуктов Yahoo!. Проработав бОльшую часть своей карьеры как инженер внутреннего интерфейса, я подошёл к этому, как к проекту по оптимизации кода: я очертил весь процесс работы сети, чтобы выявить те места, где можно достугнуть максимальных возможностей для повышения производительности. С тех пор наша цель — обогащение опыта конечного пользователя; я измерил времена отклика в браузере при разных скоростях передачи данных. Данные этих исследований представлены на следующей диаграмме, отображающей HTTP-траффик сайта http://www.yahoo.com.

На представленной схеме первая строка («html») — представляет исходный запрос для документа HTML. Как видно, только 5% времени отклика конечного пользователя тратится на считывание документа: такой результат справедлив практически для всех сайтов. Из первой десятки сайтов Соединённых штатов все, кроме одного, использовали менее 20% общего времени отклика при загрузке HTML-документа. Остальные 80% уходили на загрузку содержания страницы. Этот факт предоставляет возможности для ускорения работы сайтов за счёт улучшения пользовательского интерфейса.

Есть три основные причины, почему стоит начинать именно с пользовательского интерфейса.

  1. Существует много возможностей улучшения пользовательского интерфейса. Если уменьшить его наполовину, количество откликов уменьшится на 40% и более, в то время как сокращение серверной части даст выигрыш менее, чем в 10%.
  2. Улучшения клиентской части обычно требуют меньше времени и ресурсов, чем серверной (переработка архитектуры и кода приложения, поиск и оптимизация критических участков, добавление и настройка аппаратного обеспечения, распределение баз данных и т.п.).
  3. Настройка производительности клиента доказала свою работоспособность. Более 50 команд на Yahoo! уменьшили время отклика клиентской части за счёт наших методов зачастую на 25% и более.

Наше золотое правило производительности звучит следующим образом: оптимизируйте сначала производительность клиента, где тратится более 80% времени отклика конечного пользователя.

Уменьшайте число HTTP-запросов

80% времени отклика конечного пользователя тратится на отображение интерфейса. БОльшая часть времени связана с загрузкой всех компонентов страницы: рисунков, таблиц стилей, скриптов и т.д. Уменьшение числа компонентов, в свою очередь, ведёт к уменьшению числа HTTP-запросов, необходимых для отображения страницы. В этом и заключается ускорение.

Один из способов уменьшить число компонентов на странице — упрощение её дизайна. Но есть ли возможность создавать страницы с большим содержанием, при этом достигая достаточно малых времён отклика? Вот несколько технологий для уменьшения числа HTTP-запросов, не жертвуя дизайном страниц.

Массивы изображений комбинируют несколько картинок в одну. общий размер не меняется, но уменьшается число запросов, что ускоряет загрузку страницы. Однако, этот способ работает только для смежных (идущих подряд) изображений, например, для панели навигации. Определение координат таких массивов — довольно скучное и приводящее к ошибкам занятие.

CSS-спрайты — предпочтительный метод снижения количества запросов изображений. Соберите все картинки на вашей странице в одну и используйте свойства background-image и background-position языка CSS для отображения нужной части изображения.

Встроенные изображения используют URL-схему data: для внедрения информации изображения в саму страницу. Это может увеличить размер вашего HTML-документа. Комбинируя встроенные изображения с (кэшированными) таблицами стилей — это способ уменьшить число HTTP-запросов и избежать увеличения размера страниц.

Объединённые файлы — это способ оптимизации за счёт объединения всех скриптов в один и, аналогично, объединения всех таблиц стилей. Однако, эта простая идея не получила широкого распространения. В каждом из первой десятки Американских сайтов в среднем по 7 скриптов и 2 таблицы стилей на страницу. Объединение файлов особенно напрягает, когда скрипты и стилевые таблицы меняются от файла к файлу, но тем не менее, этот метод работает.

Уменьшение количества HTTP-запросов для страницы — это наиболее важное направление для улучшения производительности для новых посетителей. Как описано в блоге Tenni Theurer Browser Cache Usage — Exposed!, 40—60% ежедневных посетителей имеют пустой кэш. Сделать свою страницу быстрой для этих впервые зашедших пользователей — это ключ к улучшению пользовательского опыта.

Использование сетей доставки контента

Близость пользователя к вашему веб-серверу сильно влияет на время отклика. Распределение содержимого по различным территориально рассредоточенным серверам приведёт к ускорению загрузки ваших страниц с точки зрения пользователя. Но с чего начать?

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

Помните, что 80—90% времени отклика конечного пользователя тратится на загрузку всех компонентов страницы: изображений, таблиц стилей, скриптов, flash и т.п. Это — золотое правило производительности, как показано в разделе (Yahoo) Важность клиентской производительности. Вместо того, чтобы заниматься сложным перепроектированием архитектуры вашего приложения, лучше рассредоточить статическую информацию. Это не только приводит в большему ускорению, но и проще благодаря сетям доставки контента.


Сеть доставки контента (content delivery network, CDN) — это набор веб-серверов, распределённых в различных местоположениях с целью более эффективной доставки данных клиенту. Выбор конкретного сервера для отправки данных конкретному клиенту, как правило, основывается на степени их взаимной близости. Например, это сервер, оптимальный по числу транзитов или с наименьшим временем отклика.

Некоторые крупные компании интернета владеют своими собственными CDN, но дешевле пользоваться провайдерами CDN-серверов, такими как Akamai Technologies, Mirror Image Internet или Limelight Networks. Для развивающихся компаний и веб-сайтов стоимость подобного сервиса недопустимо высока, но если ваша целевая аудитория постоянно увеличивается и становится глобальной, то CDN необходимы для достижения низкого времени отклика. Перенесение статического содержимого Yahoo! с серверов веб-приложения на CDN улучшило время отклика клиента более чем на 20%. Переход на CDN требует минимальных изменений кода, но существенно повысит скорость загрузки вашего сайта.

Добавление заголовка с информацией об истечении срока действия (Expires Header)

Веб-дизайн страниц становится всё богаче и богаче, что приводит к увеличению числа скриптов, таблиц стилей, изображений и flash-содержимого. Пользователю, впервые посетившему вашу страницу, пожалуй, придётся сделать несколько HTTP-запросов, но, используя заголовок со сроком действия, многие компоненты можно кэшировать; это позволяет избегать лишних запросов при повторном просмотре страниц. Подобные заголовки наиболее часто используются для изображений, но их стоит применять ко всем вышеперечисленным видам содержимого страницы.

Браузеры (и прокси-серверы) используют кэш, чтобы уменьшить количество и размер HTTP-запросов, позволяя быстрее загружаться веб-страницам. Веб-серверы используют заголовок со сроком действия в HTTP-ответе, чтобы сообщить клиенту, как долго кэшированный компонент будет актуален. Вот пример такого заголовка, показывающего браузеру, что содержимое не устареет до 15 апреля 2010 года:

Для Apache используйте директиву ExpiresDefault для срока действия относительно текущей даты:

Помните, что при использовании заголовка, срок действия которого достаточно велик, то после изменения компонента придётся изменить его имя файла. На Yahoo! мы часто делаем этот шаг частью процесса сборки: номер версии добавляется в имя файла с компонентом, например, yahoo_2.0.6.js.

Применение таких заголовков, как уже было упомянуто, приносит пользу только в случае, если пользователь посещает ваш сайт уже не первый раз, иначе они не повлияют на количество HTTP-запросов, так как соответствующий кэш будет пуст. Таким образом, эффективность этого метода зависит от того, как часто посетители будут заходить на ваши страницы, имея «полный кэш» (кэш, содержащий все компоненты страницы). Мы провели исследования We этого способа на Yahoo! и выяснили, что число просмотров страниц с полным кэшом составляет 75—85%. Используя заголовки с информацией об истечении срока действия, вы увеличиваете число компонентов, кэшированных браузером, которые затем будут использоваться вместо оригинальных версий, не обмениваясь ни одним байтом через сеть.

Сжатие компонентов

Время, используемое на передачу HTTP-запросов и ответов по сети, может быть значительно уменьшено за счёт определённых решений, принимаемых инженерами клиентских частей. Конечно, от разработчиков не зависят такие моменты, как предоставляемая поставщиком скорость соединения, близость к узлам обмена данными, но есть и другие значения, которые влияют на время отклика. Сжатие сокращает это время за счёт уменьшения размера HTTP-ответа.

Начиная с версии HTTP/1.1 веб-клиенты указывают поддержку сжатия в заголовке Accept-Encoding запроса:

Если веб-сервер увидит этот заголовок в запросе, то он может сжать ответ, используя один из предложенных клиентом методов. Сервер уведомит об этом клиента через заголовок Content-Encoding

Gzip — это самый популярный и эффективный метод сжатия данных на сегодняшний день. Он был разработан организацией GNU и стандартизован в RFC 1952. Единственный альтернативный способ кодирования — это deflate (?), но он менее эффективен и популярен.

Gzip-сжатие в целом снижает размер ответа примерно на 70%. Приблизительно 90% сегодняшнего интернет-траффика проходит через браузеры, поддерживающие gzip. Если вы используете Apache, модуль, отвечающий за gzip, зависит от версии: Apache 1.3 использует mod_gzip, а Apache 2.x — mod_deflate.

Есть известные проблемы с браузерами и прокси-серверами, которые могут вызвать несоответствие между тем, что браузер ожидает и что получает, при сжатии содержимого. К счастью, число таких крайних случаев сокращается из-за уменьшения количества старых браузеров. Модули Apache помогают тем, что добавляют соответствующие заголовки автоматически.

Серверы выбирают, какие данные будут сжимать, на основании типов файлов, но обычно они слишком ограниченны в выборе объектов для сжатия. Большинство веб-сайтов сжимают HTML-документы. Кроме того, стоит также сжимать скрипты и таблицы стилей, но многие сайты упускают эту возможность. Фактически, нужно сжимать любую текстовую информацию, включая XML и JSON. Не нужно архивировать PDF-документы и изображения, потому что они уже сжаты: вы не только впустую потратите время процессора, но и можете увеличить размер по сравнению в первоначальным.

Таким образом, сжатие наибольшего количества типов файлов — это простой способ уменьшить размер страницы и ускорить работы пользователей.

Помещайте таблицы стилей вверху страницы

Исследуя производительность Yahoo!, мы обнаружили, что перемещение таблиц стилей в заголовок (HEAD) приводит к ускорению загрузки страниц. Дело в том, что в этом случае страница формируется последовательно.

Инженеры интерфейса, заботящиеся о производительности, желают именно этого; то есть хочется, чтобы браузер мог отобразить всё содержимое как можно быстрее. Это особенно важно для больших страниц, которые просматривают пользователи с медленным соединением. Важность предоставления пользователям визуальной обратной связи, например, индикатора загрузки, хорошо изучена и документирована. В нашем случае страница и является этим индикатором! Когда браузер загружает страницу последовательно: заголовок, панель навигации, логотип и т.п. — все компоненты служат индикаторами для ожидающего посетителя.

При расположении таблиц стилей внизу документа становится невозможной последовательная формирование во многих браузерах, включая Internet Explorer. Они откладывают формирование, чтобы избежать переотображение элементов страницы, если их стиль изменится. Пользователю приходится ждать и смотреть на пустой белый экран. Firefox не блокирует визуализацию, таком образом, когда стили загружены, некоторые элементы будут изменены, что приведёт к появлению моментов, когда страница будет не стилизована.

В HTML-спецификации четко сказано, что стилевые таблицы должны быть расположены в заголовке страницы: «Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times.» Ни одна из альтернатив: пустой белый экран или момент нестилизованного текста — не стоят риска. Оптимальное решение — следование HTML-спецификации.

Располагайте скрипты внизу страницы

Правило 5 описывает, как таблицы стилей, расположенные внизу страницы, замедляют отображение страницы и как от этого избавиться, поместив их вверху. Скрипты (внешние файлы JavaScript) создают аналогичную проблемы, но её решение абсолютно противоположно: лучше всего поместить их как можно ниже. С одной стороны, это позволит ускорить отображение страницы, а с другой, будет достигнута максимальное распараллеливание загрузки.

Дело в том, что отображение страницы блокируется до того, пока все таблицы стилей не будут загружены. Именно поэтому выше был дан совет размещать их в заголовке (HEAD) страницы, в результате чего сначала загрузятся они, а потом будет отображаться страница. Что касается скриптов, последовательное отображение блокируется до тех пор, пока не будет загружено всё содержимое ниже скрипта. Если поместить скрипты в самый низ, то бОльшая часть страницы отобразится раньше.

Вторая проблема, связанная со скриптами, заключается в блокировке параллельной загрузки. Спецификация HTTP/1.1 предполагает, что браузер загружает не более двух компонентов одновременно в расчёте на один хост. Если вы загружаете изображения с нескольких хостов, может получиться больше двух параллельных скачек. (Я однажды заставил Internet Explorer загружать одновременно 100 изображений.) Однако, пока загружается скрипт, браузер не будет скачивать что-то ещё, даже с другого хоста.

В некоторых ситуациях не так просто расположить скрипты внизу. Если, к примеру, скрипт использует document.write , чтобы поместить часть содержимого на страницу, его нельзя переместить вниз. Бывают также крайние случаи; однако, зачастую есть способы обхода подобных ситуаций.

Обычно возникает альтернативное предложение — использовать «отложенные» скрипты. Атрибут DEFER указывает браузерам, что скрипт не содержит команд document.write и можно продолжать отображение страницы. К сожалению, Firefox не поддерживает атрибут DEFER . В браузере Internet Explorer скрипт может быть отложен, но не на столько, на сколько хотелось бы. Вообще, если загрузка скрипта может быть отложена, то его можно поместить внизу страницы, что позволить загружаться быстрее.

Избегайте CSS-выражений

CSS-выражения — это мощный (и опасный) способ динамической установки CSS-свойств. Они поддерживаются браузером Internet Explorer, начиная с 5-ой версии. К примеру, цвет фона может меняться каждый час следующим образом:

Как вы видите, метод expression принимает код на JavaScript. Результат вычисления этого выражения присваивается свойству CSS. Имейте в виду, что метод expression игнорируется другими браузерами, таким образом он полезен при установке свойств в Internet Explorer (?)

Проблема этого метода в том, что выражения вычисляются гораздо чаще, чем этого от них ожидают многие пользователи: не только при загрузке или обновлении страницы, но и при её прокрутке и даже при перемещении курсора над окном браузера. Добавив счётчик, вы можете проследить, когда и как часто выполняются CSS-выражения. Подвигайте курсор над страницей и тут же получите более 10000 раз.

Один из способов уменьшить число вызовов CSS-выражений — использовать одноразовые выражения, когда, выполнившись один раз, они присваивают стилевому свойству конкретное значение, заменяющее собой всё CSS-выражение. Если же свойство должно быть динамическим, можно использовать альтернативу CSS-выражений — обработчики событий. Если вы вынуждены использовать CSS-выражения, помните, что они могут вычисляться тысячи раз, что отрицательно отразится на производительности вашей страницы.

Делайте компоненты JavaScript и CSS внешними

Многие из этих правил производительности затрагивают тему управления внешними компонентами. Тем не менее, до подобных рассуждений стоит задаться более простым вопросом: ДОЛЖНЫ JavaScript и CSS храниться в отдельных файлах или быть встроены в страницу?

Использование отдельных файлов на практике обычно делает страницы быстрее, так как файлы JavaScript и CSS в этом случае кэшируются браузером. Когда код JavaScript и CSS встраивается непосредственно в HTML-документ, он загружается при каждом запросе этого документа. Это уменьшает количество запросов, но увеличивает размер документа; с другой стороны, если JavaScript и CSS хранятся в отдельных файлах, кэшируемых браузером, размер страницы уменьшается, не увеличивая число HTTP-запросов.

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

Многие веб-сайты попадают где-то посередине этих оценок. Лучшим решением будет вынести скрипты и таблицы стилей во внешние файлы. Единственным замеченным мной исключением, когда встраивание было выгоднее, были главные страницы, такие как главная страница Yahoo! (http://www.yahoo.com) и My Yahoo! (http://my.yahoo.com). Главные страницы просматриваются редко (иногда — всего один раз) за сессию, следовательно, для них более приемлемо вставить JavaScript и CSS в тело документа.

Для главных страниц, которые обычно являются первыми в последовательности просмотров, существуют технологии, которые усиливают уменьшение HTTP-запросов, производимых за счёт включения компонентов в страницу, а также дают преимущества кэширования при использовании внешних файлов для компонентов. Одной из таких является техника включения JavaScript и CSS в главную страницу в сочетании с динамической загрузкой внешних файлов после завершения загрузки страницы. Последующие страницы будут ссылаться на уже закэшированные файлы со скриптами и таблицами стилей.

Уменьшайте число DNS-запросов

Система доменных имён (Domain Name System, DNS) связывает символьные имена машин (hostname) и их IP-адреса (аналогично телефонному справичнику). Когда вы набираете в строке адреса www.yahoo.com, DNS-сервер, к которому обращается браузер, возвращает ему IP-адрес этого узла. Этот процесс занимает обычно 20—120 миллисекунд. Браузер не может загружать что-либо с данного узла, пока DNS-запрос не будет выполнен и не вернёт нужный адрес.

Для лучшей производительности DNS-запросы кэшируются, например, на специальном сервере, поддерживаемом провайдером, а также (для лучшей производительности) на локальных машинах пользователей. Информация DNS остаётся в кэше DNS операционной системы («DNS Client service» в Microsoft Windows). Большинство браузеров имеют свой собственный кэш, отделённый от системного; это позволяет не обращаться лишний раз к операционной системе.

Мастер Йода рекомендует:  Защита WordPress от атак Brute Force приложений

Internet Explorer хранит кэшированные DNS-запросы 30 минут по умолчанию. Это значение хранится в реестре в параметре DnsCacheTimeout . Firefox кэширует DNS-запросы каждую минуту, что указано в параметре network.dnsCacheExpiration . (Fasterfox увеличивает его до одного часа.)

Когда DNS-кэш клиента пуст (у браузера и операционной системы), число DNS-запросов равно числу уникальных хостов, встречающихся на странице во внешних элементах: ссылки, картинки, скрипты, таблицы стилей, flash и т.п. Уменьшив число уникальных хостов, вы уменьшите и число DNS-запросов.

Уменьшая количество хостов ведёт к уменьшению распараллеливания загрузки страницы. Чем меньше происходит запросов, тем меньше становится время отклика, но, уменьшая параллельную загрузку, вы, наоборот, его увеличиваете. Я предпочитаю вариант, когда компоненты распределены на 2, 3 или 4 узла, благодаря чему можно достичь компромисса между малым числом DNS-запросов и высокой степенью распараллеливания закачки.

Минимизируйте скрипты JavaScript

Суть состоит в уменьшении размеров скриптов за счёт удаления ненужных символов (например, пробелов, символов новой строки и табуляции) из их кода. Это приводит к умешьнению времени отклика. Наиболее популярными средствами в этой области являются JSMin и YUI Compressor.

Есть и другой способ оптимизации кода JavaScript. Как и прошлый, он также предполагает удаление комментариев и лишних пробельных символов, но ещё и модифицирует сам код. В частности, это проявляется в изменении имён переменных и функций так, чтобы они содержали минимальное число символов, т.е. код становится более компактным, но читать его гораздо сложнее. Здесь вопрос выбора подходящего средства остаётся открытым, но наиболее часто (насколько мне известно) используется Dojo Compressor (ShrinkSafe).

Минимизация — это безопасный и довольно простой процесс. Оптимизация кода, с другой стороны, является более сложной вещью и, следовательно, приводящей к большему числу ошибок; она также зависит от выявления имён API-функций, имена которых трогать не следует. Вдобавок становится затруднительной отладка оптимизированного кода. Я не видел проблем, связанных с минимизацией, но при применении оптимизации они встречались. В ходе исследования первой десятки американских веб-сайтов выяснилось, что минимизацию используют 21%, а оптимизацию — 25%. Несмотря на преимущества второго способа, я всё-таки советую остановиться на минимизации, что уменьшит риски и сложность поддержки скриптов.

В дополнение к минимизации внешних скриптов, ту же технику можно и нужно применять к встроенным. Даже если вы сжимаете их gzip-ом, как описано в правиле 4, минимизация уменьшит размер на 5% и более. Это особенно актуально в условиях роста использования и размеров скриптов JavaScript.

Избегайте переадресаций


Переадресация выполняется с использованием кодов статуса 301 и 302. Вот пример HTTP-заголовков в отклике с кодом 301:

Браузер автоматически переходит по ссылке, указанной в поле Location . Вся необходимая для перенаправления информация содержится в заголовках. Тело ответа обычно пусто. Несмотря на названия, ни 301-й ни 302-й ответы не кэшируются на практике, если только это явно не указывается в дополнительных заголовках, например Expires или Cache-Control . Тэг meta refresh и JavaScript являются альтернативными способами перенаправить пользователя на другой URL, но если вы должны сделать переадресацию, то предпочтительнее будет использовать стандартные коды статуса 3xx HTTP, в первую очередь, для обеспечения корректной работы кнопки «Назад».

Главное помнить, что переадресация замедляет работу пользователя. Вставляя перенаправление между пользователем и HTML-документом, вы замедляете всё на странице, так как ничто на ней не будет формироваться и никакие компоненты не станут загружаться, пока не поступит HTML-документ.

Одна из наиболее бесполезных переадресаций часто возникает и веб-разработчики обычно о ней не беспокоятся. Так происходит, когда забывают вставить завершающий слэш (/) в URL, когда тот необходим. Например, если зайти на http://astrology.yahoo.com/astrology, результатом будет ответ с кодом 301 301, перенаправляющий на http://astrology.yahoo.com/astrology/ (заметьте добавленный слэш). Эта ошибка исправляется сервером Apache с помощью Alias или mod_rewrite или директивы DirectorySlash , если вы используете обработчики Apache.

Еще одно традиционное использование перенаправления — соединение старой и новой версий сайта. Некоторые используют соединения с различными частями сайта в зависимости от некоторых условий (типа браузера, типа аккаунта и т.п.). Объединение двух веб-сайтов в один с помощью перенаправлений достаточно просто и почти не требует написания дополнительного кода. Несмотря на то что разработчики таким образом упрощают себе задачу, подобный подход отрицательно влияет на продуктивность работы сайта и, соответственно, конечного пользователя. Среди альтернатив можно выделить использование Alias и mod_rewrite , если оба проекта находятся на одном сервере. Если изменится имя домена, то можно использовать CNAME (DNS-запись, создающая alias, указывая с одного домена на другой) вместе с Alias или mod_rewrite .

Удаляйте дубликаты скриптов

Производительность ухудшится, если подключать один и тот же JavaScript-файл дважды, и это не является необычным, как вы могли бы подумать. Обзор американских сайтов из первой десятки показал, что два из них содержат повторяющийся скрипт. Вероятность появления дубликатов увеличивают два основных фактора: количество разработчиков и количество скриптов. Когда это случается, производительность сайта падает из-за появления бесполезных HTTP-запросов и выполнений скриптов.

Ненужные HTTP-запросы встречаются в Internet Explorer, но не в Firefox. В Internet Explorer, если внешний скрипт включён дважды и не кэшируется, создаются два HTTP-запроса во время загрузки страницы. Даже если скрипт закэширован, всё равно возникают дополнительные HTTP-запросы, когда пользователь обновляет страницу.

Помимо генерации лишних запросов время тратится на многократное выполнение скрипта. Это излишнее выполнение скриптов характерно и для Firefox, и для Internet Explorer, причём независимо от того, кэшируется ли он или нет.

Один из способов избежать случайного включения одного скрипта дважды — реализовать модуль управления скриптами в вашей системе шаблонов. Традиционный способ подключения скрипта — использовать тэг SCRIPT в вашей станице:

Альтернативой в PHP будет создание функции insertScript :

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

Настраивайте тэги содержимого

Тэги содержимого (Entity tags, ETags) — это механизм, который используют серверы и браузеры для определения, совпадает ли компонент в кэше браузера с тем, что находится на сервере. (Под содержимом имеются в виду изображения, скрипты, таблицы стилей и т.п.) Эти тэги используются для обеспечения механизма проверки содержимого, что более гибко по сравнению с датой последней модификации. Они представляют собой строку, которая однозначно определяет версию компонента. Единственное ограничение на формат — заключённая в кавычки строка. Сервер определяет тэг компонента, используя заголовок ETag :

Далее, если браузеру требуется провериться компонент, он использует заголовок If-None-Match , чтобы отправить ETag обратно серверу. В случае совпадения тэга возвращается код 304, уменьшая ответ на 12195 байт для этого примера:

Проблема с ETags состоит в том, что они обычно создаются на основе атрибутов, которые делают их уникальными для конкретного сервера, размещающего сайт. Тэги содержимого не будут совпадать, если браузер получает исходный копмонент с одного сервера, а потом пытается проверить его на другом — традиционная ситуация для сайтов, использующих несколько серверов для обработки запросов. По умолчанию и Apache, и IIS вставляют информацию в ETag, что резко снижает шансы успешной проверки на веб-сайтах с несколькими серверами.

Формат ETag для Apache 1.3 и 2.x — inode-size-timestamp . Хотя один и тот же файл может находиться в одном каталоге на нескольких серверах и иметь одини и те же размер, права, время создания, модификации и т.п., его inode могут различаться.

У IIS 5.0 и 6.0 дела с ETags обстоят так же. Фотрматом для ETags в IIS служит Filetimestamp:ChangeNumber . ChangeNumber — это счётчик, используемый для отслеживания изменений конфигурации IIS. Маловероятно, что ChangeNumber один и тот же на всех IIS-серверах, поддерживающих веб-сайт.

В итоге, ETags, сгенерированные Apache и IIS для одного компонента, не будут совпадать на разных серверах. В таком случае пользователь не получит быстрый ответ с кодом 304, для чего и были созданы эти тэги; вместо него сервер вернёт обычный ответ с кодом 200 со всеми данными компонента. Если ваш сайт располагается на одном сервере, то такой проблемы не возникнет; в противном случае, при использовании Apache или IIS с конфигурацией тэгов содержимого ETags по умолчанию, пользователи получат медленные страницы, серверы будут больше загружены, трафик увеличен и прокси не будут кэшировать содержимое должным образом. Даже если заголовок Expires компонентов содержит значение далеко в будущем, условный запрос GET будет генериться как только пользователь нажмёт кнопку обновления страницы.

Если вы не используете преимуществ гибкой модели валидации, которую обеспечивают тэги содержимого, лучше вообще их удалить. Заголовок Last-Modified осуществляет проверку на основании временнЫх отметок компонента. Удалив ETags, вы уменьшите размер заголовка ответа и последующих запросов. Статья Microsoft Support article описывает, как их удалить. В Apache это делается просто добавлением следующей строки к файлу конфигурации:

Делайте Ajax-элементы кэшируемыми

Люди спрашивают, применимы ли эти правила улучшения эффективности к приложениям Web 2.0. Конечно! Это правило было первым, которое принесло плоды после начала работы приложений Web 2.0 на Yahoo!.

Одним их основных преимуществ Ajax является обеспечение мгновенной обратной связи с пользователем, потому что он запрашивает информацию асинхронно у конечного веб-сервера. Однако, использование Ajax не гарантирует, что пользователю не придётся бить баклуши, ожидая этих асинхронных JavaScript и XML ответов. Во многих приложениях то, будет ли пользователь ждать или нет, зависит от того, как используется Ajax. Например, в email-клиенте с веб-интерфейсом пользователь ждёт результатов ответа Ajax, чтобы найти все сообщения, удовлетворяющие критериям поиска. Важно помнить, что «асинхронный» не значит «мгновенный».

Чтобы улучшить производительность, важно оптимизировать эти ответы. Основной способ добиться хорошей производительности Ajax — кэширование, как описано в правиле 3 (добавление заголовка Expires). Некоторые другие правила также применимы к Ajax:

Однако, правило 3 является основным для разгона приложения. Посмотрим пример. Почтовый клиент на технологии Web 2.0 может использовать Ajax, чтобы загрузить адресную книгу пользователя для автопродолжения. Если пользователь не изменял её с прошлой загрузки, то адресную книгу можно взять из кэша, если прошлый ответ Ajax был кэшируемым с использованием заголовка Expires. Браузер должен знать, когда использовать ранее кэшированную адресную книгу, а когда загрузить с сервера новую. Это можно сделать, добавив временнУю отметку к URL книги, например, &t=1190241612 . Если она не изменялась с момента последней загрузки, то отметка будет той же самой и адресная книга будет взята из кэша браузера. Если же пользователь изменил адресную книгу, то отметка времени модификации не совпадёт с той, что соответствует кэшу и браузер запросит обновлённые данные.

Даже если ответы Ajax создаются динамически и применяются только к одному пользователю, они всё ещё могут кэшироваться. Подобная техника делает приложения Web 2.0 быстрее.

Список инструментов разработчика JavaScript

В программной экосистеме JavaScript существует множество инструментов. В этой статье вам будут представлены наиболее удобные с точки зрения автора инструменты работы с JavaScript.

Инструменты сборки и автоматизации

  • Webpack — представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты). Подробнее с использованием Webpack в своих проектах вы можете ознакомиться в нашей статье.
  • Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
  • Gulp — не очередной диспетчер запуска задач, а инструмент с интересным подходом: он определяет задачи в JavaScript как функции, также GUl автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), также он обеспечивает лучшую прозрачность и контроль над процессом.
  • Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
  • Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
  • Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.

IDE и редакторы кода

  • WebStorm — мощная IDE для продвинутой разработки веб-приложений на JavaScript. Она предлагает поддержку различных фреймворков и языков разметки. WebStorm может быть легко интегрирован с дополнительными инструментами вроде тестеров, средств контроля качества кода, сборщиков и т. д. В IDE также встроены такие функции, как автоматическое завершение кода, немедленное обнаружение ошибок, навигация, встроенный терминал, богатый набор плагинов и многое другое.
  • Atom — бесплатный продукт от GitHub и выбор №1 для многих разработчиков. Он представляет собой легко настраиваемый редактор кода, который поставляется с некоторыми интересными функциями «прямо из коробки». В Atom имеется встроенный менеджер пакетов, интеллектуальное автоматическое завершение кода и прочие полезные функции. Также Atom является кроссплатформенным редактором кода.
  • Visual Studio Code — поддерживается компанией Microsoft и полностью поддерживает TypeScript «прямо из коробки». В Visual Studio Code есть интеллектуальное завершение кода и подсветка синтаксиса с помощью технологии автодополнения IntelliSense, также есть встроенный инструмент отладки, встроенная поддержка команд Git, контроль версий и многое другое. Более того, вы можете расширить функциональность редактора путём подключения широкого спектра расширений.
  • Brackets — это лёгкий редактор кода с открытым исходным кодом. В основном он ориентирован на визуальные инструменты и поддержку процессора для упрощения работы в браузере. Brackets поставляется с удобной функцией предварительного просмотра в реальном времени.

Инструменты документирования кода

Документирование кода превращает ваше приложение в «стеклянную коробку», показывая, как работает тот или иной фрагмент кода. Инструменты автоматического документирования кода описывают функции и их назначения, что позволяет экономить время на анализе и понимании кода в будущем.

  • Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языконезависимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
  • JSDoc — набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.) из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
  • jGrouseDoc (jGD) — это гибкий инструмент с открытым исходным кодом, который позволяет разработчикам генерировать API из комментариев из исходного кода на JavaScript. jGD документирует не только переменные и функции, но и пространства имён, интерфейсы, пакеты и некоторые другие элементы.
  • YUIDoc — приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
  • Docco — бесплатный инструмент для документации, написанный на «литературном» CoffeeScript. Он создаёт HTML-документ для отображения ваших комментариев, чередующихся с кодом. Следует отметить, что инструмент поддерживает не только JavaScript, но и другие языки. Например, Python, Ruby, Clojure и прочие.

Инструменты тестирования

Инструменты тестирования для JavaScript созданы для обнаружения ошибок на этапе разработки, чтобы избежать в будущем ошибок у пользователей. С ростом сложности пользовательских приложений автоматические тесты не только повышают производительность приложения, но и помогают компаниям сохранить бюджет.

  • Jasmine — BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода Python и Ruby.
  • Mocha — это функциональная тестовая среда, работающая на Node.js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
  • PhantomJS часто используется для интерфейсных тестов и юнит-тестов. Учитывая то, что это что-то вроде «безголового» WebKit, скрипты выполняются намного быстрее. Также он включает в себя встроенную поддержку различных веб-стандартов. Например, JSON, Canvas, обработку DOM, SVG и селекторы CSS.
  • Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.

Инструменты отладки

Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.

  • JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
  • Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
  • ng-inspector — кроссбраузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
  • Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.

Инструменты безопасности

  • Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
  • Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на Node.js.
  • RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
  • Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
  • OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.

Инструменты аналитики и оптимизации кода

Для проверки качества кода обычно обращаются к функциональному тестированию и юнит-тестированию. Однако существует еще один подход, который позволяет разработчикам проверять качество кода и его соответствие стандартам кодирования, а именно статический анализ кода.


В настоящее время в современном программном обеспечении объединяются инструменты анализа статического кода во время разработки, чтобы исключить попадание некачественного кода в продакшен.

  • JSLint — это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
  • JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint — форк от JSLint. Основная цель этого инструмента статического анализа кода — помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint — форк от JSLint.
  • ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на Node.js, инструмент предлагает оперативную среду выполнения и плавную установку через npm.
  • Flow — статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы — параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.

Инструменты управления версиями

  • В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется распределённой системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
  • Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.

Инструменты управления пакетами и зависимостями

  • Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
  • Npm — диспетчер пакетов Node.js. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире.
  • Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent. Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
  • Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс. Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и безболезненно.

Список лучших инструментов для разработки на JavaScript может продолжаться до бесконечности. В этой статье вы увидели лишь популярные и надёжные инструменты, которые служат основой для качественных продуктов.

Самый простой способ ускорить загрузку сайта

Скорость загрузки сайта влияет на позиции в поисковой выдаче.

Есть один крайне простой способ, используя который можно повысить скорость загрузки страниц.

Далее рассмотрим что делать и принцип действия.

Как ускорить загрузку сайта быстро и просто?

На большинстве сайтов используется код JavasScript. По умолчанию робот использует последовательную загрузку скриптов.

На практике наиболее распространенные сценарии применения скриптов следующие:

  • Подключение систем аналитики, таких как Google Analytics и/или Yandex Метрика;
  • Использование скриптов JavaScript при решении задач по user interface или user experience.

Поисковая система оценивает скорость загрузки сайта через имитацию браузера пользователя.

Браузер пользователя выполняет множество шагов, прежде чем ответ в виде кода HTML от сервера будет передан клиенту и преобразован в пиксели на экране.

Критическим путем рендеринга (Critical Rendering Path) называется последовательность шагов, необходимых для первого отображения страницы.

Если нет желания разбираться в технических деталях (все-таки уже потеплело на улице), то для ускорения загрузки страниц сайта просто прочитайте и внедрите следующие правила:

  • Код JavaScript должен быть вынесен во внешний файл;
  • К тегу script должен быть добавлен атрибут defer.

Далее рассмотрим технические детали, полезные для понимания того, за счет чего происходит улучшение производительности сайта.

До вывода страницы на экран проходит 6 этапов критического пути рендеринга:

  1. Построение DOM-дерева;
  2. Построение CSSOM-дерева;
  3. Запуск JavaScript;
  4. Создание Render-дерева;
  5. Генерация расположения;
  6. Визуализация.

Под термином DOM (Document Object Model) подразумевается объектная модель страницы.

Структура DOM выстраивается из узлов, так называемых нодов (от nodes).

HTML может быть исполнен по частям, но другие ресурсы, такие как CSS и JavaScript, зачастую блокируют отрисовку страницы.

Под термином CSSOM (CSS Object Model) подразумевается объектная модель стилей страницы сайта.

Не имеет значения то, как стили были заданы: объявлены явно или наследуются.

CSS является блокирующим обработку ресурсом, а значит Render-дерево не может быть построено без полного первоначального разбора CSS.

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

Render-дерево представляет собой объединение из DOM и CSSOM, и включает только видимые элементы. Например, исключаются элементы, которые были скрыты с использованием display none.

Далее робот определяет размер окна браузера, позиционирование элементов, формирует блочную модель. Все относительные единицы преобразуются в абсолютные и выводятся на экран. Данный процесс детально не рассматриваем, поскольку на таких шагах пространства для оптимизации нет.

Поисковая оптимизация критического пути рендеринга

Модели DOM и CSSOM связаны с JavaScript.

JavaScript является блокирующим ресурсом для роботов, то есть JavaScript блокирует разбор HTML-документа.

Когда робот видит тег script, то происходит остановка процесса, робот начинает выполнять JavaScript. Если скрипт размещен на внешнем ресурсе, то робот еще идет забирать код с другого ресурса. Начинаются лаги и, как следствие, страница сайта открывается не очень быстро.

Мастер Йода рекомендует:  Как заставить ORACLE анализировать все таблицы

Но блокировки робота можно избежать!

JavaScript можно загружать асинхронно. В отдельных случаях, загрузку скрипта и вовсе можно отложить.

Есть 2 важных директивы:

  • async;
  • defer.

При не использовании директив код выглядит так:

JavaScript для начинающих – простые примеры

Всем привет, вот и пришло время узнать нам с Вами основы JavaScript, так как JavaScript является той технологией, с помощью которой можно организовать динамические HTML страницы у себя на сайте.

Примечание. Данный урок предназначен в большей степени для тех пользователей, которые понимают общие принципы программирования, а также знают основы HTML. Если Вы не знаете что такое тег ol и li, то Вам лучше познакомиться сначала с основами HTML. Также, если Вы не знаете что это за конструкция if…then…else (это общий вид), рекомендую узнать общие принципы программирования в не зависимости от языка программирования. Только в этом случае можно начать изучать JavaScript. И этот урок будет для Вас максимально полезен.

Основы JavaScript — теория


И начнем как обычно с основ, т.е. с определения, что такое JavaScript? JavaScript – это скриптовый язык программирования, код которого выполняется на стороне клиента (пользователя). Применяется обычно для организации на сайте динамических HTML страниц, без перезагрузки самой страницы, т.е. без обращения к серверу.

Зачем нужен JavaScript?

А зачем Вы спросите организовывать динамические страницы?

Во-первых, это красиво, удобно и современно.

Во-вторых, для того чтобы сделать любое изменение на сайте необходимо перезагрузить страницу, при этом у сервера будут отниматься ресурсы, а теперь представьте что у Вас посещаемый сайт и таких обращений очень много, Ваш сервер будет просто перегружен. А так как JavaScript — это клиентская технология, обращения к серверу не нужны. Вся программа на JavaScript будет выполняться непосредственно у Вас на компьютере или на компьютере пользователя, который зашел к Вам на сайт.

Теперь поговорим конкретней для чего можно использовать JavaScript у себя на сайте? Например, для динамически выпадающего меню или появления, исчезания каких-то элементов управления. В общем можно сделать практически все что угодно.

Сейчас давайте разберемся с принципами этого языка программирования. JavaScript не строго типизированный язык программирования. Точку с запятой в конце каждой строки можно не ставить, но лучше ставить, для того чтобы самим лучше понимать и читать код, но если Вы вдруг забыли поставить точку с запятой, то никакой ошибки не будет в отличие, например, от языка PHP.

В процессе формирования HTML страницы браузером, сам браузер не только отрисовывает ее, но и формирует так называемое дерево элементов, которое состоит из узлов. А каждый узел формируется на основе кода HTML. Исходя из всего сказанного, можно сказать, что JavaScript может изменять это дерево и соответственно изменять сам код HTML, а как следствие изменять отображение HTML страницы в браузере. Под изменением дерева элементов понимается как само изменение некоторых узлов, так и удаление, добавление этих самых узлов. Чтобы было понятней, узел формируется на основе элементов в HTML, другими словами, тегов или самого содержимого, т.е. текста. Например, следующий код HTML можно отобразить в виде дерева элементов.

Код HTML:

Узлы этого кода:

Корневой Узел – html

Дочерний Узел узла HTML — body

Дочерний Узел узла body – p

Дочерний Узел узла p — сам текст (текст является отдельным узлом, это нужно помнить при добавлении, удалении и изменении текста).

Надеюсь с этим понятно, перейдем непосредственно к синтаксису и написанию первых программ на JavaScript.

По началу мне показалось, что JavaScript очень схож, с серверным языком программирования PHP, но это только в некоторых конструкциях, да, кстати, он также схож и с просто языком программирования JAVA, но на самом деле схоже написание нескольких конструкций и называние этих языков, но в остальном, имеется в виду в принципах программирования, это две разные вещи. Кстати, JavaScript никак не связан с языком JAVA, если только названием, поэтому не путайте JavaScript — это один язык программирования, а Java — это совсем другой. Но почему его назвали именно JavaScript? Да потому что в то время, когда разрабатывали JavaScript, был сильно популярен язык Java, и поэтому разработчики JavaScript решили переименовать свой язык LiveScript (так он изначально назывался) в JavaScript, а также изменили написание базовых конструкций, похожих на Java. Кстати, JavaScript официально называется ECMAScript, существует одноименный стандарт. Это для того чтобы не было проблем с владельцами торговой марки Java. Таким образом, JavaScript и JAVA — это совершенно два разных языка программирования. А почему у всех на устах название JavaScript? Да потому что просто так привыкли, и все называют язык ECMAScript языком JavaScript.

Пример кода JavaScript

Хватит лирического отступления от сути нашего вопроса, перейдем к тому, как нам изменять эти самые узлы в этом дереве. Как обычно мы это сделаем на примере. Ниже у нас есть небольшой список, как нам в него добавить (или удалить) еще несколько значений? Попробуйте нажать «Добавить в список» и у Вас откроется окно для ввода, введите название нового пункта и нажмите OK. Как все это происходит, давайте разбираться.

Сам пример:

  1. Первоя строка
  2. Вторая строка
  3. Третья строка

Добавить в список

Удалить из списка

Код JavaScript:

Код HTML:

В самом коде я написал комментарии, поэтому я думаю проблем возникнуть не должно, что для чего. Но я все равно поясню общую картину.

У нас есть некий список, помеченный >

1. addLi() –для добавления новых строк.

В функции addLi мы просим пользователя ввести название новой строки с помощью встроенной функции prompt, и помещаем это название в переменную stroka (как Вы уже, наверное, поняли, переменные объявляются с помощью оператора var).

Затем с помощью метода getElementById объекта document, находим нужный нам id списка.

Потом с помощью метода createElement все того же объекта document, создаем элемент LI (Вы, наверное, заметили, что при создании элемента, его название пишется с большой буквы).

Далее с помощью метода appendChild мы присваиваем нашему списку еще один новый пункт LI.

Затем мы создаем новый узел текст и передаем ему значение, которое ввел пользователь в нашу переменную stroka.

И снова присваиваем, только уже элементу li, новое его значение (или его дочерний узел, т.е. текст) с помощью метода appendChild.

2. deleteLi() – для удаления этих строк.

Здесь мы также находим наш список с помощью метода document.getElementById и передаем ему значение spisokst.

Затем заводим новую переменную lastLi и присваиваем ей значение последнего пункта в нашем списке (ol.lastChild).

Здесь существует небольшая проблема, по стандарту при формировании страницы HTML все пробелы, табуляции, комментарии в коде HTML учитываются, но не выводятся на экран, поэтому запомните, при обращении к последним элементам, какого-нибудь узла, там может оказаться пробел, табуляция или комментарии, поэтому результат может немного отличатся от действительного, например, если бы я здесь не учел этого, то у меня пункты в списке удалялись через один или, в некоторых случаях, через два клика на кнопку «Удалить из списка» и чтобы этого избежать я проверял, что находится в последнем узле. Если это пока не понятно, можете не запоминать:)

3. Также хочу отметить, что функционал кнопок также реализован на javascript путем обработки событий, например, при клике (событие — onClick=»javascript:addLi()») на кнопку «Добавить в список» запускается функция addLi(), а при клике на кнопку «Удалить из списка» запускается функция deleteLi(). Остальное сделано для визуальных эффектов, пока это можете не запоминать. Например, событие onmouseover означает, что при наведении курсора мыши будет что-то выполняться.

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

Как оптимизировать CSS и JS для более быстрой загрузки сайтов

Дата публикации: 2020-02-06

От автора: для чего нужно оптимизировать CSS и JavaScript? Когда дело касается онлайн-бизнеса, пользовательское восприятие является ключевым фактором. Неважно, ведете ли вы нишевый блог, SaaS сайт или интернет-магазин. Если вы не заботитесь о том, как пользователи воспринимают ваш продукт, не надейтесь, что они когда-либо что-нибудь купят.

Впрочем, любой бренд может улучшить опыт взаимодействия пользователя с сайтом, обращая внимание на некоторые факторы.
Примером таковых является скорость загрузки. Большинство владельцев веб-сайтов это упускают из виду.

Увеличение скорости загрузки интернет-страницы с восьми до двух секунд может увеличить коэффициент конверсии до 74 процентов. Это значит, что медленный сайт может стоить вам практически половины потенциальных клиентов.

Полная картина с помощью PageSpeed Insights

Чтобы выявить проблемы вашего веб-сайта, которые влияют на скорость загрузки страницы, можно использовать Google PageSpeed Insights. Это бесплатный инструмент, который автоматически сканирует и стационарную, и мобильную версии сайта.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Кроме обнаружения проблемных моментов, PageSpeed Insights также предоставляет много полезных рекомендаций. Владельцы сайтов, которые никогда не задумывались о скорости загрузки страницы, могут обратить внимание на следующие моменты:

На данном изображении показано, что CSS и JavaScript замедляют ваш сайт. Хотя это и похоже на задачу для продвинутых веб-разработчиков, их очень легко оптимизировать с помощью соответствующих инструментов. Давайте сразу рассмотрим, что нужно сделать, чтобы минимизировать CSS и JavaScript ресурсы.


Определить код, который нужно минимизировать

Минимизация кода – это процесс удаления символов, которые не выполняют никакие функции, кроме улучшения читаемости кода.
Например, однострочные комментарии помогают разработчикам понять, что делает конкретный раздел кода. Это действительно облегчает анализ кода и исправление багов, но, в то же время, значительно увеличивает размер.

При минимизации мы убираем эти лишние символы и тем самым уменьшает траффик и увеличивает скорость загрузки страницы. С помощью PageSpeed Insights вы легко можете определить, какой код нужно минимизировать. Просто нажмите ссылку «Показать, как исправить» и найдите данный ресурс через систему управления контентом (CMS) или через FTP.

Например, если веб-сайт работает на WordPress, тогда весь код должен быть доступен для редактирования в панели «Редактор». Ее можно найти в разделе «Внешний вид» панели администрирования.

Оптимизация кода

Теперь, когда вы определили, какой код нужно минимизировать, пора узнать, как это сделать. Наверное, самый легкий способ минимизировать код – это применить автоматизированные инструменты. Если речь идет о CSS и JavaScript, то наилучшими инструментами для минимизации кода являются CSS Minifier и JSCompress.

Использование CSS Minifier

CSS Minifier – это бесплатный и простой инструмент для сжатия CSS-ресурсов. Все, что вам нужно сделать, это вставить код в поле ввода, задать уровень сжатия и нажать кнопку «Minify».

Процесс минимизации кода может занять от нескольких секунд до минуты, в зависимости от его размера. Новый код можно вставить через интерфейс CMS или FTP.

Важно: В качестве меры предосторожности, не забудьте сделать копии кода перед тем, как вносить в него изменения. Проще всего сделать офлайн копии или копии в облаке.

Чтобы проверить, сработала ли минимизация, выполните еще один тест через PageSpeed Insights. CSS файл, который недавно был сжат, не должен больше выдавать сообщение «минимизируйте CSS».

Использование асинхронной загрузки для JavaScript

В отличии от CSS, оптимизация JavaScript выполняется немного сложнее. Перед тем, как пропустить код через JSCompress, нужно сначала рассмотреть вариант асинхронной загрузки кода.

Асинхронную загрузку часто называют «отложенной загрузкой», но, в контексте JavaScript, такой вид загрузки работает посредством функций динамической загрузки.

Чтобы осуществить асинхронную загрузку, просто добавьте тэг async в код вызова .js-файла. Это можно сделать в исходном HTML-коде вашего веб-сайта. Ниже приведен пример того, как это сделать:

10 лучших способов ускорить загрузку сайта

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

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

Статистика проводит прямую связь между скоростью выдачи информации и поведением пользователей.

1. Оптимизируйте HTML-код и CSS-, JS-файлы

Оптимизация загрузки невозможна без заботы о «чистоте» кода, передающегося браузеру пользователя при заходе на сайт. Большое число символов в исходном коде заметно влияет на скорость загрузки, поэтому его краткость является важным фактором успеха.

Как минимизировать код для ускорения загрузки сайта

  • Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.

Такой метод буферизации HTML-контента достаточно эффективен, но может создать дополнительную нагрузку на оперативную память.

  • Сгруппировать однотипные CSS-файлы и JS-файлы. Объединить элементы помогут бесплатные PHP-приложения, вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и пропускают через себя все файлы сайта.
  • 2. Уберите лишние HTTP-запросы

    Выгрузка элементов страницы (JavaScript, изображений, CSS- и флеш-файлов) занимает львиную долю ресурсов системы при загрузке сайта. HTTP-запросы к таким элементам заметно тормозят работу сайта.

    Чтобы избежать «лишних» запросов, нужно сократить число компонентов страницы. Это повлечет пропорциональное уменьшение обращений к серверу и позволит ускорить загрузку сайта.

    Сделать это можно несколькими способами:

    • Комбинировать нескольких изображений в один графический файл (CSS-спрайт);
    • Использовать встроенные изображения (Inline-картинки) в таблице стилей страницы;
    • Несколько CSS-файлов или скриптов на одной странице объединить в один файл;
    • Минимизировать число скриптов и плагинов.

    3. Расположите JavaScript и CSS в нужном порядке

    Рекомендуется располагать CSS-файлы вверху кода страницы, а JavaScript внизу. После подобной оптимизации, сначала будет загружаться статичный контент, а потом лишь динамическая графика.

    Флеш-элементы или анимация, требующие больше ресурсов для загрузки, не будет «вырываться» вперёд и портить впечатление о сайте с первых секунд. Это обеспечит плавную загрузку контента и повысит эстетическую привлекательность ресурса.

    4. Уменьшите число внешних скриптов

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

    Конечно, упор на локальные скрипты создаст определённые ограничения во внешнем виде и функциональности сайта. Но полученное преимущество в скорости загрузки стоит этих «жертв».

    5. Задействуйте функцию flush

    Этот PHP-функционал позволяет не ждать, пока сервер пользователя загрузит информацию с ресурса, а выводить её по частям. Пока данные передаются в браузер, открытое окно не останется пустым, а плавно наполняется подгружаемыми элементами сайта. Такое ускорение особенно необходимо веб-ресурсам со сложным интерфейсом и большой посещаемостью.

    Размещать функцию flush лучше в начале исходного кода страницы, сразу за head. Из заголовка HTML-контент будет открываться быстрее, к тому же так можно включить параллельную загрузку элементов CSS и JavaScript.

    6. Кэшируйте страницы

    Кеширование сохраняет часть информации со страниц сайта (флеш, графику, JavaScript и CSS) в браузер пользователя. При следующем заходе эти файлы мгновенно загружаются из браузера, давая сайту дополнительную скорость.

    Подключить кэширование можно путём добавления в HTML-код заголовка expires. Сайты на WordPress легко кэшируются с помощью установки плагинов с бесплатным или частично бесплатным функционалом, вроде W3 Total Cache, Cache Enabler или Zen Cach.

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

    7. Пользуйтесь CDN

    Сеть доставки контента (Content Delivery Network) – цепочка серверов, разбросанных в дата-центрах по всему миру с целью увеличения скорости передачи контента ресурса посетителям. Чем ближе посетитель находится географически от CDN-серверов, тем быстрее передаются пакеты данных с сайта.

    Сеть доставки и дистрибуции контента делает информацию доступнее для людей по всему миру


    Использование CDN особенно актуально для контентных и высоконагруженных порталов, чья основная аудитория сильно удалена от физических серверов. Этот сервис минимизирует время ожидания загрузки с заграничных сайтов, способствуя повышению их рейтинга в локальной поисковой выдаче. Ведь контент загружается с ближайшего к пользователю серверного хранилища в его стране.

    Популярные сети доставки контента (CDN)

    8. Оптимизируйте графику и видео

    Необходимо выбрать правильный формат графики и видео, так как формат файла напрямую влияет на скорость подачи информации посетителям.

    Рекомендуемые форматы под разный веб-контент

    • SVG – для векторных логотипов и несложных элементов интерфейса;
    • PNG – для схем и не векторных логотипов;
    • JPG – для фото и изображений;
    • MPEG4 – для видео и анимации.

    Также для видео и анимации доступен еще относительно новый формат WEBM. В большинстве случаев он обеспечивает меньший размер видео при аналогичном качестве. Однако, формат имеет ограниченную поддержку браузерами (например, нет поддержки в браузере MacOS/iOS Safari). Поэтому рекомендуется приоритетным источником видео использовать файл в формате WEBM, а альтернативным – установить MPEG4. Также можно использовать только MPEG4, если совместно использование недопустимо или неудобно.

    Отдельно отметим, что векторный формат (SVG) позволяет осуществлять масштабирование без потерь качества графики.

    Этапы оптимизации изображений

    Шаг 1 – Уменьшение размера изображения.

    Во многих популярных CMS, таких как WordPress или Joomla есть встроенные плагины для оптимизации изображений из оригинала. Но такой способ создаёт дополнительную нагрузку и может замедлить сайт. При каждой загрузке страницы браузер сперва обращается к исходнику, а только затем меняет размеры изображения «на лету».

    Избежать потерь скорости при загрузке изображений помогут встроенные в ОС графические редакторы, вроде Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с похожим функционалом. Для работы с ними потребуются минимальные навыки работы с графикой.

    Шаг 2 – Сжатие файла перед загрузкой.

    Даже после оптимизации размеров изображения, его «вес» обычно ещё далёк от оптимального. Уменьшить размер без потери качества картинки помогают такие удобные и бесплатные сервисы, как ImageResize или TinyPNG. Большинство процессов здесь автоматизировано. Пользователю нужно только залить файлы и скачать уже ужатые до оптимального размера изображения.

    9. Примените Gzip-сжатие файлов

    Gzip-сжатие файлов, производится для того, чтобы уменьшить количество запросов на сервер с браузера. Проще говоря, эта технология уменьшает исходный вес файлов до 70% для ускорения загрузки.

    Способы внедрения Gzip-сжатия

    • Добавить следующий фрагмент кода в конфигурационный файл веб-сервера «.htaccess».
    • Добавить следующий отрывок кода в начало HTML- или PHP-страницы. Он проверяет поддерживается ли gzip-сжатие файлов браузером. Если поддерживается – использует его.
    • Инсталлировать на сайт Gzip-плагин. Например, W3 Total Cache для сайтов на WordPress.

    10. Сменить хостинг

    Самый радикальный метод ускорения загрузки – смена хостинг-провайдера. Экономия на размещении ресурса часто приводит к значительному ухудшению качества услуг, что подрывает все попытки ускорить сайт на корню.

    Если манипуляции с контентом, кодом и плагинами не приносят результата, самое время задуматься о выборе более достойного «дома» для сайта. На качественном хостинге с высокой отказоустойчивостью и заботливой технической поддержкой интернет-ресурс получит мощный импульс для увеличения скорости работы. А это обязательно оценит благодарная аудитория.

    Вывод

    Нельзя игнорировать такой показатель как скорость загрузки сайта. Именно он с первых секунд создаёт комфортную среду для посетителей. Чем быстрее пользователь получит искомый контент, тем больше вероятность, что будет сформирован позитивный образ ресурса и построена лояльность к нему.

    Ищите надёжную площадку для размещения сайта? Веб-хостинг от Eternalhost – надёжный фундамент, который обеспечит быструю и бесперебойную работу интернет-ресурса!

    В этой статье мы перечислили основные способы ускорения сайта. Но есть ещё много интересных и творческих идей по оптимизации данного процесса. А как вы добиваетесь ускорения загрузки? Пожалуйста, поделитесь опытом в комментариях!

    JavaScript

    Язык создавался компанией Netscape и изначально назывался ECMAScript. Этот язык преимущественно ориентирован на веб разработчиков, и по праву является одним из самых популярных языков программирования в мире. Язык сменил множество названий, но сейчас, его официальное название JavaScript. Есть много языков, которые создавались для замены, например CoffeeScript и другие, но при компиляции, они всё равно переводятся в JavaScript. Изначально JavaScript считался языком для непрофессионалов и код получался довольно плохим. За последние годы всё изменилось кардинально, и JavaScript начал завоёвывать популярность, постепенно поднимаясь, всё выше и выше, в таблице самых востребованных языков веб-разработки.

    Итак, вот список лучших редакторов для языка JavaScript:

    1 место. Aptana Studio

    Позиционирует себя как “самый лучший в мире” редактор для веб-разработки. Особые функции: множество JavaScript библиотек, встроенный отладчик, терминал, синхронизация по ftp, возможность командной разработки. Включает в себя стандартные функции для приложений из этой области (автодополение, проверка ошибок и т.д). Редактор работает на все основных операционных системах.

    2 место. Sublime Text

    Программа представляет собой текстовый редактор кода, разметки и текста. Плюсы: множество плагинов для самых разных функций, удобная навигация (миникарта), множественное редактирование, работа с проектами. Sublime Text доступен на всех основных платформах (OS X, Windows и Linux). Почти полностью бесплатная (иногда вылезает предложение купить).

    3 место. Webstorm

    Это очень хорошая IDE, во многом благодаря тому, что создатели большое внимание уделили различным мелочам. Реализованы очень удобные горячие клавиши и интеллектуальное автодополнение. Проверку правильности кода можно делать 3-мя разными способами (JSLint, JSHint и внутренний инспектор кода). Присутствует возможность отладки в “node.js”.

    4 место. Visual Studio

    В версии 2012 был полностью переписан редактор JavaScript. Сейчас, почти любой веб-сайт содержит десятки JS файлов, в которых со временем становится трудно ориентироваться, Visual Studio полностью решает эту проблему. Первые попытки, сделать работу веб-разработчика более продуктивной начались ещё в 2008 году. Реализована разбивка кода на “регионы”, которые удобно сворачивать, если файл большой. А в последних версиях появилась поддержка ECMAScript 5, и улучшена поддержка IntelliSense и Document Object Model.

    5 место. Spket IDE

    Это один из редакторов Eclipse. Спектр его возможностей очень широк, очень хорошо реализовано форматирование кода и inline-комментарии. Присутствует встроенный отладчик для IE, имеется отдельный редактор для JSON, и другие основные возможности для работы с кодом.

    6 место. Notepad++ (с плагином Emmet)

    Все мы знаем старый добрый Notepad++, и благодаря его плагину, он появился на этом месте… Emmet (старое название Zen Coding) предназначен для ускорения написания различного кода, на сайте производителя, к плагину есть видеоуроки и документация. У плагина есть много интересных возможностей, к примеру нумерация атрибутов множественных элементов, или несложные математические вычисления прямо во время написания кода. Полная настройка горячих клавиш поможет вам настроить программу под себя. К слову сказать, плагин Emmet можно установить на другие редакторы, к примеру Zen Coding, Visual Studio и Sublime Text.

    7 место. Zend Studio

    В последних версиях этого продукта изменилось довольно многое, и в лучшую сторону. Было реализовано автозавершение блоков phpDoc, установлены разделительные места для удобного отображения абзацев, встроенное окно IE, создатели улучшили автозавершение кода и реализована поддержка отладки в PHP 5.1. Очень большая работа была проведена по визуальному отображению. Теперь каждый пользователь может настроить все визуальные компоненты под себя, имеется возможность включить или отключить сглаживание шрифтов. Сама программа была оптимизирована, ускорилась загрузка и скорость работы с кодом, был поставлен удобный Toolbar…

    8 место. PhpEd

    Солидная IDE, которая включает в себя много инструментов, которые очень полезны при разработке на различных языках. PhpEd может работать с PHP, HTML, CSS и JavaScript. Довольно удобно устроена панель инструментов, реализован очень хороший отладчик, и конечно веб-сервер. Поначалу, если вы испугаетесь функционала IDE, вы можете настроить “всё 1 кликом” с помощью Мастера параметров. Плохо, но не критично то, что нету автозавершения кода для JavaScript.

    9 место. TinyMCE

    Это кроссплатформенный редактор от Moxiecode Systems. Предоставляется по лицензии LGPL (разрешает продавать и изменять код программы). Почти полнейшая кроссбраузерность, кроме Оперы 7. Основные преимущества это: поддержка плагинов, множество тем\шаблонов.

    10 место. Geany

    Один из лучших моментов является то, что в Geany поддерживается большое количество типов файлов. Интерфейс в программе простой, удобный, что несомненно поможет начинающим веб-дизайнерам и программистам. Имеется стабильная версия под Линукс. Из минусов, можно отметить то, что нету шаблонов, чтобы не создавать проект не с пустого места.

    Оптимизация JavaScript для ускорения загрузки веб-страниц

    Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию «JavaScript Perfomance» о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.

    По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.

    В качестве примера оптимизации Стив Содерс приводит сниппет Google Analytics.

    Особое внимание он обращает на строчку

    Этот параметр означает, что скрипт ga.js не будет блокировать исполнение других асинхронных скриптов.

    Ещё один момент — инструкция insertBefore . Оказывается, некоторые браузеры блокируют выполнение скриптов, если ещё не загружен скрипт с инструкцией insertBefore . Естественно, это замедляет загрузку страницы. Другими словами, такие браузеры будут ждать, пока на странице не загрузится модуль Google Analytics, и до этого момента все остальные скрипты блокируются. Параметр ga.async = true исправляет ситуацию во многих современных браузерах. Но не во всех.

    Стив Содерс сделал специальную страничку, чтобы выявить те версии браузеров, которые игнорируют инструкцию ga.async = true при наличии insertBefore . Он собрал статистику с 60+ различных браузеров — как видно в таблице по ссылке, главным «нарушителем» является браузер Opera. Запустить тест и провериться можно здесь.

    В презентации «JavaScript Perfomance» Стив Содерс говорит о модуле для ускорения загрузки скриптов ControlJS, а также об использовании localStorage в качестве кэша.

    Добавить комментарий