Обо мне

4X_Pro
4X_Pro
Живу в Сети с 25 ноября 2000 г.
Веду блог с 8 января 2011 г.

Контакты

Немного рекламы

Рубрика: "Ускорение сайтов" - Xpro.Su: заметки о жизни в Интернете

Рубрика: "Ускорение сайтов"

Асинхронная загрузка при наличии inline JavaScript

Web-программирование, Ускорение сайтов Оставить отзыв »

Часто при ускорении загрузки сайта не получается сделать асинхронной загрузку тяжелых библиотек вроде jQuery из-за того, что зависимый от них код вставлен прямо в HTML-страницу с помощью тега script (так называемый inline JavaScript), а вынести его в отдельный файл и использовать HeadJS по каким-либо причинам нет возможности. Чаще всего такое встречается, когда JavaScript генерируется CMS. Но недавно я узнал, как можно сделать загрузку асинхронной и в этом случае: через пользовательские события (custom events). Делается это так: существующий inline-код оборачиваем функцией-обработчиком события с выбранным нами именем, например jQeuryLoaded:

Читать далее »

Собственный сервис оптимизации загрузки сайтов

Разное, Инструменты веб-мастера, Ускорение сайтов Оставить отзыв »

Рад сообщить, что сегодня запустил собственный сервис для оптимизации времени загрузки сайтов: 2Seconds.Ru. Он позволяет легко и быстро получить список всех CSS и JavaScript страницы (если они прописаны через теги link и script), минифицировать их и склеить в один файл. Кроме того, сервис позволяет автоматически встраивать в CSS графические файлы меньше указанного размера с помощью data:uri.

Как перейти на формат WebP с минимальными изменениями сайта

Администрирование, Сайтостроительство, Ускорение сайтов Оставить отзыв »

Некоторое время назад появился новый формат для графических изображений — WebP. Этот формат обладает рядом преимуществ по сравнению с JPEG: поддерживает как сжатие с потерями, так и сжатие без потерь, а также прозрачность изображений (альфа-канал), и во многих случаях сжимает изображения эффективнее (на моих сайтах — изображения в WebP получаются 30-35% меньше). Но к сожалению, полностью перейти на этот формат пока не так просто. Во-первых, сейчас его полноценно поддерживают только Web-броузеры, работающие на основе WebKit, а Firefox и IE/Edge — нет. Во-вторых, исправить на уже существующем сайте расширения всех файлов с .jpg на .webp может быть весьма трудоемкой задачей. Но недавно я нашел интересное решение, которое предложил Vincent Orback на Github: использовать подмену JPEG на WebP с помощью mod_rewrite. Для этого добавим в .htaccess такие строки:

Читать далее »

Загрузка JavaScript по имени класса

Web-программирование, Сайтостроительство, Ускорение сайтов Оставить отзыв »

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

Читать далее »

HeadJS или полностью асинхронная загрузка сайта

Web-программирование, Сайтостроительство, Ускорение сайтов 2 отзывов »

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

Читать далее »

Настройка кеширования статики в Apache

Администрирование, Ускорение сайтов 6 отзывов »

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

Читать далее »

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

Инструменты веб-мастера, Ускорение сайтов 5 отзывов »
Недавно узнал о нескольких полезных сервисах, которые могут помочь при оптимизации скорости загрузки сайта. Вот они:
  • CSS Sprites Generator — отличный генератор CSS-спрайтов (то есть файлов изображений, которые объединяют в себе несколько фоновых картинок для уменьшения количества обращений к Web-серверу). Поддерживает форматы GIF, JPEG, PNG, позволяет задавать отступы между спрайтами. Имеется собственная API. Единственный недостаток — нет возможности задать горизонтальное расположение картинок в спрайте вместо вертикального.
  • TinyPNG — онлайн-сервис преобразование полноцветных PNG в 8-битные с минимальной потерей качества изображений. Во многих случаях позволяет уменьшить размер файлов на 60-70%. Также доступна собственная API.
  • WebPageTest — измерение скорости загрузки Web-страницы с построением графиков загрузки файлов, измерением времени первой отрисовки, события DomContentReady, полной загрузки. Есть возможность измерения для различных броузеров и различных местоположений.

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

Асинхронная загрузка виджетов ВКонтакте

Web-программирование, Ускорение сайтов 17 отзывов »

Как известно, ВКонтакте есть несколько полезных виджетов, которые можно разместить на своем сайте, например, виджет группы или комментариев. Но есть у них недостаток: они вставляются обычным тегом script и подгружаются сервера ВКонтакте, что ощутимо тормозит загрузку сайта целиком, а если вдруг у пользователя по каким-то причинам заблокирован домен vk.com, то он может и вообще не дождаться загрузки сайта. В результате я решил сделать загрузку асинхронной. Первое, что пришло в голову -- это использовать свойство defer у тега script, но оказалось, что в этом случае ничего не работает вообще. В результате поступил иначе:

Читать далее »