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

Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (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 без потери качества в рамках того же формата.

Предисловие

Есть у нашей компании своя собственная CRM и периодически в эту систему добавляются данные о неких организациях с точным адресом, и главное что адреса эти по сути уникальны, то есть в системе не должно быть нескольких организаций по одному адресу (специфика, на самом деле могут, но контролируется челфаком*). С недавнего времени в систему был прикручен КЛАДР, но и он не мог быть панацеей, т.к. КЛАДР имеет кучу неточностей, многие нас. пункты остались без номеров домов итд. итп., хотя адреса эти в реальности есть (данные предоставляют сотрудники компании и они достоверны). В общем ввод адреса оставили в свободной форме с подсказкой из КЛАДр. Сразу хочу сказать, что от комбинации полей мы отказались, т.к. многообразие аббревиатур сокращений не сулило ничего хорошего, к тому же вполне позволительным был адрес на подобии («Ололошское ш. 5км», «ТЦ Весельчак У» или даже «Центральный рынок»). И наконец главный враг программиста — челfuck, подразумевающий от неграмотности и опечаток до залипающей клавиатуры и опечаток. Остальное под катом…

Знакомство с javascript-фреймворком Backbone я, как и многие, начинал с todo-туториала, на базе которого строилось дальнейшее использование фреймворка в своих проектах.

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

Предисловие

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

1. Память
2. Оптимизация операций
3. Выделение критических участков
4. Циклы и объектные свойства
5. Немножко о DOM
6. DocumentFragment как промежуточный буфер
7. О преобразованиях в объекты
8. Разбитие кода
9. События перетаскивания
10. Другие советы

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

Память

Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
Чтобы уменьшить расход памяти, я предлагаю несколько способов:

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

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

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

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



После нескольких месяцев работы над исправлением ошибок и добавлением новых функции на суд общественности выношу новую версию Image Catalyst 2.1. В новой версии были сделаны ряд ключевых изменений.

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

1. Суть оптимизации
2. Page load vs forced refresh
3. Потребуется автоматизация
4. Реализация серверной части
5. Оптимизация серверной части
6. Особенности google app engine
7. Исходный код
8. Резюме

Рассматривается пример реализации для Google App Engine / Python.

Вместе с ростом мобильного интернета растёт и необходимость оптимизации скорости работы мобильных сайтов. Даже самые современные смартфоны на Android, iOS, WebOS, BlackBerry OS и др. обладают процессорами с частотой не более 1Ghz, а скорости 3G можно считать достаточно медленными (скорость загрузки в 3 раза меньше DSL).

Мобильные устройства унаследовали проблемы “больших” машин: от количества http-запросов до эффективности работы JavaScript.

Особенности мобильных устройств

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

• маленькое разрешение экрана;
• медленные соединения;
• ограниченный размер кэша;
• много различных устройств и форм-факторов;
• низкая мощность процессоров;
• широкая поддержка HTML5;
• относительно новые браузеры (в этом мире не знают о IE6).

Уважаемый пользователь системы WebVisor!

Извещаем вас, что с 10 июня сервис WebVisor.ru прекращает свою работу в связи с переходом технологии WebVisor в компанию Яндекс. Вся функциональность, которая была доступна в сервисе WebVisor.ru, будет доступна в сервисе Яндекс.Метрика.

Благодарим вас за использование нашего сервиса. В качестве компенсации за возможные неиспользованные в системе WebVisor.ru бонусы предлагаем вам инвайт в систему ВебВизор, интегрированную в Яндекс.Метрику.

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

Мысли о таком закрытии сервиса и вопросы разработчикам этой технологии в Яндекс:

Введение

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

Храните мелкие картинки, которые нельзя засунуть в спрайты, в data:image base64 в CSS — это экономит кучу запросов к вебсерверу.

Да, инструменты для создания CSS спрайтов существуют. Я даже сделал один такой сервис. Но они время от времени ломаются (как сейчас, мой). Но и командная многого стоит, и imagemagick. Давайте посмотрим, как мы можем создавать CSS спрайты только из командной строки.

Создание картинки

Начнем с того, что у нас есть список отдельных файлов:

$ ls

1.png  2.gif  dot.png  phoney.gif  tw.gif

• — 1.png
• — 2.gif
• — dot.png
• — phoney.gif
• — tw.gif

Сделаем из них спрайт:

$ convert *png *gif -append result/result-sprite.png

Да, это все. Смотрим результат.