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 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 7 jQuery Tabs на Ajax в Wordpress Posted In: jQuery , Javascript , Tips and Tricks , Ajax , PHP by Yaroslav Vorozhko В предыдущем посте WordPress Tabs - средствами jQuery . Мы создали два простых таба, в которых поместили Summary и Body сообщения блога. Основная проблема прстых табов - это скорость загрузки всей страницы, так как контен подгружался весь целиком, то и время на загрузку было многократно увеличено. Теперь я предлагаю немного переделать наши табы, а именно загрузку данных делать через Ajax. Сперва создадим файл, который будет заниматься загрузкой контента из базы на страницу. post_content ; $contentdata = explode("", $content); echo $contentdata[$part]; ?> Сохраним этот файл под именем wp_get_content.php и запишем его на в корневой каталог wordpress Далее изменим немного наш Index Template index.php в каталоге текущей темы wordpress.
Это и все, готовый пример можно посмотреть на блоге моей жены . Ссылки: Julia Vorozhko Blog - http://julia.pro100pro.com/ UI jQuery Tabs - http://docs.jquery.com/UI/Tabs Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 6 CakePHP - навигация по страницам Posted In: Tips and Tricks , CakePHP , PHP by Yaroslav Vorozhko Пример как разбить контент на страницы в CakePHP 1.2. Для этого воспользуемся очень простым методом paginate. Пример: //index_controller.php - controller class IndexController extends AppController { var $paginate = array( ‘limit’ => 5, ‘order’ => array( ‘Post.published’ => ‘desc’, ‘Post.created’ => ‘desc’ ) ); var $uses = array("Post"); function index() { $posts = $this->paginate(’Post’); $this->set(compact(’posts’)); } } Теперь выведем найденные данные в View: //навигация по страницам prev(’<< Previous ‘, null, null, array(’class’ => ‘disabled’)); echo $paginator->next(’ Next >>’, null, null, array(’class’ => ‘disabled’)); ?> counter(array( ‘format’ => ‘Page %page% of %pages%, showing %current% records out of %count% total, starting on record %start%, ending on %end%’ )); ?> Ссылки: CakePHP Manual 1.2 - документация по CakePHP версии 1.2, тут же вы найдете полное описание метода paginate() Blog this: Digg it del.icio.us Technorati? No related posts Up? 0 November 4 WordPress Tabs - средствами jQuery Posted In: jQuery , Javascript , Tips and Tricks , PHP by Yaroslav Vorozhko Предположим, блог у нас уже есть и мы хотим улучшить пользовательский интерфейс нашего блога, добавив табы. В блоге WordPress каждый пост делиться на 2 части: общая информация (summary) и полная информация (body), тегом . Все что выше этого тега считается как summary, а то что ниже как body. Наша цель будет - показать summary в первом табе и body во втором, используя jQuery без перезагрузки страницы. Сначала нам надо получить последнюю версию ядра jQuery , а также интерфейс к табам UI jQuery Tabs . Запишите эти файлы в корневой каталог js вашего блога. Еще нам необходимы CSS стили для наших табов, скачать упрощенный вариант CSS стилей можно отсюда ( http://julia.pro100pro.com/css/flora.tabs.css ). Начнем с редактирования файла header.php, который расположен в каталоге вашей темы WordPress. Внутри тега head подключим ядро jQuery: и инициализируем табы для css класса contenttab: Далее внутри тега подключим CSS класс и UI jQuery Tabs: На этом работа над header.php закончена. Теперь приступим к формированию табов в Index Template файле index.php: Передем на строку где выводиться контент, функция the_content, и заменяем эту строку следующим кодом: post_content ; $contentdata = explode(””, $content); ?>