Pro100pro Yaroslav Vorozhko Home - About programming, management

Yaroslav Vorozhko Home [/] About programming, management and business Home Resume/CV November 29 Уменьшение времени загрузки страницы - оптимизация контента - часть 2 Posted In: Optimization , Javascript , Tips and Tricks , PHP by Yaroslav Vorozhko Итак какими же средствами можно добиться уменьшения времени загрузки страницы. Уменьшение количества HTTP запросов Уменьшение размера JavaScrip файлов Подключение Gzip компресии Установка для всех файлов заголовка Expires Перед началом чтения части, советую ознакомиться с первой часть данной серии статей: Уменьшение времени загрузки страницы - оптимизация контента Уменьшение количества HTTP запросов Для уменьшения количества HTTP запросов я объединил все Javscript файлы в один, и то же самое проделал с CSS файлами. Немного ниже я покажу как это лучше сделать с Javscript, а вот с CSS я применил простую Unix команду cat. cat file1.css file2.css file3.css > global.css Уменьшение размера JavaScrip файлов Уменьшить размер JavaScrip файлов можно одной из следующих программ: JSMin , YUI Compressor и Dojo Compressor ( ShrinkSafe ). Я использовал самый простой на мой взгляд JSMin, так как только JSMin не требуют наличия java, а работает с PHP. Кроме того JSMin работает как с PHP 4-ой так и с PHP 5-ой версии. Итак моей задачей было обработать каждый JavaScript файл через JSMIn и результат поместить в один глобальный fullpackedjs.js. После этого убрать из headers все подключения обработанных файлов и подключить только глобальный fullpackedjs.js. pack(); //$t2 = microtime(true); //$time = sprintf(’%.4f’, ($t2 - $t1) ); //echo ’script ‘, $jsfile, ‘ packed in ‘ , $out, ‘, in ‘, $time, ‘ s.’, "\n
"; } $fd = fopen($out, ‘w+’); fwrite($fd, $packed); fclose($fd); ?> Как видно из листинга - файлы scriptaculous и lightbox я не обробатывал, так как эти библиотеки имеют проблемы с JSMin. Пока, что поиск решения этой проблемы я оставил на будущее. Подключение Gzip компресии Gzip сжатие можно подключить глобально на уровне Apache, на уровне .htaccess и на уровне php скриптов. Я воспользовался вторым методом - уровень .htacess. Компресия включается следующей стройокй в .htacess файле. php_flag zlib.output_compression On Установка для всех файлов заголовка Expires Заголовоком Expires также можно управлять на 3 уровнях: apache, .htaccess и php скриптах. Настройки Apache по умолчанию я трогать не стал. Я установил Expires на уровне .htaccess глобально для всего сайта и на уровне php скриптов для директорий с изображениями, особенно это важно для jpg файлов, так как обычно они имеют самый большой вес на страницах. Глобальный Expires header в .htaccess устанавливается следующим образом, но работает при условии подключенного mod_expires: ExpiresActive On ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 Строка ExpiresByType image/gif A2592000 устанавливает Expires header для gif файлов ровно на 1 месяц. .htaccess для директорий с JPG файлов я выставил отдельный Expires header: AddHandler application/x-httpd-php .jpeg .jpg php_value auto_prepend_file gzip-jpg.php Здесь я заставляю Apache пропускать все jpg файлы через php обработчик, причем вначале подключать php скрипт gzip-jpg.php. В gzip-jpg.php я устанавливаю свой Expires header и contnet type, это можно было сделать и через модуль Expires, но я хочу показать 2 пути решения установки Expires заголовка. В заключении объем главной страницы Varien.com уменьшился от 1.5Мб до 230Кб. Время загрузки сократилось в двое, а YSlow дает странице оценку C, вместо первоночальной F. Заметте, результат потрясающий учитывая, то количество изменений, которые мы сделали и объем работы в целом, но расти еще можно и это только начало оптимизации. Blog this: Digg it del.icio.us Technorati? Уменьшение времени загрузки страницы - оптимизация контента Up? 1 November 28 Библиотека Mad Cool Date Posted In: Javascript , Tips and Tricks by Yaroslav Vorozhko Datejs - это одна из лучших библиотек работы с датой в Javascript которую я когда либо видел. Пример парсинга даты: Библиотека имеет очень простой API интерфейс: // What date is next thursday? Date.today().next().thursday(); // Add 3 days to Today Date.today().add(3).days(); // Is today Friday? Date.today().is().friday(); // Number fun (3).days().ago(); // 6 months from now var n = 6; n.months().fromNow(); // Set to 8:30 AM on the 15th day of the month Date.today().set({ day: 15, hour: 8, mintue: 30 }); // Convert text into Date Date.parse(‘today’); Date.parse(‘t + 5 d’); // today + 5 days Date.parse(‘next thursday’); Date.parse(‘February 20th 1973′); Date.parse(‘Thu, 1 July 2004 22:30:00′); В заключении Datejs действительно впечетляет и я думаю буду ее использовать во всех следующих проектах, где надо будет работать с датами. Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 28 Уменьшение времени загрузки страницы - оптимизация контента Posted In: Optimization , Javascript , Tips and Tricks by Yaroslav Vorozhko Уменьшение времени загрузки страницы - это одна из самых важных задач по оптимизации веб сайтов, так как в среднем время загрузки страницы клиенту занимает более 80% полной загрузки сайта Для анализа скорости загрузки страницы я использовал расширения Firefox: YSlow , Firebug и Tamper Data . Для анализа возьмем сайт http://varien.com . С помощью Tamper Data мы можем определить время загрузки каждого компонента сайта (тоже самое можно сделать и с помощью FireBug 1.0+): Общее время загрузки с пустым кешем составило 18с - объем всей страницы 1.5 Мб. Время загрузки с полным кешем составило 9с. Из графика видно, что на загрузка компонентов страницы не оптимальна, большое количество HTTP запросов создали большой timeout загрузки страницы. На загрузку html ушло всего 797мс, остальное это Javascript, CSS и images. Первый и самый простой метод увеличения скорости загрузки страницы - это уменьшение количества HTTP запросов. Заметим, что на загрузку Javascript и CSS файлов ушло около половины времени загрузки страницы, причем загрузка проходила в последовательном режиме, т.е. пока не загрузится текущий файл, следующий загружатся не начинает. Итак, для увеличения скорости загрзки нам необходимо уменьшить количество загружаемых Javascript и CSS файлов. Для этого поместим все Javascript файлы в один общий Javascript файл и также все CSS файлы поместим в один общий CSS файл. Таким образом мы уменьшим количество HTTP запросов с 18 до 2!, что в свою очередь уменьшит время необходимое на загрузку Javascript и CSS. Итак, в следующей статье я расскажу на примерах как: Уменьшенить количество HTTP запросов Уменьшенить размер JavaScrip файлов Подключенить Gzip компресию Установить для всех файлов заголовок Expiration Уменьшение времени загрузки страницы -оптимизация контента - часть 2 Blog this: Digg it del.icio.us Technorati? Уменьшение времени загрузки страницы - оптимизация контента - часть 2 Up? 1 November 23 Photoblog.com.ua on the Fly Posted In: Personal by Yaroslav Vorozhko Сегодня День Рождения Photoblog.com.ua . Портал посвященный собранию лучших фотографий лучших фотографов в мире! Прошу высказывайте ваше мнение и пожелания. Blog this: Digg it del.icio.us Technorati? Что Я планирую Уметь, Создать и Иметь до Нового 2008 года Photoblog.com.ua Photoblog - редизайн идеи Что я планирую делать каждый день в течении следующих 30 дней Up? 1 November 23 Что я планирую делать каждый день в течении следующих 30 дней Posted In: Personal by Yaroslav Vorozhko Прочитав заметку Стивена Павлины Как выработать новую привычку за 30 дней?. Я решил попробовать ее в действии. Обещаю каждый день писать отчет в этот пост. Отчет времени ведеться от 23.11.2007. В случае если привычка мне не понравиться, брошу через 30 дней, но я очень надеюсь, что все ниже перечисленные привычки у меня приживуться. В это мне будет помогать моя жена Юля. Итак, что я планирую делать каждый день: 1. Не играть в WOW и CS 2. Читать каждый день по часу - т.о. расширяя свой кругозор 3. Выходить на прогулку каждый вечер. Ходите каждый раз в разные места и делайте там что-нибудь веселое. Этот месяц запомнится Вам надолго. 4. Тратить 30 минут на уборку дома. Всего за 30 дней это отнимет у Вас в общей сложности 15 часов. 5. Бросить пить кофе, есть жирную еду или что-то еще вредное для здоровья. 6. Есть вегетарианскую пищу 7. Бегать по утрам 8. Делать каждодневную зарядку по 30 минут вдень 9. Стать «жаворонком» 10. Звонить друзьям, членам семьи. 11. Ежедневно добавлять новую заметку в свой блог. 12. Урок английского - по часу каждый день Добавлю еще пожелания жены: 13. Каждое утро принимать душ 14. Вечером смывать косметику и ухаживать за лицом и телом Read More Blog this: Digg it del.icio.us Technorati? No related posts Up? 9 November 20 Загрузка файлов через SFTP Posted In: Tips and Tricks , PHP by Yaroslav Vorozhko Недавно в одном из моих проектов появилась задача отправлять файлы по защищенном ftp соединению, т.е. через sftp. В первую очередь я посмотрел мануал на php.net по ключевому слову sftp, но к сожалению команды ssh2_sftp_upload, ssh2_sftp_copy ili ssh2_sftp_put небыло. Поиск в PEAR также ничего не дал. И все таки решение было найдено в оффициальном мануале по php. Оказывается что с помощью команды fopen я могу открыть файл по sftp применив специальный формат URI ("ssh2.sftp://$sftp/path/to/file", ), и получить файловый дескриптор в распоряжение. Прмер загрузки файла test.txt через SFTP $connection = ssh2_connect(’example.com’, 22); ssh2_auth_password($connection, ‘username’, ‘password’); $sftp = ssh2_sftp($connection); //открыть файл и если он существут, то переписать его - режим w+ $stream = fopen("ssh2.sftp://$sftp/test.txt", ‘w+’); //если дескриптор получен, то записать данные в файл if ($stream) { fwrite($stream, "Hello SFTP"); } fclose($stream); Конечно правильнее было назвать заголовок "Как изменить файл через SFTP", но по сути это одно и тоже, только вместо пересылки файла с локального диска на удаленный мы пересылаем его содержимое. Описание SFTP протокола на Wikipedia . Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 15 Что Я планирую Уметь, Создать и Иметь до Нового 2008 года Posted In: Personal by Yaroslav Vorozhko Что Я планирую Уметь: Разговорный и письменный английский Просыпаться в 5 часов утра, а ложиться когда захочет мой организм Делать ежедневную зарядку Ежедневно работать над собой - совершенствовать свои навыки личностного развития Отлично знать MySQL, Javascript и CakePHP - усовершенствовать свои профессиональные навыки Поддерживать свой блог - ежедневно писать как минимум по одной заметке Что Я планирую создать: Photoblog.com.ua - агрегатор лучших фотоблогов LifeUkraine.com - украинский информационный портал Что Я планирую Иметь: Смартфон HP iPAQ 514 Voice Messenger Около 100 посещений в день Photoblog.com.ua Запустить LifeUkraine в Live По мере исполнения списка, буду дописывать что сделано и в каком статусе находится. Если что то сейчас и упустил, то это будет обязательно дописано позже. Blog this: Digg it del.icio.us Technorati? No related posts Up? 2 November 12 Scripteka.com - библиотека Prototype расширений Posted In: Prototype , Javascript , Tips and Tricks , Ajax by Yaroslav Vorozhko Юрий Зайцев и Максим Черняк оффициально запустили проект Scripteka.com - библиотеку расширений основаных на Prototype. Их целью является - предоставить централизованное и удобное хранилище расширений основаных на Prototype. Scripteka.com предоставляет такие сервисы: Просмотр библиотеки популярных и полезных расширений основаных на Prototype Оценивать и искать по рейтингу самые лучшие скрипты Добавлять свои собственные работы и получать отзывы от комюнити Подписаться на рассылку новых добавлений в библиотеку Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 9 Как хорошо вы знаете Prototype Posted In: Prototype , Javascript , Tips and Tricks by Yaroslav Vorozhko Juiry Zaytsev показывает на примерах - ошибочный подход и правильный подход программирования на Prototype. Ошибочно: $('footer').style.height = '100px'; $('footer').style.background = '#ffc'; Правильно: $('footer').setStyle({ height: '100px', background: '#ffc' }) Первая часть примеров Вторая часть примеров Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 9 urchinTracker(); is not defined Posted In: Javascript , Tips and Tricks by Yaroslav Vorozhko urchinTracker(); is not defined - такую ошибку можно увидеть, когда установлен FireFox plugin FireBug. Исправляеться следующим образом: Строку urchinTracker(); заменяем на if (typeof(urchinTracker) == ‘function’) urchinTracker(); Если, кто то знает причину этой проблемы, прошу написать ее в комментариях. Blog this: Digg it del.icio.us Technorati? No related posts Up? 2 « Previous Entries Subscribe categories Ajax (2) Books (5) Business (6) CakePHP (2) ECommerce (1) Javascript (8) jQuery (2) MySQL (3) Optimization (2) Personal (13) Photoblog (2) PHP (8) Prototype (2) Tips and Tricks (11) blogroll Best tech videos Best World Photos Julia Vorozhko Magento Ukrainian PHP Community Vedeney's Blog calendar December 2007 M T W T F S S « Nov 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 © Yaroslav Vorozhko Home 2007 WordPress Themes Sponsored By Web Hosting Unleashed