Оптимизация javascript скриптов


Содержание

Сжатие и кодирование JavaScript кода

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

Поставьте к себе на сайт

HTML код информера:

Копировать

Обратите внимание!

После сжатия js кода обязательно протестируйте его на работоспособность. При сжатии кода удаляются все пробелы и переносы строк. Так, например, если несжатый JavaScript код работает нормально с незакрытыми строками (символом точка с запятой ;), то после сжатия эти строки сливаются в одну и из-за этого получается ошибка. Также, в этом же случае, необходимо закрывать все скобки типа > или ) символом точка с запятой ;.

Бесплатные SEO инструменты и сервисы для веб-мастеров, оптимизаторов и копирайтеров, администраторов сайтов, серверов и сисадминов — все для OnLine анализа, оптимизации, продвижения, разработки и мониторинга сайта.

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

Обратная связь

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

Как упороться по оптимизации скорости загрузки страниц

При оптимизации скорости загрузки сайта я анализирую результаты автоматического тестирования в сервисах Google Lighthouse, Google PageSpeed Insights и Webpagetest.org и только потом готовлю рекомендации. Эти же инструменты мы будем рассматривать в статье.

Небольшое объявление. В ноябре 2020 года ребята из Google обновили инструмент Google PageSpeed Insights: теперь проверка страницы выполняется средствами инструмента Lighthouse. Таким образом, результаты проверки Google PSI теперь являются данными из Google Lighthouse.

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

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

Содержание:

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

Высота и ширина

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

В качестве примера рассмотрим довольно подробную статью от Serpstat про оптимизацию изображений. В статье используются картинки такого вида (скриншот из сервиса webspeedtest.cloudinary.com):

Браузер должен загрузить изображение огромного размера (2,7 мегабайта), а также с большей высотой и шириной, с которой оно будет использоваться на самой странице сайта:

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

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

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

Этот процесс можно автоматизировать средствами CMS или плагинов для них. Например, в MODx Revolution в этом помогает дополнение phpThumbOf. Из основных функций: изменение высоты или ширины изображения, обрезание картинки до нужных размеров и применение фильтров (например, чёрно-белый). Это всё делается на лету и пользователю чаще необходимо просто настроить шаблон.

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

Объём, или же размер изображения

Мной заботливо украдена таблица из справочника Google для разработчиков, где наглядно показана корреляция объёма изображения от его размера (ширины и высоты):

Размер Пиксели Размер файла
100 x 100 10 000 39 КБ
200 x 200 40 000 156 КБ
300 x 300 90 000 351 КБ
500 x 500 250 000 977 КБ
800 x 800 640 000 2500 КБ

Чем больше высота и ширина изображения, тем больше оно будет весить (логично), но масштабы увеличения этого объёма губительны для скорости загрузки.

То есть следует понимать, что для максимальной оптимизации изображения, необходимо:

  1. Уменьшить ширину и высоту
  2. Сжать качество

Для сжатия качества я чаще всего использую сервис compressor.io, однако у него есть существенный недостаток — работает только с одним изображением. Для оптимизации нескольких картинок нужно искать другие сервисы. Тут на помощь можно звать сервис Google PageSpeed Insights, который после анализа любой страницы предлагает скачать архив с уже оптимизированными и сжатыми ресурсами:

Lazy Load

Одна из рекомендаций в моём арсенале — реализация Lazy Load.

При возможности, для части изображений страниц рекомендуется использовать отложенную загрузку (Lazy Load), которая позволит первоначально загрузить только те изображения, которые видны пользователю при открытии страницы. Все последующие изображения будут догружаться по мере скроллинга.

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

5 ноября Google добавил рекомендации для Lazy Load, а вот тут собрана подробная инструкция по настройке изображений и видео (материал на английском языке).

BASE64 и CSS-спрайты

