Тематические статьи →

Увеличиваем скорость работы сайта при помощи оптимизации JavaScript

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

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

Если без каких-то скрип­тов сайт функционален, то загрузку этих JS-скрип­тов осуществлять после отри­совки стра­ницы (для этого надо поме­стить код в конец сек­ции body). Некото­рые скрипты нужны для созда­ния эффек­тов, кото­рые ини­ци­и­ру­ются не сразу после загрузки стра­ницы или их отло­жен­ная загрузка не вли­яет на пер­вое впе­чат­ле­ние от сай­та. Авто­ма­ти­че­ское про­ли­сты­ва­ние слай­дера или скрипт для сбора ста­ти­стики посе­ще­ний, напри­мер, легко могут быть ини­ци­и­ро­ваны уже после отри­совки стра­ницы в бра­у­зе­ре. Пусть лучше поль­зо­ва­тель побыст­рее уви­дит стра­ни­цу, а не ждёт тра­тит при загрузке лиш­нее время ради того, чтобы через 5 секунд кра­сиво пере­лист­нулся реклам­ный бан­нер или чтобы его посчи­та­ли.

Загру­жайте скрипты с под­до­ме­нов, с дру­гих доме­нов или исполь­зуйте CDN — даже у самых про­дви­ну­тых браузеров файлы с одного домена загру­жа­ются в огра­ни­чен­ное число пото­ков. Если изоб­ра­же­ний, сти­лей и скрип­тов на стра­нице доста­точно мно­го, то обра­зу­ется оче­редь на загрузку дан­ных. Коли­че­ство исполь­зу­е­мых пото­ков лими­ти­ру­ется только для доме­на, поэтому если JS-файлы будут загру­жаться с дру­гого домена (или под­до­мена), то их загрузка про­изой­дёт быст­рее за счёт парал­лель­но­сти.

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

JS надо сжать, мини­ми­зи­ро­вать и опти­ми­зи­ро­вать. Уда­ле­ние про­бе­лов, пере­но­сов строк, сокра­ще­ние назва­ний пере­мен­ных и дру­гие опти­ми­за­ции зна­чи­тельно умень­шают раз­мер фай­лов скрип­тов и уско­ряют загрузку. При исполь­зо­ва­нии сто­рон­них биб­лио­тек — под­клю­чайте мини­ми­зи­ро­ван­ную вер­сию в production-окру­же­нии. Для соб­ствен­ных скрип­тов исполь­зуйте спе­ци­аль­ные биб­лио­теки, сжи­ма­ю­щие и опти­ми­зи­ру­ю­щие JavaScript, — UglifierJS, JSMin, Closure Compiler, YUI Compressor. При исполь­зо­ва­нии агрес­сив­ных опти­ми­за­ций обя­за­тельно про­чтите реко­мен­да­ции для исполь­зу­е­мого ком­прес­сора и про­те­сти­руйте рабо­то­спо­соб­ность полу­чен­ных фай­лов.

Сов­местно исполь­зу­е­мые скрипты должны быть объ­еди­нены в один файл. Загрузка одного файла в 50 Kb осу­ществ­ля­ется быст­рее загрузки 10 фай­лов по 5 Kb, отдача таких фай­лов меньше гру­зит сер­вер, да и сжа­тие эффек­тив­нее рабо­тает на боль­ших фай­лах.

Исполь­зуйте GZIP для сжа­тия дан­ных. Современные браузеры под­дер­жи­вают обра­ботку сжа­тых дан­ных. Опти­маль­ный спо­соб – пред­ва­ри­тель­ное сжа­тие исполь­зу­е­мых скрип­тов на мак­си­маль­ном уровне ком­прес­сии и отдача веб-сервером предварительно сжа­тых фай­лов. Сжа­тие «на лету» нагру­жает сер­вер, поэтому его на нагру­жен­ных про­ек­тах лучше не исполь­зо­вать.

Кэши­руйте скрипты на сто­роне кли­ента — не застав­ляйте поль­зо­ва­те­лей мно­го­кратно ска­чи­вать один и тот же скрипт: исполь­зуйте соот­вет­ству­ю­щие заго­ловки в ответе веб-сер­вера (Expires или Cache-Control max-age, Last-Modified или ETag).

Не исполь­зуйте боль­шие биб­лио­теки без надоб­но­сти — напри­мер, ради какого-то эле­мен­тар­ного эффекта на глав­ной стра­нице сайта не стоит на всех стра­ни­цах под­клю­чать jQuery. Если для реа­ли­за­ции всей интер­ак­тив­но­сти сайта может хва­тить 30 стро­чек про­стого js-кода, то исполь­зо­ва­ние объ­ём­ной биб­лио­теки про­сто нерационально.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья о веб-разработке и про фронтенд-разработку. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

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

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

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