Самый быстрый сайт

Чтобы сайт быстрее грузился его нужно оптимизировать!

И первое над чем стоит задуматься — это оптимизация HTML/XML/JS/CSS кода на PHP:

  • Удаление из кода комментариев
  • Удаление лишних пробелов и переносов строк
  • Замена тегов, событий и цветов на более короткие
  • Код вытягивается в одну строку — грузится и обрабатывается в несколько раз быстрее

Что это и как это выглядит можно понять на следующем слайде:

Несколько способов оптимизации:

Optimize-2.3.4 — Оптимизация сгенерированного PHP скриптом HTML/XML/JS/CSS кода перед выводом в браузер, оптимизация «на лету» от автора Rin

Возможности оптимизатора HTML/XML кода:

  • удаляет пробелы вначале и в конце переносов строк
  • удаляет пробелы ПОСЛЕ открывающих тагов, если перед тагом есть пробел
  • удаляет пробелы ПЕРЕД закрывающими тагами, если после тага есть пробел
  • удаляет многострочные или большие html комментарии, комментарии в javascript и стилях.
  • корректно обрабатывает таги , <textarea>, <code>, <nooptimize></li><li>специальный таг <nooptimize> на выходе вырезается.</li></ul><p><em>.</em><em>Особенности оптимизатора HTML/XML кода</em></p><p>Ценность этого оптимизатора в том, что он аккуратен к html коду с формами ввода, «с умом» вырезает комментарии вида <!—…—> и // в <script>…</script>.</p><p>Верстальщики могут временно/навсегда комментировать большие участки html кода, писать пояснительные комментарии для себя, не опасаясь за размер выходного файла.</p><p>С параметрами по умолчанию Optimize::html() даёт приемлемое сжатие за небольшое время работы, (баланс между степенью сжатия и скоростью работы) для использования оптимизации «на лету».</p><p><em>Пример использования:</em></p><pre>// подключаем include(«optimize.php»); //прочие параметры PHP <span class=»redactor-invisible-space»>ob_start(array(‘Optimize’, ‘html’)); <span class=»redactor-invisible-space»>// код РНР для генерации HTML страницы ob_end_flush();<span class=»redactor-invisible-space»></span></span></span> Никогда не экономьте на отступах и пробелах в написании кода и ваш КПД увеличится! 🙂 С параметрами по умолчанию программа даёт приемлемое сжатие за небольшое время работы, (баланс между степенью сжатия и скоростью работы) для использования оптимизации «на лету». Скачать Optimize-2.3.4.7z

    Сжатие HTML<?php header(‘Expires: ‘.gmdate(‘D, d M Y H:i:s GMT’, time() + 3600)); header(‘Content-type: text/html; charset=UTF-8’); header(«Last-Modified: » . gmdate(«D, d M Y H:i:s») . » GMT»); header(‘X-UA-Compatible: IE=Edge,chrome=1’); function ob_html_compress($buf){ return preg_replace(array(‘/<!—(?>(?![).)(.*)(?>(?!]).)—>/Uis’,’/[[:blank:]]+/’),array(»,’ ‘),str_replace(array(«n»,»r»,»t»),»,$buf)); } ob_start(‘ob_html_compress’); ?> <!— Your HTML code here —> <?php ob_end_flush() ?>


    Сжатие JSСоздайте файл js.php со следующим кодом:<?php function compress($buffer) { $buffer = preg_replace(«/((?:/*(?:[^*]|(?:*+[^*/]))**+/)|(?://.*))/», «», $buffer); $buffer = str_replace(array(«rn»,»n»,»r»,’ ‘,’ ‘), », $buffer); return $buffer; } $modified = 0; $offset = 60 * 60 * 24 * 7; header (‘Content-type: text/javascript; charset=UTF-8’); header (‘vary: accept-encoding’); header (‘Cache-Control: max-age=’ . $offset); header (‘Pragma:’); header («Last-Modified: «.gmdate(«D, d M Y H:i:s», $modified ).» GMT»); if(extension_loaded(‘zlib’)){ob_start(‘ob_gzhandler’);} ob_start(«compress»); include(‘init.js’); ob_end_flush(); if(extension_loaded(‘zlib’)){ob_end_flush();} ?> В HTML код страницы добавьте<script src=»https://rpilot62.ru/wp-content/uploads/2018/06/93590.jpg»></script> В init.js файл напишите ваш JavaScript-код и сохранить его в директории, где сохранен js.php


    Оптимизация и кэширование CSSсоздайте файл css.php со следующим кодом:<?php $styles = array( //your CSS files «style1.css», «style2.css», «style3.css», ); $mincss = «»; foreach ($styles as $css) { $mincss .= file_get_contents($css); } $mincss = preg_replace(‘!/*[^*]**+([^/][^*]**+)*/!’, », $mincss); $mincss = str_replace(‘: ‘, ‘:’, $mincss); $mincss = str_replace(array(«rn»,’ ‘,’ ‘), », $mincss); $mincss = str_replace(‘;}’,’}’, $mincss); $modified = 0; $offset = 60 * 60 * 24 * 7; if (isset($_SERVER[‘HTTP_IF_MODIFIED_SINCE’]) && strtotime($_SERVER[‘HTTP_IF_MODIFIED_SINCE’]) >= $modified) { header(«HTTP/1.0 304 Not Modified»); header (‘Cache-Control:’); } else { header (‘Cache-Control: max-age=’ . $offset); header (‘Content-type: text/css; charset=UTF-8’); header (‘Pragma:’); header («Last-Modified: «.gmdate(«D, d M Y H:i:s», $modified ).» GMT»); if(extension_loaded(‘zlib’)){ob_start(‘ob_gzhandler’);} ob_start(«compress»); echo $mincss; ob_end_flush(); if(extension_loaded(‘zlib’)){ob_end_flush();} } ?> В HTML включите вывод<link rel=»stylesheet» href=»/css/css.php» />

Клуб — это место встречи людей с едиными интересами, клуб служит для регулярных встреч и общения своих участников, где сообща, легко и интересно решаются поставленные задачи.

Человек — существо общественное, поэтому в сплочённой команде, вместе с единомышленниками наиболее легко и эффективно достигаются самые высокие цели.

Клуб «Легко» поможет Вам раскрыть свое великолепие, определить истинные цели и реализовать свой потенциал на пути их достижения.

 

Клуб «Легко» – это место для интеллектуального общения, самореализации и саморазвития личности.

 

В клубе «Легко» Вас ждет много интересного и познавательного.

 

Став участником клуба «Легко», Вы получаете доступ к следующим услугам:

 

1.

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

 

2. Возможность получения личных консультаций на интересующие Вас вопросы.

 

3. Ежедневные гороскопы по знакам зодиака.

 

4. Участие в партнерской программе.

 

Доступ к перечисленным услугам открывается за еженедельную абонентскую плату в размере 1.10 PM.

Участвовать в клубе «Легко» может любой желающий.  

 

 С чего начать.

 

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

 

 

 

 

Cтать партнером программы “Легко”

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

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

Нормальная скорость загрузки страницы – 1 секунда. Если ваш ресурс загружается дольше, то либо у вас медленный интернет, либо файлы сайта слишком большие. Проверить скорость загрузки сайта можно с помощью сервиса: http://pr-cy.ru/speed_test/.

Как и зачем сжимать страницы сайта?

Сжимать контент ресурса нужно по нескольким причинам. Либо если у вашего сайта низкая скорость загрузки, либо если вы хотите поднять его в результатах поисковой выдачи. Также бывает, что проблема низкой скорости появляется после смены шаблона.

Существует два основных способа сжать страницы. Первый – это кэширование файлов сайта. Второй – прописать специальную строку в файле .htaccess. При этом включится такая функция, как Gzip сжатие. Намного лучше пользоваться вторым способом, так как он проще, а эффект от него такой же. Этот способ работает по такому принципу: при отправке файлов функция запаковывает их в архивы, чем значительно уменьшит вес, и увеличивает скорость загрузки. Включается эта функция достаточно просто. Нужно просто открыть файл .htaccess для редактирования, и прописать в ней одну строчку. Ниже предоставлен пример кода для включения данной функции в CSS:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

Поскольку этот способ не всегда срабатывает, то ниже предоставляю еще один вариант:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
<ifmodule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$ </ifmodule>
</IfModule>

После этого функция сразу же будет включена.

Стоит заметить, что при этом будет увеличена нагрузка на сервер, так что внимательно следите за этим.

Как включить кэширование файлов?

Кэширование включается в том же файле .htaccess. Для этого нужно открыть его и прописать такой код:

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch «.(jpg|jpeg|gif|png|ico|css|js)$»>
ExpiresActive on
ExpiresDefault «access plus 1 month»
</filesmatch>
</ifmodule>

Как видите, все довольно просто. Теперь, если у вас есть желание, вы можете проверить, как сжатие влияет на скорость загрузки страниц. Для этого можно воспользоваться сервисом Page Speed. Чтобы проанализировать страницу, нажмите на ссылку, указанную в картинке:

После завершения анализа выскочит окно с советами по ускорению сайта и оптимизации страниц, причем как для компьютеров, так и для мобильных телефонов:

Удобно то, что сервис рассказывает вам, как изменить свой сайт в лучшую сторону.

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

А те, кто не сделает это, могут потерять большую часть трафика и опустить свой сайт в результатах поиска.

Статьи по теме:

YUI Компрессор всегда сохранять эксплуатационные качества кода при одновременном снижении ее общую площадь байт (как в исходных условиях и после сжатия, так как большинство Java-CSS и подается с производственными веб-серверов с gzip'нутыми как часть протокола HTTP). YUI Компрессор Minifier JavaScript разработан, чтобы быть 100% гарантией безопасности и дают более высокую степень сжатия, чем большинство других инструментов. Испытания на YUI библиотеке показали экономию более 20% по сравнению с JSMin (став 10% после сжатия HTTP). YUI Компрессор также может сжимать CSS файлы с помощью порт Isaac Schlueter 'ы регулярных выражений на основе CSS Minifier.

YUI Компрессор написано в Java (требуется Java> = 1,4) и полагается на Rhino приступить к разбивке источник JavaScript файл.

Она начинается с анализа источник JavaScript файл, чтобы понять, как он структурирован. Затем он выводит маркер потока, опуская столько пробельных символов, сколько возможно, и заменить все локальные символы на 1 (или 2, или 3) символ буквы там, где такая замена подходит (в лице злых функций, таких как eval или with , YUI Компрессор занимает оборонительную подхода не обфускации любой из областей, содержащих злого о) Алгоритм сжатия CSS использует набор точно настроенными регулярных выражений, чтобы сжать исходный файл CSS.

Версионность js и css

Часто вижу проблему, что разработчики допускают кеширование браузерами устаревших стилей css и скриптов js.

Это всплывает, если разметка обновилась, а стили или скрипты подгрузились старые. Получается что верстка «едет». При этом у разработчиков все хорошо отображается из-за локальных настроек. При этом горе-разработчики рекомендуют всем проверяющим нажимать CTRL+R и CTRL+F5 для того чтобы обновить закешированное содержимое. А вот простые пользователи, которые возвращаются на сайт, видят черти что.

Решить данную проблему очень просто, нужно к пути до скрипта дописывать гет параметром версию файла, например:

Что дает битрикс?

Битрикс при правильном подключении стилей и скриптов дописывает к пути до файла время обновления файла+размер файла:

Как правильно подключать свои файлы js и css?

Добавления стилей и скриптов в <head></head>

Чтобы битрикс выводил вместе со своими стилями и скриптами ваши, их нужно добавлять следующим образом:

Этот код нужно писать в некешируемой области сайта, например в шаблоне. Если требуется подключать свои стили/скрипты из компонентов, то нужно использовать файл component_epilog.php

Тогда код подключения ваших стилей/скриптов будет генерироваться вместе со стандартными с помощью функции:

При таком подключении ваши стили/скрипты будут участвовать в стандартном объединении и сжатии, на ряду со стандартными. Эта опция включается в настройках главного модуля.

А если нужно подключать скрипты в самом конце страницы, в footer?

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

Если не отвлекаться, то в шаблоне сайта, в файле footer.php нужно вместо непосредственно пути до стилей скриптов писать следующее:

Этот код подставит к пути до файла время обновления + размер.

Рекомендую:

Поддержать проект:

бесполезная кнопка, которую еще никто не нажал:)
Нажали! Кнопку нажали уже 7 человек!!! Спасибо, очень мотивирует!

Добавить комментарий

Закрыть меню