Для небольших вспомогательных изображений-элементов дизайна рекомендуется рассмотреть кодирование картинок в BASE64 или использование CSS-спрайтов. Это позволит убрать дополнительный запрос к серверу, а изображение будет корректно отображаться на странице (во всех современных браузерах). Таким образом можно «разгрузить» сервер лишними обращениями, что тоже ускорит время загрузки. Как показывает практика, изображения лидируют по количеству обращений к серверу, однако вместе с использованием base64 можно изменить этот стандарт. Ниже показан скриншот из сервиса webpagetest.org. С перекодированием изображений в base64 мне удалось на одном своём сайте сократить количество реквестов до 14, и это очень мало.

Следует отметить, что использование base64 подходит только для совсем маленьких элементов — иконки или кнопки. Допускается использование для небольших не сложных изображений, например, однотонных или с добавлением текста. Для больших картинок использованный в html-разметке код будет занимать больше объема, чем объём самого изображения в формате, к примеру, jpeg. Подробнее про влияние большого нерационального количества Base64 в коде сайта можно почитать в этой статье на английском языке.

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

Оптимизация CSS

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

Для оптимизации CSS следует придерживаться нескольких техник:

Загрузка только нужных CSS

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

Для оптимизации этого сайта я воспользовался инструментом unused-css.com.
Суть его работы заключается в исследовании сайта и используемых CSS правил. Если инструмент находит правила, которые не используются на страницах, то он их удаляет. В конечном итоге можно получить из огромного файла список только необходимых сайту стилей:

Используемый мной файл стал на 72% процента «легче» после того как инструмент удалил 78% правил CSS.

Малые CSS лучше включить сразу в HTML-код

Лучше отказаться от загрузки небольших CSS файлов. Если отдельный документ CSS содержит 10-20 строк кода, содержимое этого файла рекомендуется встроить сразу в html код с помощью тега . Это позволит сократить время обработки правил CSS, минуя стадию загрузки отдельного файла (опять же, оптимизация серверных реквестов).

Использование только файлов CSS и тега

Не рекомендуется встраивать стили оформления в теги документа. Следует использовать файлы или теги в связке с атрибутами class. Пример некорректного использования:

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

Минификация файлов CSS

Рекомендуется для всех файлов CSS провести минификацию. Это позволит удалить ненужные символы и пустые строки / пробелы в файлах, что повлечёт за собой сокращение объёма каждого файла. Для CSS Google рекомендует использовать CSSNano или ccso.

Можно встретить примеры плагинов для разных CMS, которые делают минификацию файлов CSS, например, бесплатные AutoOptimize для WordPress, MinifyX для MODx Revolution или отдельные плагины для Битрикс.

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

Оптимизация JS

Аналогично файлам CSS, браузер может задерживать время отображения контента страниц сайта из-за загрузки и обработки файлов JS. Большинство рекомендаций повторяются, однако есть дополнения.

Для оптимизации скриптов на сайте необходимо следовать рекомендациям:

Загрузка только используемых файлов JS

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

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

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

Встраивание JS скриптов в HTML-код

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

Оптимизация JavaScript wordpress с помощью плагина Clearfy

Table of Contents

Зачем оптимизировать JavaScript?

Одной из важнейших задач для увеличения скорости загрузки страниц сайта является сокращение количества http запросов. Выполнить ее можно путем объединения нескольких скриптов в один. Это особенно актуально, если у вас установлено немало плагинов. Ведь после установки каждого из них по страницам сайта, даже по тем, где они не требуются, “распространяются” скрипты JS. Таким образом на сервер отправляется в разы больше запросов, что тормозит сайт. А если на уменьшение скорости загрузки вам укажет сервис PageSpeed Insights, считая это значимой проблемой, значит вам точно понадобится оптимизация JS WordPress.

Оптимизация JS WordPress с помощью плагина


Используйте плагин Clearfy

