Ускоряем загрузку страниц, связывая CSS и JavaScript
Ну типа вы видели когда страницы грузятся, внизу показывается индикатор загрузки файлов, то один то еще один, то еще десяточег CSS а потом JavaScript. Это все зловещщие link тэги.. и другие топорные средства подгрузки данных. И пока все не подгрузится хренушки вы увидите то что задумал автор. При этом Opera отжигает.
Вообще процесс такой: Браузер увидев ссылки на link тэги начинает их параллельно подгружать с некотрым ограничением на количество потоков. Это может заставить вас ждать…
Пример
В качестве примера глянем сюды, кэш FireFox отключен и мы используем FireBug для подглядывания, а да, не забываем про DOCTYPE, ведь он тоже грузится по идее.
1 <html> 2 <head> 3 <title>Apache / PHP</title> 4 <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/structure.css" /> 5 <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/standard.css" /> 6 <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/format.css" /> 7 <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/index.css" /> 8 <link rel="stylesheet" type="text/css" href="http://www.sitepoint.com/css2/promo.css" /> 9 </head> 10 <body> 11 </body> 12 </html>
Загрузка составила 2.24 секунды для пустой страницы.. гыы. Ну мы типа можем пошаманить над сервером.. как это сделал настоящий автор буржуйской статьи. (а jkeks - русский, http://ajaxed.ru ), но в итоге-то че-то там мужик нашаманил и уменьшил время загрузки в 2 раза, не в этом дело, ведь мы не имеем как правило доступа к настройкам Apache нашего хостера. И тем более не умеем менять Apache lighttpd.
Во первых давайте глянем, а что будет если нам все запихать в 1 файл ? Ну вот примерно и получили 560ms. Победа ? Дело в том, что это и без статьи понятно.. ну выиграли 2 секунды. Ну и слава всем богам. А как же быть если нужна только часть CSS, только один файл из тех нескольких что мы объединили, к тому же с JS может быть не так все просто. Ну вот для этого случая привели такую технологию: Запрос один, а загруженных файлов много. Например:
http://example.org/bundle/one.css,two.css,three.css
Для этого надо: скачать и установить этот файл в корень сайта Самостоятельным читать мануал, но и так все расскажу. В нем указать директорию для CSS и JavaScript файлов Затем создать папку cache для возможности записи в нее. Скрипт ищет директорию cache в корне сайта, но это меняется в combine.php. Ну и последнее.. необходимо добавить следующие строчки кода в .htaccess :
RewriteEngine On RewriteBase / RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1 RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1
Если у вас уже есть URL rewrite правила, просто добавьте туда 2 последние строчки. Все.. теперь можете писать в HTML очень маленькие заголовки для подгрузки, учтите, что для JavaScript и CSS загрузки надо разделять. Вот пример: 1 <html> 2 <head> 3 <title>lighttpd bundled</title> 4 <link rel="stylesheet" type="text/css" href="http://sitepointstatic.com/bundle/structure.css,standard.css,format.css,index.css,promo.css" /> 5 </head> 6 <body> 7 </body> 8 </html>