Клиентская оптимизация *

Гем под названием "cache_digests" (включен по умолчанию в Rails 4) автоматически добавляет цифровую подпись к каждому фрагментному кэшу, основываюсь на представлении (вьюхе). При этом, если страница изменяется, то старый кэш автоматически удаляется. Но остерегайтесь подводных камней!

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

Шаг 1: Найдите анимированную иконку

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

Шаг 2: Добавьте CSS-правила

Тут совсем немного кода, и вы можете просто скопировать его. Только не забудьте сменить «youricon.gif» на свою картинку.

.load {
    background: url('images/youricon.gif') no-repeat center;
}

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

Новая версия Bundle Transformer характеризуется следующими изменениями: большая часть сборок теперь подписана; в ядре, были исправлены ошибки, возникавшие при обработке путей; были обновлены некоторые модули (BundleTransformer.SassAndScss, BundleTransformer.CoffeeScript, BundleTransformer.TypeScript, BundleTransformer.MicrosoftAjax, BundleTransformer.Yui, BundleTransformer.UglifyJs, BundleTransformer.Csso и BundleTransformer.WG) и создана новая версия демонстрационного сайта ASP.NET Web Pages.

Рассмотрим основные нововведения данной версии:

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

На основе Cookies, для сайтов с общим наддоменом

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

Основным нововведением в новой версии Bundle Transformer стала поддержка языка TypeScript. Кроме того, были внесены изменения в ядро продукта и в следующие модули: BundleTransformer.MicrosoftAjax, BundleTransformer.Yui и BundleTransformer.Csso.

Рассмотрим основные нововведения данной версии:

Илья Григорик из компании Google собрал подборку малоизвестных функций Chrome DevTools, которые можно использовать для оптимизации производительности. Илья также упоминает несколько сторонних плагинов и библиотек, полезных для разработчика, и многочисленные другие хитрости: например, возможность дебаггинга iOS-приложений или кода, исполняемого на подключённом Android-устройстве.

Внутри у среднего банкомата лежит от 1 до 3 миллионов рублей. Они разложены по 4 кассетам, в каждой из которых – купюры своего номинала. Замена кассет похожа на замену картриджей в принтере: модуль вынимается (и неважно, сколько там осталось денег — инкассаторы этого даже не знают по правилам безопасности), а на его место вставляется другой модуль точно по стрелке, указывающей, какой стороной и как это делать.

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

Bundle Transformer – это разработанное мной модульное расширение для Microsoft ASP.NET Web Optimization Framework (другие названия: ASP.NET Bundling and Minification, System.Web.Optimization, Microsoft.Web.Optimization и ASP.NET Optimization – Bundling). В апреле этого года я уже делал подробный обзор возможностей Bundle Transformer, но за это время данный продукт очень сильно изменился. Поэтому я решил написать данный обзор и рассказать об основных изменениях, которые произошли в Bundle Transformer за прошедшие полгода.

Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Web Optimization to a Web Pages Site».

При добавлении ASP.NET Bundling and Minification (далее B/M) на сайт ASP.NET Web Pages мы следуем тому же рецепту, что и в ASP.NET MVC и Web Forms:

1. Объявляем и регистрируем Bundle`ы;
2. Используем Bundle`ы в коде наших представлений.

Данная статья описывает базовые принципы использования B/M на сайте ASP.NET Web Pages. Для получения общей и более подробной информацией о B/M смотрите мой учебник по Bundling and Minification. Вы также можете прочитать об использовании B/M c ASP.NET MVC — здесь, и c ASP.NET Web Forms — здесь.

Представляю вашему вниманию перевод статьи Рика Андерсона (Rick Anderson) «Adding Bundling and Minification to Web Forms».

Мой учебник по Bundling and Minification обеспечивает хорошее введение в возможности и основные преимущества ASP.NET Bundling and Minification (далее B/M). Вы должны прочитать это руководство, чтобы ознакомиться с основными возможностями данного продукта. В отличие, от моего руководства по B/M, которое посвящено использованию B/M в ASP.NET MVC, эта статья будет посвящена использованию B/M в связке с ASP.NET Web Forms.

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

Какую задачу решаем?

Скрипт позвляет собрать статистику по «полной» загрузке страницы на стороне браузера. Это не равняется времени выдачи страницы сервером, очевидно. Под полной загрузкой я подразумеваю загрузку всех ресурсов страницы (картинки, стили, скрипты) и выполнение браузерного события onload. Как все знают, это время можно посмотреть в firebug. Но очевидно, что для адекватной оценки нужно собрать статистику, т.е. открыть страницу и запомнить время ее полной загрузки не один и не два раза. На основе сотни запусков уже можно говорить о среднем времени полной загрузки, и это будет хорошей метрикой, в моем понимании.

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


Давайте вспомним, что же есть ЦЕРН.

Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.

Twitter объявил об очередной смене архитектуры: генерация страниц теперь будет осуществляться на стороне сервера, а не на стороне клиента.

После прошлой модернизации в сентябре 2010 года весь рендеринг UI и логику переложили на JavaScript на клиентской стороне. Браузеры напрямую обращались к Twitter REST API, как и мобильные клиенты. Хотя такой подход помог реализовать ряд преимуществ, но разработчики потеряли возможности оптимизации, которые доступны при серверно-ориентированном подходе. В результате, пользователи начали жаловаться на субъективное «подтормаживание» страниц twitter.com.

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

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

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


Рис.1. Главное окно SEO Toolkit

В этой статье попробуем провести такой анализ на примере одного из самых известных сайтов рунета artlebedev.ru с помощью бесплатного инструмента Search Engine Optimization Toolkit.

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

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

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

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

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

Здравствуй Хабр!

Adobe Photoshop CS5 (Save For Web) — 53,8 КБ	Image Catalyst (Xtreme) — 46,0 КБ

Image Catalyst — программа для комплексной оптимизации/сжатии изображений формата PNG и JPEG без потери качества в рамках того же формата.