Для этой цели вам подойдет плагин оптимизации Clearfy. Его функциями пользуется более 50 000 вебмастеров. Многие нашли решение по оптимизации JavaScript именно в нем. Оптимизатор объединяет .js файлы и встроенные ( Пролистать наверх

Увеличиваем скорость работы сайта при помощи оптимизации 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-кода , то исполь­зо­ва­ние объ­ём­ной биб­лио­теки про­сто нерационально.

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

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

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

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

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

На большинстве сайтов используется код 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. Если скрипт размещен на внешнем ресурсе, то робот еще идет забирать код с другого ресурса. Начинаются лаги и, как следствие, страница сайта открывается не очень быстро.

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

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

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

  • async;
  • defer.

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

Как ускорить загрузку: оптимизируем код верхней части страницы

В статье:

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

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

Узнать примерную скорость загрузки можно с помощью инструмента PageSpeed Insights от Google. Он оценивает скорость сайта и выводит советы по улучшению показателя.

Фрагменты проверки инструментом PageSpeed Insights

Для оценки Google определил девять правил, инструмент считает количество баллов по соответствиям.

Правила PageSpeed Insights:

  1. Не используйте перенаправления с целевой страницы
  2. Включите сжатие
  3. Сократите время ответа сервера
  4. Используйте кэширование в браузере
  5. Сократите HTML, CSS и JavaScript
  6. Оптимизируйте изображения
  7. Оптимизируйте загрузку CSS
  8. Расставьте приоритеты загрузки контента
  9. Удалите блокировку рендера JavaScript

Инструмент « Проверка скорости сайта» от PR-CY.RU использует такие же правила для анализа скорости. Он оценивает загрузку на десктопе и мобильной версии, дает советы и пояснения по каждому пункту.

Фрагмент анализа инструментом Проверка скорости сайта

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

Как оптимизировать код верхней части страницы:

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

Удалить код JavaScript и CSS из верхней части страницы


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

Исходный HTML-код страницы:

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

Использовать асинхронную загрузку Javascript и CSS

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

Асинхронная загрузка позволит браузеру продолжать загружать основной код HTML и другие нужные ресурсы независимо от загрузки сторонних элементов.

Настроить асинхронную загрузку Javascript

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

Создайте пустой div блок в том месте, где нужно отобразить элемент:

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

Скрипт работает во всех современных браузерах.

Настроить асинхронную загрузку CSS

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

Настроить асинхронную загрузку CSS можно несколькими способами, к примеру, через «rel=preload»:

В некоторых версиях браузеров, к примеру, в Firefox 57, «preload» по умолчанию отключен, поэтому событие «onload» не сработает. Учитывайте это и догружайте данные скриптом:

Скрипт cssrelpreload.js by loadCSS на GitHub включает поддержку rel=preload для файлов CSS файлов. Он сработает, если в браузере нет родной поддержки «preload».

Настроить асинхронную загрузку с jQuery

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

График популярности библиотек в вакансиях: слева 2020, справа 2020

Библиотека скриптов jQuery содержит набор готовых функций Javascript, которые помогают писать код.

Для работы подключите версию библиотеки, которая у вас поддерживается.

Настроить асинхронную загрузку Javascript с jQuery

Для настройки асинхронной загрузки Javascript с jQuery нужно добавить свойство «async»:

Это отключит последовательную загрузку, поэтому добавьте событие «onload»:

Функция «init» будет вызвана после загрузки jQuery.

Настроить асинхронную загрузку CSS с jQuery

jQuery подходит и для асинхронной загрузки CSS. Для того используйте код:

Он должен загружаться после остальных элементов страницы и jQuery. К примеру, использование с методом «ready»:

Ускорить получение первых байтов (TTFB)

TTFB (Time To First Byte) — это время, которое прошло с момента отправки запроса клиентом до получения им первого байта. Чем меньше показатель, тем быстрее браузер начинает загружать страницу.

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

Чем больше запросов выполняет браузер, тем дольше может быть загрузка. Проверить, сколько HTTP-запросов генерирует страница, можно на панели разработчика браузера. В Google Chrome и Mozilla Firefox для этого нужно вызвать на странице команду «Посмотреть код» (Ctrl + Shift + I), найти вкладку Network, перезагрузить страницу и отфильтровать по типу HTML (Doc). Появится список запросов со статусами ответов и временем загрузки.

Список запросов со статусами на главной странице Яндекс

Также данные о TTFB есть в Pagespeed и в Google Analytics: перейдите в «Поведение» — «Скорость загрузки сайта» — «Обзор», в блоке «Среднее время ответа сервера» увидите TTFB в секундах.

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

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

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

  • На сайте не включен акселератор (для PHP).
    Разработчики сайтов на PHP используют акселераторы кода для его оптимизации — это расширение, которое кэширует байт-код и увеличивает производительность интерпретатора. При загрузке страницы сервер часто обрабатывает одни и те же участки кода, а акселератор будет предварительно компилировать PHP, что уменьшит время получения первого байта. В версиях PHP 5.5 и выше он идет в комплекте, в файле «php.ini» нужно найти «opcache.enable» и включить акселератор. В версиях 5.2 и 5.3 он доступен в PECL, нужно установить его и включить также через файл «php.ini» .
  • Объединить CSS в один файл, объединить JavaScript

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

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

    Объединяем файлы JavaScript:

    Использовать алгоритмы сжатия

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

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

    Можно найти плагины для CMS или включить сжатие вручную. Подробно о подключении алгоритмов сжатия для разных серверов в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать сжатие gzip или brotli».

    Минифицировать файлы CSS и JavaScript

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

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

    Минификация CSS

    Минифицировать файлы CSS и JavaScript

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

    Подробнее о сервисах и особенностях минификации в статье «Как уменьшить вес сайта и ускорить загрузку страниц: использовать минификацию HTML, CSS и JS»

    Использовать кэш браузера

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

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

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

    Если вы используете Apache, добавьте в файл .htaccess строки с указанием сроков хранения в кэше для форматов файлов:

    О других способах настройки кэширования есть в статье «Как использовать кэш браузера для ускорения: кэширование для Nginx и Apache, метод Cache-Control и кэширование по времени».

    Загружать данные с помощью CDN

    Еще один способ сократить время загрузки данных — использовать популярные CDN. CDN (Content Delivery Network) — это сетевая структура серверов в разных географических точках, которые хранят контент и быстро отдают его клиенту. CDN нужны, чтобы сайт открывался с одинаково быстрой скоростью для пользователей из разных географических точек. Они сокращают время загрузки, ускоряют рендеринг, защищают от DDoS, скраперов и ботов.

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

    Разработчики выбирают CDN в зависимости от потребностей бизнеса и бюджета. Hhostings.info собрали двадцать CDN с лучшими отзывами и составили топ CDN 2020.

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

    Как оптимизировать загрузку js для многостраничных сайтов?

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

    Не так давно нами было решено внедрить модульный подход? асинхронную загрузку с использованием require.js и разделение бэкэнда и фронтэнда. Внедрение прошло удачно, но встал вопрос как теперь оптимизировать загрузку яваскриптов?
    Самое популярное решение для require.js, которое предлагается везде, это используя r.js склеить все в один файл и подключать его на продакшене. Но, простите, друзья, для чего мы тогда внедряем всю эту модульность? Только ради удобства в разработке?

    У нас в общей сумме на сайте используется около 300-400 кб разного яваскрипта, причем это использование идет совершенно неравномерно по разделам. И мне кажется, что запаковать это все в один файл и отдавать каждому посетителю не совсем правильно. Дело в том, что наш среднестатистический пользователь может никогда не дойдет до страницы или раздела сайта, где мы используем datepicker или загрузку фото, или еще какие-то специфические скрипты. Так зачем мы будем его нагружать этими подарками при первой встрече, заставлять его качать все 400 кб скриптов, а потом заставлять его браузер проводить синтаксический анализ всего этого кода.

    Сейчас у нас используется какое-то промежуточное решение, которым мы по прежнему не очень довольны. При первой встрече мы отдаем пользователю минимальный набор необходимых скриптов (100-150 кб), а остальное подтягиваем в виде requirejs модулей. В итоге получаем, что при большом количестве интерактивных элементов на некоторых страницах, в дополнение к базовому набору скриптов у нас запрашивается и качается еще 5-7 javascript файлов. С точки зрения оптимизации, кажется, это тоже не очень красивое решение.


    Наверное, не мы первые сталкиваемся с таким вопросом. Сайт у нас не уникальный и проблема тоже.
    Что же выгоднее делать с точки зрения правильной клиентской оптимизации:
    1. Паковать все скрипты в один файл, отдавать его сразу и не заботиться, что большая часть из этих скриптов не будет востребована многими посетителями сайта?
    2. Пытаться как-то поделить скрипты. Отдавать только то, что нужно посетителю на конкретной странице сайта?

    Если идти вторым путем, то что делать с оптимизацией? Как быть если страница требует загрузки десятка мелких js модулей?

    Сжатие Javascript

    Здравствуйте! Продолжаю оптимизировать свой блог и на очереди стоят файлы javascript. Java скрипты используются на большинстве веб-ресурсов и создают интерактивную среду.

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

    Размер данных скриптов порой очень впечатляет, а ведь он в значительной степени влияет на скорость загрузки страниц. И с этим нужно что-то делать. Конечно, если на сервере применяется gzip сжатие, то размер подключаемых скриптом уменьшается, но тратится время на распаковку. Поэтому лучше уделить внимание и оптимизировать javascript.

    Сделать это можно с помощью различных технологий: JSMin, Packer, YUI Compressor, Google Closure Compiler. На примере разберу два последних варианта, как наиболее распространенных.

    YUI Compressor

    YUI Compressor — компрессор, разработанный Yahoo, который гарантирует сохранение работоспособности �� кода наряду со снижением веса файла. Для примера я воспользуюсь вот этим сервисом, предоставляющим функционал YUI Compressor в режиме онлайн. К сожалению, сам Yahoo не предоставляет такой возможности, ограничиваясь файлом, доступным для свободного скачивания. Итак, для проведения эксперимента по сжатию javascript я буду использовать вот такой код:

    Он отвечает за случайный вывод на javascript и был рассмотрен в одной из предыдущих статей.

    Для его сжатия вставляю в текстовое поле и нажимаю кнопку «Compress». Для наглядности привожу скрин:

    В результате на выходе получаю вот такой код:

    И что получилось? Как видно, были удалены переводы строк, лишние пробелы, переменные заменены на другие в алфавитном порядке (в примере были использованы переменные из одного символа, если исходники будут содержать переменные из нескольких символов (например, слов на транслите), то они также будут минимизированы). При наличии комментариев они также удаляются. Суммарный выигрыш составил 11%.

    Google Closure Compiler

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

    В эксперименте участвует все тот же код. Пройдя по ссылке в текстовое поле сервиса вставляю javascript и нажимаю кнопку «Compile»:

    Окно сервиса разделено вертикально на две части. В первой части приведенное выше содержание скрина, а во второй результаты сжатия:

    Т.е. на выходе получилось:

    Суммарный выигрыш составил 12.6%, что выше YUI Compressor на 1,6%. Были удалены пробелы, заменены переменные, но отличия в полученном коде заметны. Правда мне показалось странным, что оба сервиса по разному подсчитали оригинальный размер кода ��

    На своем блоге я воспользовался Google Closure Compiler и сжал подключаемые локальные javascript файлы, в итоге они оказались абсолютно работоспособными, функциональность не пострадала. Это был еще один шаг по оптимизации блога, впереди не мало работы)

    Оптимизация JavaScript

    Из множества идей касательно темы для своей статьи я решил выбрать довольно баянную, но раскрытую для себя именно «опытным путем» тему об оптимизации клиентского JavaScript’а уже для сайта в бою.

    Переходим к делу

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

    После готовности приложения и оптимизации в непосредственно самом JavaScript у меня оставалось несколько подключаемых к страничке скриптов:

    1. Библиотека jQuery 1.5.1 (83.2 кб)
    2. Плагин jQuery Cookie (732 б)
    3. Плагин jQuery haschange (16.4 кб)
    4. Плагин jQuery Ui Custom (20.2 кб)
    5. база данных в виде массивов (155.3 кб)
    6. functions приложения (63.1 кб)

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

    В поле моего зрения попало два хороших сервиса: Closure Compiler и bananascript.

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

    Применение

    Для примера я взял файл баз данных размером в 155.3 кб, пропустил его через Closure Compiler, на выходе получил примерно 400 кб. Затем полученный файл пропустил через сервис bananascript, на выходе получилось около 20 кб. Что уменьшило исходный размер файла на 135 кб. А самое главное тестовый, скрипт подключенный с кодировкой ISO-8859-1, что требуется после сжатия скрипта в сервисе bananascript для его работоспособности — стал корректно отображать кириллицу.

    После тестов я проделал то-же самое со всеми библиотеками и скриптами подключаемыми к приложению. Их исходный суммарный размер был равен 338.9 кб, после один файл на выходе стал весить 84.5 кб, а после gzip сжатия 63 кб.

    Плюсы:
    1. Уменьшается размер подключаемых скриптов.
    2. Уменьшается кол-во http запросов.
    3. Хорошее дополнение к защите от «любителей реализовать чей-либо сервисов в своих проектах».
    Минусы:
    1. Процесс такой компиляции занимает время.
    2. Скрипты скомпилированные таким способом должны подключаться с кодировкой ISO-8859-1.
    3. Не дай бог утратить исходные скрипты ;))

    Как получить быстрый сайт — оптимизация (сжатие) изображений и скриптов, а так же уменьшение числа Http запросов

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Низкая скорость загрузки страниц сайта может негативно отразиться на популярности вашего проекта (особенно к этому критично относятся пользователи с высокой скоростью интернета, которые не привыкли ждать).

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

    С помощью Page Speed мы попробуем максимально осуществить сжатие изображений, скриптов и CSS файлов. Хотя про сжатие CSS с помощью Page Speed мы уже говорили, а значит осталось осуществить сжатие картинок и различных скриптов, которые подгружаются в браузер пользователя с вашего сервера.

    Но давайте для начала я напомню то, о чем мы говорили в первых статьях по созданию быстрого сайта:

    Чистим фоновую графику для снижения числа http запросов

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

    Вообще, изображения на сайте могут выводиться двумя способами: с помощью Html тега IMG (тут и тут читайте подробнее), а так же с помощью CSS свойств «background» или «background-image», которое может выглядеть, например, так:

    При загрузке страниц происходит и подгрузка картинок, заданных как через IMG, так и фоновых изображений, описанных свойствами «background» в CSS файле. Посмотреть все подгружаемые в браузер пользователя графические файлы можно в нашем средстве для получения быстрого сайта — Page Speed на вкладке «Resources»:

    В колонке «Type» для графики, вставленной через IMG, будет прописано «image», а для фоновых картинок, вставленных через CSS — «cssimage». Поэтому при помощи Page Speed вам будет достаточно просто их различить, к тому же, подведя курсор мыши к строчке с интересующим вас изображением, вы увидите его превьюшку:

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

    Во-первых, объектов было слишком много (около 70), что совсем не здорово, ибо для передачи каждого из них формируется отдельный http запрос. 70 http запросов тратилось только на загрузку графики — это недопустимо много, т.к. сильно снижает быстроту сайта. Следовательно, одним из самых действенных способов может быть уменьшение числа http запросов при загрузке страницы вашего ресурса.

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

    При первоначальной настройке темы под свои нужды, я не очень корректно убрал эти изображения из оформления, забыв удалить соответствующие им CSS свойства («background») из файла стилевого оформления темы (style.css), который обычно расположен по следующему пути:

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

    К слову сказать, таким образом мне удалось сэкономить до 20 http запросов при загрузке любой страницы моего блога, удалив, соответственно, из style.css около 20 записей о подгрузке фоновых изображений (ненужных или малозначительных). Для проведения подобной операции вам нужно будет подключиться к своему ресурсу через FTP клиент и открыть на редактирование файл стилей из указанной выше папки.

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

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

    Сжатие и оптимизация изображений на быстром сайте

    Самый простой вариант сжать все изображения на своем сайте — подключить сервис OptiPic.io.

    1. Подключается к сайту буквально за 2 минуты.
    2. Полный автопилот — OptiPic найдет и оптимизирует все изображения на сайте в автоматическом режиме.
    3. Сервис периодически будет мониторить добавление на сайт новых изображений. Они автоматом будут добавляться в очередь на сжатие.
    4. Это безопасно — перед сжатием изображений автоматически создаются копии каждого .
    5. Есть возможность автоматически уменьшить ширины или высоту изображений (resize).
    6. Поддержка любых php-сайтов (любые CMS, фреймворки или даже самописные движки).

    Плюс у OptiPic есть партнерская программа, по которой можно получать до 40% от привлеченных клиентов.

    А вообще, можно сделать две вещи — оптимизировать размер каждого отдельного изображения через Page Speed, а так же объединить некоторые фоновые картинки из файла стилевого оформления в так называемые CSS спрайты.

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

    Мне очень нравится онлайн сервис PunyPNG, который просто великолепно сжимает графику формата PNG (я уже писал тут, когда лучше использовать формат PNG, когда JPG, а когда и GIF):

    Очень неплох был и Яховский Smush.it:

    Но для работы с графикой шаблона проще будет воспользоваться возможностями самого Page Speed (ну, или на худой конец FastStone Image Viewer, описанного здесь), тем более, что он сжимает графику очень эффективно и без потери качества (иногда даже в пару раз уменьшает размер и, соответственно, и убыстряет сайт).

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

    Догадайтесь, кому он может принадлежать (подсказываю — поисковой системе Google.ru, о которой речь шла тут). В принципе, создавать CSS спрайт с нуля в каком-либо графическом редакторе очень сложно, ибо потом нужно будет в style.css очень четко описать позиции того или иного рисунка на большом изображении.

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

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

    Да, в принципе, точно так же, как и чуть ранее сжимали CSS средствами Page Speed. Только проделать все тоже самое нужно будет для другой строчки под названием «Optimize images». Щелкаете по плюсику рядом с этой строкой и просматриваете список тех картинок на открытой в браузере странице, которые по мнению этого плагина можно оптимизировать:

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

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

    Сжатие скриптов для получения быстрого сайта

    Кроме изображений с помощью Page Speed вы можете так же сжать скрипты (JavaScript, jQuery), которые подгружаются в браузеры пользователей с вашего web сервера. Сделать это можно в строке под названием «Minify JavaScript»:

    Очень здорово было бы предварительно объединить все внешние скрипты в один файл (это нам советует сделать сам плагин в строке «Combine external JavaScript»), по аналогии с тем, как мы это сделали чуть ранее для CSS.

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

    Правда, в файл functions.php, о котором мы говорили тут (живет он в папке /wp-content/themes/название темы WordPress/), нужно будет прописать несколько другой код с указанием регистров плагинов:

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

    Поэтому после нескольких попыток я признал свое поражение и полную некомпетентность в этом вопросе. Если кто знает нюансы, которые важно учесть при объединении внешних JavaScript и jQuery скриптов, то буду очень признателен за подсказку.

    Еще оной проблемой, которая была помечена в Page Speed красным цветом, как очень важная для скорости загрузки моего сайта, являлась подгрузка всех объектов с одного хоста (ktonanovenkogo.ru) — «Parallelize downloads across hostnames». По мнению этого инструмента лучше было бы распараллелить загрузку объектов с разных хостов, увеличив тем самым общую скорость.

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

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

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

    Вещь достаточно удобная с точки зрения теории, но на практике, когда я перенес часть изображений из определенной папки в это хранилище для статических объектов и прописал в файле .htaccess (подробности о .htaccess можно посмотреть здесь) редирект со старой папки картинок (на основном web сервере) на новую (для статических объектов) такого вида:

    Здесь /image «» — каталог с картинками на основном хосте (где и прописывается код 301 редиректа в .htaccess), а http://images.ktonanovenkogo.ru «» новое месторасположение на альтернативном хосте. Но оказалось, что, во-первых, скорость работы специализированного хоста достаточно низкая, а во-вторых, при этом перестало работать кэширования статических объектов в браузерах пользователей.

    Page Speed сразу же выделил красным строку «Leverage browser caching». Причем прописывание в файл .htaccess на новом хосте нужных директив результата не дало. Скорее всего тот сервер просто-напросто эти директивы не был способен выполнить.

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

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

    Илон Маск рекомендует:  Ссылки во фреймах
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL