• Оптимизация PNG и JPEG без потери качества. Часть 1

    Введение


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

      Мы в Яндекс.Почте совместно с командой Nginx провели исследование, чтобы на живом примере с подробностями расставить точки над «ё» в вопросе о том, насколько и за счет чего SPDY ускоряет интернет.

      Про сам SPDY вы, конечно, знаете. В 2011 году несколько разработчиков компании Google опубликовали черновик нового протокола, призванного стать заменой привычному HTTP. Его основные отличия заключались в мультиплексировании ответов, сжатии заголовков и приоритизации трафика. Первые несколько версий были не вполне удачными, но к 2012 году спецификация устоялась, появились первые альтернативные (не из Google) реализации, доля поддержки в браузерах достигла 80%, вышла стабильная версия nginx с поддержкий SPDY.



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

      Есть много интересных исследований вокруг SPDY, в том числе самого Google. Компания-автор протокола показывала, что в их случае SPDY ускоряет загрузку на 40%. Исследование протокола SPDY проводила и компания Opera. Но ни методик подсчета, ни примеров страниц, на которых были достигнуты столь впечатляющие результаты, в этих исследованиях не было.
      Итак, что именно мы измеряли и к каким выводам пришли
    • Лёгкий сайт или как посадить браузер на диету

      • Перевод

      А что если объединить профессионалов, работавших над крупными web проектами, чтобы создать исчерпывающее руководство по оптимизации front-end разработки?
      И получить в результате не скучную инструкцию, а что то поинтереснее? А если позвать Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google), и Sérgio Lopes (Caelum) чтобы собрать лучшие практики?

      Именно это мы и сделали! Мы научим вас создавать быстрые сайты.

      Zeno Rocha, руководитель проекта.


      Читать дальше →
    • 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

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

      Читать дальше →
    • Я хочу, чтобы сайты открывались мгновенно

        Здравствуйте, меня зовут Александр Зеленин и я веб-разработчик. Я расскажу, как сделать так, чтобы ваш сайт открывался быстро. Очень быстро.


        Я хочу, чтобы мой сайт открывался быстро
      • Славик и GMT+3 или польза для людей

          Это Славик — обычный ПХП-программист. Не джуниор и не сеньор, а парень из тех, кого раньше называли «веб-мастерами». Славик может и ЦМС поковырять, и свою написать, и шаблон сверстать, и сервер поадминить.

          В этом году Славик завязал со всем этим и решил устроиться на стабильную работу. Знакомые подкинули неплохой вариант — транспортной компании «N-лайнз» нужен разработчик на поддержку готовой системы бронирования.

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

          Однажды утром Славик увидел в Джире новую задачу:


          Читать дальше →
        • Производительность flash-баннеров

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

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

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

                Сейчас уже много где написано и упомянуто про технику CSS sprites (aka CSS Image Maps). Я не буду открывать Америку и рассказывать о ней дотошно еще раз, а просто хочу привести несколько примеров и полезных ссылок. И пару советов из собственной практики.

                Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью свойств background-position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (я полагаю, что 99,9%) оно является просто must-have для любого уважающего себя интернет-ресурса (ибо позволяет сократить число запросов к серверу, отделить поведение от представления, возложить труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами, и много-много прочих «вкусностей»). Но обо всем по порядку. Поехали.

                читать дальше на webo.in →
              • Разгоняем favicon.ico — это как?

                  В очередной презентации Yahoo! о клиентской производительности был поднят вопрос о favicon.ico. Они проводили несколько интересных фактов о данном явлении и давали пару советов. Процитирую их рекомендации:

                  • www.example.org/favicon.ico
                  • Необходимое зло:
                    • Браузер ее запросит
                    • Лучше не отвечать 404-ошибкой
                    • Будут отправлены cookie
                    • Не может быть в CDN
                    • Мешается в последовательности загрузки ресурсов
                  • Уменьшайте ее (<=1 Кб)
                  • Использовать анимированные иконки ни разу не хорошо
                  • Выставляйте заголовок Expires
                  • Инструменты: imagemagick, png2ico, favicon.ru
                  • Материал для изучения: в поиске Yahoo! favicon.ico занимает 9% всех просмотров страниц (для webo.in это 7%)




                  Поскольку favicon.ico не является обычной картинкой при загрузке сайта (она, во-первых, запрашивается едва ли не один-единственный раз браузером при посещении сайта, во-вторых, загружается, игнорируя обычный порядок загрузки), то в дополнение к уже имеющейся информацией я захотел провести ряд дополнительных исследований и объединить все, что известно прогрессивному человечеству на данную тему. Однако, в ходе изучения материала оказалось, что проблема совсем не так прозрачна, как представлялось изначально. Формат .ico предстал в новом, весьма выгодном для использования в вебе, свете.

                  читать дальше на webo.in →
                • Анимации на GPU: делаем это правильно

                    Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.


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

                    Читать дальше →
                  • Оптимизация PNG и JPEG без потери качества. Часть 2

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

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

                        На сайт был установлен невидимый яваскрипт-счётчик, который фиксировал время до наступления события window.onload и некоторые другие параметры, в течении 5 рабочих дней собиралась статистика и обкатывался её анализатор.
                        Читать дальше →
                      • Скорость имеет значение

                        • Перевод
                        Вице-президент Google, Марисса Мейер, на конференции Web 2.0 поведала историю об одном пользовательском тестировании. Группа пользователей Google была опрошена на предмет, сколько результатов поиска они хотели бы видеть на одной странице. Те просили показать побольше, больше чем те 10 штук что поисковик выдаёт обычно. «Много не мало», говорили они.

                        Специально для них, Гугл увеличил выдачу до 30 результатов. Объём трафика и доходность сократились на 20%.

                        Почему им не понравилось? Ведь всё было сделано именно так как они сами хотели.

                        Оказалось, изменилось кое-что ещё. На генерацию страницы с десятью результатами у сервера уходило 0,4 секунды, на страницу с тридцатью — 0,9.

                        Всего лишь полсекунды разницы уменьшило трафик на 20% и испортило впечатление пользователей о сайте.

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

                        Потом Марисса рассказала что после того как, в своей новой версии, страницы Google Maps стали весить меньше, а карты отрисовываться быстрее, объём трафика незамедлительно вырос, как и использование сервиса вообще.

                        Урок в том, сказала Марисса, что скорость имеет значение. Люди не любят ждать, так что не заставляйте их делать это.

                        Via Fresh GUI.
                      • Решая не ту проблему

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

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

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



                          Одна из основных функций десктопного клиента Облака Mail.Ru — синхронизация данных. Ее целью является приведение папки на ПК и ее представления в Облаке к одинаковому состоянию. При разработке этого механизма мы встретились с некоторыми, с первого взгляда, достаточно очевидными особенностями различных файловых и операционных систем. Однако если о них не знать, можно столкнуться с довольно неприятными последствиями (не получится загрузить или удалить файл). В этой статье мы собрали особенности, знание которых позволит вам правильно работать с данными на дисках и, возможно, убережет от необходимости срочного хотфикса.
                          Читать дальше →
                        • Оптимизация изображений, часть 3: 4 шага для уменьшения размера файлов

                          • Перевод
                          Примечание: ниже расположен перевод заметки Image Optimization, Part 3: Four Steps to File Size Reduction от Stoyan Stefanov. В ней рассматриваются наиболее популярные консольные утилиты для минимизации изображений. Мои комментарии далее курсивом.
                          Stoyan StefanovОб авторе: Stoyan Stefanov работает веб-разработчиком в команде Yahoo! по исключительной производительности и руководит разработкой инструмента для анализа производительности — YSlow. Он также внес значительный вклад в программы, разрабатываемые с открытым исходным кодом, выступает на конференциях и является техническим писателем: его последняя книга озаглавлена Объектно-ориентированный JavaScript.

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

                          Текущая заметка посвящена некоторым наиболее часто используемым инструментам, которые можно применить для уменьшения размера изображений. Идея заключается в следующем: мы можем получать все изображения от дизайнера, но не оставлять их в исходном виде, а немного уменьшать в размере, используя указанные ниже инструменты. Это позволит автоматизировать процесс без необходимости глубокого анализа структуры изображения.
                          Читать дальше на webo.in →
                        • Разгони свой сайт: gamma-версия

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

                            Почему оптимизация?



                            На мой взгляд, на текущий момент веб-разработчики очень мало уделяют внимания доступности (accessibility) и удобству пользования (usability) проектов, над которыми работают. Для них сайт — это килобайты кода и пара картинок, которые нужно как-то показать клиенту. О пользователе никто при этом не думает, в лучшем случае, прикрываясь такими выражениями, как: «у меня отсюда и так все быстро грузится» или «каналы сейчас не те, что 10 лет назад».

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

                            Почему клиентской части?



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


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

                            WEBoptimizator

                            Читать дальше →
                          • JavaScript. Оптимизация: опыт, проверенный временем

                            Предисловие


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

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

                            Память

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

                            • Перевод
                            Примечание: ниже перевод презентации «High Performance Ajax Applications», подготовленной ведущим специалистом из Yahoo (а теперь уже из Apple) Julien Lecomte. В ней автор освещает некоторые аспекты оптимизации как JavaScript-приложений, так и веб-сайтов вообще. В целом, советов много, и почти все, действительно, по делу. Однако, встречается и откровенная реклама Yahoo :) Мои комментарии далее курсивом.

                            Часть 1. Разработка для высокой производительности



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



                            • Ориентируемся на производительность с самого первого дня
                            • Тесно работаем с дизайнерами и менеджерами продукта
                            • Понимаем рациональность дизайна
                            • Объясняем компромиссы между дизайном и производительностью
                            • Предлагаем альтернативы и показываем, что еще возможно (на уровне прототипа)
                            • Пробуем силы в реализации нетривиального дизайна (нельзя сразу говорит «нет»)
                            • Помогаем упростить дизайн и взаимодействие с пользователем (добиваемся компромисса)


                            читать дальше на webo.in →

                          Самое читаемое