http://pro100pro.com About programming, management and business Tue, 11 Dec 2007 07:10:54 +0000 http://wordpress.org/?v=2.2 en http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici-part2 http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici-part2#comments Thu, 29 Nov 2007 09:18:08 +0000 Yaroslav Vorozhko http://pro100pro.com/optimization/httppro100procomoptimizationsokrashenie_vremeni_zagruzki_stranici-part2 Итак какими же средствами можно добиться уменьшения времени загрузки страницы. Уменьшение количества HTTP запросов Уменьшение размера JavaScrip файлов Подключение Gzip компресии Установка для всех файлов заголовка Expires Перед началом чтения части, советую ознакомиться с первой часть данной серии статей: Уменьшение времени загрузки страницы - оптимизация контента [http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici] Уменьшение количества 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. Заметте, результат потрясающий учитывая, то количество изменений, которые мы сделали и объем работы в целом, но расти еще можно и это только начало оптимизации. ]]> http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici-part2/feed http://pro100pro.com/javascript/datejs_library http://pro100pro.com/javascript/datejs_library#comments Wed, 28 Nov 2007 12:00:42 +0000 Yaroslav Vorozhko http://pro100pro.com/javascript/datejs_library 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 действительно впечетляет и я думаю буду ее использовать во всех следующих проектах, где надо будет работать с датами. ]]> http://pro100pro.com/javascript/datejs_library/feed http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici#comments Wed, 28 Nov 2007 09:57:00 +0000 Yaroslav Vorozhko http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici Уменьшение времени загрузки страницы - это одна из самых важных задач по оптимизации веб сайтов, так как в среднем время загрузки страницы клиенту занимает более 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 ]]> http://pro100pro.com/optimization/sokrashenie_vremeni_zagruzki_stranici/feed http://pro100pro.com/personal/photoblog http://pro100pro.com/personal/photoblog#comments Fri, 23 Nov 2007 14:26:34 +0000 Yaroslav Vorozhko http://pro100pro.com/personal/photoblog Сегодня День Рождения Photoblog.com.ua . Портал посвященный собранию лучших фотографий лучших фотографов в мире! Прошу высказывайте ваше мнение и пожелания. ]]> http://pro100pro.com/personal/photoblog/feed http://pro100pro.com/personal/every_day_todo_list http://pro100pro.com/personal/every_day_todo_list#comments Fri, 23 Nov 2007 14:22:03 +0000 Yaroslav Vorozhko http://pro100pro.com/php/every_day_todo_list Прочитав заметку Стивена Павлины Как выработать новую привычку за 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. Вечером смывать косметику и ухаживать за лицом и телом (more…) ]]> http://pro100pro.com/personal/every_day_todo_list/feed http://pro100pro.com/tips-and-tricks/sftp_file_upload http://pro100pro.com/tips-and-tricks/sftp_file_upload#comments Tue, 20 Nov 2007 12:33:32 +0000 Yaroslav Vorozhko http://pro100pro.com/tips-and-tricks/sftp_file_upload Недавно в одном из моих проектов появилась задача отправлять файлы по защищенном 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 . ]]> http://pro100pro.com/tips-and-tricks/sftp_file_upload/feed http://pro100pro.com/personal/umet_sozdat_imet_k_2008_godu http://pro100pro.com/personal/umet_sozdat_imet_k_2008_godu#comments Thu, 15 Nov 2007 14:33:38 +0000 Yaroslav Vorozhko http://pro100pro.com/personal/umet_sozdat_imet_k_2008_godu Что Я планирую Уметь: Разговорный и письменный английский Просыпаться в 5 часов утра, а ложиться когда захочет мой организм Делать ежедневную зарядку Ежедневно работать над собой - совершенствовать свои навыки личностного развития Отлично знать MySQL, Javascript и CakePHP - усовершенствовать свои профессиональные навыки Поддерживать свой блог - ежедневно писать как минимум по одной заметке Что Я планирую создать: Photoblog.com.ua - агрегатор лучших фотоблогов LifeUkraine.com - украинский информационный портал Что Я планирую Иметь: Смартфон HP iPAQ 514 Voice Messenger Около 100 посещений в день Photoblog.com.ua Запустить LifeUkraine в Live По мере исполнения списка, буду дописывать что сделано и в каком статусе находится. Если что то сейчас и упустил, то это будет обязательно дописано позже. ]]> http://pro100pro.com/personal/umet_sozdat_imet_k_2008_godu/feed http://pro100pro.com/javascript/prototype/launch_scripteka http://pro100pro.com/javascript/prototype/launch_scripteka#comments Mon, 12 Nov 2007 12:18:49 +0000 Yaroslav Vorozhko http://pro100pro.com/javascript/prototype/launch_scripteka Юрий Зайцев и Максим Черняк оффициально запустили проект Scripteka.com - библиотеку расширений основаных на Prototype. Их целью является - предоставить централизованное и удобное хранилище расширений основаных на Prototype. Scripteka.com предоставляет такие сервисы: Просмотр библиотеки популярных и полезных расширений основаных на Prototype Оценивать и искать по рейтингу самые лучшие скрипты Добавлять свои собственные работы и получать отзывы от комюнити Подписаться на рассылку новых добавлений в библиотеку ]]> http://pro100pro.com/javascript/prototype/launch_scripteka/feed http://pro100pro.com/javascript/prototype/prototype_wrong_and_right_way http://pro100pro.com/javascript/prototype/prototype_wrong_and_right_way#comments Fri, 09 Nov 2007 17:13:26 +0000 Yaroslav Vorozhko http://pro100pro.com/javascript/prototype/prototype_wrong_and_right_way Juiry Zaytsev показывает на примерах - ошибочный подход и правильный подход программирования на Prototype. Ошибочно: $('footer').style.height = '100px'; $('footer').style.background = '#ffc'; Правильно: $('footer').setStyle({ height: '100px', background: '#ffc' }) Первая часть примеров Вторая часть примеров ]]> http://pro100pro.com/javascript/prototype/prototype_wrong_and_right_way/feed http://pro100pro.com/javascript/urchintracker_is_not_defined http://pro100pro.com/javascript/urchintracker_is_not_defined#comments Fri, 09 Nov 2007 11:53:55 +0000 Yaroslav Vorozhko http://pro100pro.com/javascript/urchintracker_is_not_defined urchinTracker(); is not defined - такую ошибку можно увидеть, когда установлен FireFox plugin FireBug. Исправляеться следующим образом: Строку urchinTracker(); заменяем на if (typeof(urchinTracker) == ‘function’) urchinTracker(); Если, кто то знает причину этой проблемы, прошу написать ее в комментариях. ]]> http://pro100pro.com/javascript/urchintracker_is_not_defined/feed