Сократите JavaScript – как сделать, чтобы понравилось PageSpeed Insights. Wordpress сократите javascript
Сократите JavaScript – как сделать, чтобы понравилось PageSpeed Insights
Здравствуйте, уважаемые коллеги веб-мастера, читатели WordPress-book.ru.
Продолжая цикл обучающего материала по ускорению загрузки страниц сайта по рекомендациям сервиса PageSpeed Insights от Google, затронем животрепещущую тему о сокращении JavaScript.
"Сжатие кода JavaScript (сокращенно JS) позволяет сократить объем данных, чтобы ускорить загрузку, обработку и выполнение" – так говорит нам сам сервис. Ваш сайт тоже нуждается в таком улучшении? Если ответ утвердительный, тогда читайте дальше. Инструкция будет короткой и очень простой.
Ну что же, надо так надо. Выигрыш в скорости конечно небольшой, зато мы увеличим свой рейтинг в PageSpeed Insights (сокращенно PSI) и, как следствие - слегка улучшим свои позиции в ТОПе. Как говорится: "Маленькая бородавка – все сайту прибавка".
В прошлый раз в статье "Удалите из верхней части страницы код javascript и CSS" мы оптимизировали внутренние JavaScript, принадлежащие шаблону проекта или его плагинам. Рекомендация по сокращению теперь может возникнуть в основном для внешних системных скриптов, которые подгружаются со стороны чужого сервера.
Кликните по ссылке "Как исправить?" под рекомендацией PSI и чуть ниже всплывут URL всех JS, нуждающихся в сжатии. Внутренние несжатые JS будут иметь URL адрес вашего ресурса а внешние (как на первом скриншоте), соответственно, не вашего :-). Начнем с последних.
Сокращение внешних JavaScript
По адресу JS вы уже сможете его идентифицировать, останется только вспомнить где он сидит. К примеру, наш объект для оптимизации - JS форма подписки почтового сервиса в боковой колонке сайта. Присмотритесь к коду формы и обязательно найдете там путь к исполняемому скрипту.
Если пути и имя скрипта в форме и под рекомендацией PSI совпадают, значит его нам и предстоит сжать. Дальше действуйте по следующей простой инструкции.
- Скачайте уже оптимизированные JS по ссылке в самом низу страницы PageSpeed Insights.
- На своем сервере через фтп соединение создайте папку с именем js и залейте туда скачанный сжатый сервисом скрипт.
- В коде формы измените путь к JS на свой в папке js.
Не забудьте добавить директиву "Disallow: /js/" в robots.txt.
Сокращение внутренних JavaScript
Тут все гораздо проще. Скачанные в первом пункте предыдущей инструкции сжатые JS закачайте с заменой туда, где находятся их неоптимизированные близнецы. И забудьте про них до следующего обновления шаблона или наших подопытных плагинов.
Проверьте результат, наслаждайтесь выполненной работой.
P.S. Возможно, из-за врожденного косноязычия или лени я не все доступно объяснил. Поэтому, если у кого останутся вопросы, спрашивайте в комментариях.
wordpress-book.ru
Удалите из верхней части страницы код javascript и CSS
Здравствуйте, уважаемые коллеги веб-мастера! Мало кто из нас не проверял свой сайт на скорость загрузки всем известным сервисом PageSpeed Insight от Google и не сталкивался при этом с рекомендацией - "Удалите из верхней части страницы код javascript и CSS, блокирующий отображение".
Скажите, вас эта рекомендация тоже ставила в тупик, как и меня? Если так, читайте дальше, я помогу вам решить эту задачку.
Тут даже дело не в сложности выполнения, а в грустной перспективе выполнять операцию каждый раз после очередного обновления плагинов. Все JavaScript и CSS установленных расширений, перемещенные вручную из верхней части страницы, вернутся обратно сразу после обновления этих самых расширений.
Так зачем же все эти сложности, когда вопрос можно решить установкой плагина, который выполнит требуемую работу за вас раз и навсегда. Игра стоит свеч, ведь выигрыш в скорости многократно превысит проигрыш от нагрузки расширения.
Итак, для выполнения рекомендаций Гугла по удалению кода javascript и CSS из верхней части страницы я подрядил плагин Autoptimize, который объединяет скрипты и стили в один файл и переносит его из верхней части страницы, чего мы собственно и добиваемся. Кроме того, плагин сокращает HTML, JS и CSS (еще один плюсик нам от PageSpeed Insight).
Таким образом, мы убьем сразу много зайцев :-).
Плагин можно найти по названию через поиск в панели администратора сайта или скачать с депозитария WordPress по адресу - https://ru.wordpress.org/plugins/autoptimize/
Настройки плагина для WordPress Autoptimize
- После установки и активации Autoptimize, перейдите к его настройкам.
Расставьте галочки.
- Далее перейдите к расширенным настройкам плагина, для чего в правом верхнем углу кликните по кнопочке "Show advanced settings"
Для успешного завершения миссии на wordpress-book.ru мне хватило поставить галочку в шестом пункте у Inline all CSS в опциях CSS, как на скриншоте ниже, и все на этом.
В вашем случае все может сложиться немного сложнее. Например, некоторые плагины, использующие в работе библиотеку jQuery, просто перестают работать и приходится ковыряться в настройках более плотно. Как известно, случаи бывают разные, поэтому рассмотрим все настройки плагина Autoptimize.
Параметры HTML
1 Активируйте опцию "Оптимизировать код HTML" если этого просит PageSpeed Insight.
2 Комментарии HTML я сохранять не стал за ненадобностью.
Опции JavaScript
Если после активации плагина под рекомендацией "Удалите из верхней части ...." исчезли из списка JS и сайт продолжает работать по-прежнему, без перекосов, без конфликтов плагинов и т.д., оставьте тут настройки как есть. Иначе поэкспериментируйте со следующими опциями:
1 Force JavaScript in <head>
Некоторые скрипты требуют загрузки только с верхней части страницы (от чего мы как раз избавляемся), иначе они будут работать некорректно или вообще объявят забастовку. Опция обеспечивает им это условие к недовольству PageSpeed Insight. Включите в самом крайнем случае, только если не помогут функции ниже.
2 Also aggregate inline JS
Речь идет об интеграции JS в HTML. После включения, как уверяет разработчик, должна значительно вырасти скорость сайта. Параметр активен по умолчанию.
3 Exclude scripts from Autoptimize
Впишите в поле через запятую имена файлов тех скриптов, которые не должны интегрироваться в HTML, это на случай конфликтов работы JS после интеграции.
4 Add try-catch wrapping
Если какой-либо скрипт работает некорректно, он не даст жизни остальным. Опция позволяет обойти сломанный JS и продолжить работу.
Многие веб-мастера размещают в сайдбаре различные блоки, работающие на JS. Это могут быть блоки подписки, перенаправления трафика партнерских программ и тому подобные. Чтобы скрипт блока не блокировал загрузку (плагин отказался решать эту задачу), отложите ее. Для этого просто вставьте атрибут "async" в код скрипта как на скриншоте.
Опции CSS
1 Оптимизировать код CSS
Как уже было обговорено, опция сокращает все CSS и объединяет их в один файл. Для удаления CSS из верхней части страницы этого недостаточно.
2 Generate data: URLs for images
Если в каком-либо файле CSS прописаны пути к маленьким изображениям (меньше 4кб), то этот запрос будет прописан в основном файле CSS.
3 Remove Google Fonts
Замена шрифтов Гугла (которые почему-то не любит PageSpeed Insight если таковые наличествуют) на стандартные.
4 Also aggregate inline CSS
Как и в случае с JS, опция интегрирует ту часть CSS в HTML, которую посчитает нужной, что также должно положительно сказаться на скорости загрузки.
5 Inline and Defer CSS
Позволяет интегрировать в HTML только CSS видимой отрисовки сайта с отложенной загрузкой остального кода CSS.
Если задействовать, откроется поле, в которое требуется вставить этот самый кусок CSS видимой отрисовки. Полезно мегапорталам с множеством файлов CSS, чтобы не увеличивать до запредельных размеров их HTML.
Для определения CSS видимой отрисовки существует несколько сервисов, о которых упоминается в разделе "fag" на странице плагина. Эту функцию я не активировал ни разу и пока описывать не буду, если только вы не попросите в комментариях.
6 Inline all CSS
В отличие от предыдущего пункта, опция интегрирует вообще все стили в HTML. После активации, как правило, PageSpeed Insight перестает ругаться на блокирующие CSS в верхней части страницы.
7 Exclude CSS from Autoptimize
Оптимизация CSS, как и JS, может повлечь за собой их неправильную работу. Добавьте сюда эти файлы, чтобы исключить их из оптимизации.
CDN Options
CDN Base URL
Если сайт использует CDN сервера для сокращения времени загрузки при передаче данных на большие расстояния, впишите сюда их URL.
Информация о кэше
Save aggregated script/css as static files
Опция выключит статическое сжатие скриптов и стилей. Активируйте, если на сайте используется Gzip сжатие.
После завершения или в процессе работы с настройками Autoptimize, вы конечно захотите посмотреть результаты своего труда в вышеупомянутом сервисе. Сохраняйте изменения нажатием кнопки "Сохранить изменения и очистить кэш" чтобы проверять только свежие страницы.
Надеюсь, вы справитесь, скорость вашего сайта возрастет и это обязательно отметят поисковые машины.
wordpress-book.ru
Сократите HTML при помощи плагина WP-HTML-Compression для WP
Здравствуйте, уважаемые гости WordPress-book.ru. Как известно, одним из факторов, влияющим на скорость загрузки страниц сайта, является объем html его страниц. Чем он меньше, тем лучше. Сократить html можно удалением лишних пробелов, переносов строк, отступов и т.д.
Тем самым, повторюсь, вы ускорите загрузку страниц проекта и, как следствие - приобретете небольшой приоритет при поисковом ранжировании.
Тем, кому есть куда стремиться в этом направлении, всеми известный сервис от гугла, расположенный по адресу https://developers.google.com/speed/pagespeed/insights/, так и говорит: "Сократите HTML".
Вручную проделать эту работу довольно трудоемко. Кроме того, код после сокращения будет похож на вязкую кашу и разобраться в ней, при необходимости правки, будет, мягко говоря, проблематично. Другое дело использовать какой-нибудь плагин, например WP-HTML-Compression.
После установки и активации, делать больше ничего не придется, он сократит ваш html "на лету" и как говорится в лучшем виде. Убедитесь в этом сами, посмотрите на исходный код любой страницы своего сайта до и после активации WP-HTML-Compression простым нажатием клавиши F12 или сочетанием клавиш «Ctrl + U» на клавиатуре. После деактивации, код вернется к своему первоначальному виду.
Скачать плагин можно перейдя по ссылке https://wordpress.org/plugins/wp-html-compression/.
И не волнуйтесь по поводу дополнительной нагрузки на сайт, ее не будет, проверено лично.
wordpress-book.ru
Минимизация HTML, CSS, JS-файлов на WordPress
Тема об улучшении скорости загрузки сайта поднималась неоднократно потому, что это очень важный аспект. Он оценивается как поисковиками, так и пользователями, о чем говорилось многократно. И чтобы добиться положительного результата придется немного потрудиться. В предыдущих статьях по данном материале речь шла о кэшировании WordPress, gzip сжатии и несколько полезных советов. Это все можно назвать «комплексным процессом». А сегодня поговорим еще об одном действие, которое также поможет оптимизировать скорость сайта.
Абсолютно любой сайт включает в себя дополнительные файлы такие как CSS, JavaScript, HTML. Все они изначально написаны с удобством для редактирования и понятным отображением. То есть отступы, комментарии, перенос строки и прочее. Но это важно только человеку. Так как браузер хорошо обрабатывает код и без всех этих пробелов. И даже было бы лучше убрать их и сократить весь код. Сейчас как раз этим и займемся.
Что такое минимизация?
Минимизация – это термин сокращения файлов путем удаления лишних символов, пробелов, условных комментарий. Которые по сути не являются значимыми для правильной визуализации веб-страницы. В ходе чего весь код образовывается лишь в одну строку. Тем самым ускоряет его загрузку.
Работает ли?
Вначале, перед тем как что-то начнем изменять, узнайте скорость вашего сайта, к примеру, в PageSpeed Insights. Чтобы потом сравнить результат до и после минимизации файлов.
Установка
Для платформы WordPress было создано немало специальных расширений (плагинов), позволяющих сократить файлы JS, HTML, CSS без особых затруднений. В принципе, это суть всех плагинов — упрощать вашу работу по оптимизации. Из всех мной практикующих плагинов я остановился лишь на одном: WP Minify Fix. Не потому, что остальные не справляются со своими обязанностями, а из-за большого количества настроек, которые попросту не посчитал необходимыми, во всяком случае для меня.
Первым делом скачиваем и устанавливаем плагин WP Minify Fix. Затем переходим на вкладку «Настройки- WP Minify Fix». Здесь всего одна страница параметров.
Первые две строчки – вкл/выкл копирайт (ссылка в футоре на плагин)
Дальше вкл минимизации JS, CSS, HTML файлов. Только включайте не все сразу, а по порядку и с каждым включением проверяйте сайт на его корректное отображение.
И последние два поля ввода – исключение не желаемых файлов в сокращении.
Чуть не забыл: в плагинах для кэширования имеется свой встроенный инструмент минимизации файлов (в большинстве).
Вот и все.
wordsmall.ru
Оптимизация сайта на WordPress для Google PageSpeed
Скорость загрузки сайта - это один из факторов ранжирования поисковых систем. И чем быстрее загружается сайт - тем лучше. Проверить, насколько быстр ваш сайт, можно с помощью сервиса Google PageSpeed Insights. Хорошая скорость загрузки - если сайт находится в зеленой зоне:
Как улучшить показатели скорости загрузки сайта в Google PageSpeed
Ошибка - "Используйте кеш браузера"
На некоторых хостингах возникает ошибка "Используйте кеш браузера". Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):
# BEGIN EXPIRES <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 10 days" ExpiresByType text/css "access plus 1 week" ExpiresByType text/plain "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 week" ExpiresByType application/x-icon "access plus 1 year" </IfModule> # END EXPIRES
Если у вас стоит Яндекс.Метрика, или Google Analytics - то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.
Ошибки - "Сократите HTML, Сократите CSS, Сократите JavaScript"
Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:
- Оптимизировать код HTML
- Оптимизировать код JavaScript
- Оптимизировать код CSS
Ошибка - "Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы"
Решается с помощью плагина Autoptimize. Для этого нужно поставить галочку в пункте Inline all CSS
Также эта проблема может возникнуть, если на сайте используются шрифты Google fonts. Подключать их нужно в footer.php в таком виде:
<link href="https://fonts.googleapis.com/css?family=Jim+Nightshade" rel="stylesheet">
Ошибка - "Оптимизируйте изображения"
Чтобы оптимизировать изображения, установите плагин WP Smush. Если неоптимизированные изображения находятся в папках темы, либо внутри плагинов - Google предлагает скачать оптимизированные изображения на странице проверки сайта PageSpeed. Ими нужно заменить "тяжелые" картинки.
Ошибка "Включите сжатие" и ошибка "Сократите время ответа сервера"
Чаще всего с ними помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию - "Сжимать файлы кэша чтобы ускорить работу"
inprocess.by
Как сократить CSS и ускорить загрузку сайта
Всем привет! Сегодня на seo-mayak.com мы продолжим выполнять рекомендации PageSpeed и разберем пункт «Сократите CSS», что позволит еще немного ускорить загрузку сайта.
После выхода статьи «Как включить gzip сжатие и кратно ускорить сайт» мне написал один мой читатель и посетовал на то, что он не может включить статическое gzip сжатие, так как его сайт еще находится в стадии становления и ему приходиться постоянно редактировать файлы.
В связи с этим хотел бы сказать несколько слов о том, когда или на какой стадии развития сайта стоит приступать к работе с рекомендациями PageSpeed, а также о последовательности выполнения тех или иных пунктов.
Наверно самое большое влияние на скорость загрузки сайте оказывают изображения. Если анализ PageSpeed определил в красную зону пункты «Оптимизируйте изображения», «Предоставьте изображения с нужными пропорциями» и «Укажите размеры изображений», то чем раньше Вы приступите к выполнению данных рекомендаций, тем меньше Вам впоследствии придется возится с картинками. Т.е. лучше заранее оптимизировать изображения и уже потом загружать их на сервер.
Также на любой стадии развития сайта можно приступать к работе над пунктом «Используйте кэш браузера». В одной из следующих статей я обязательно расскажу, как включить кэширование данных в браузере, конечно без использования каких-либо плагинов, так что подписывайтесь на обновления блога.
В общем, все что касается кеша и изображений, за исключением пункта «Объедините изображения в CSS-спрайты» можно начинать выполнять хоть с самого рождения проекта.
А такие рекомендации как: «Сократите CSS», «Сократите JavaScript», «Сократите HTML», «Включите gzip сжатие» (имеется в виду статическое gzip сжатие), «Встройте небольшие CSS», «Встройте небольшие ресурсы JavaScript», «Объедините изображения в CSS-спрайты» лучше выполнять на уже сформировавшихся ресурсах, так как в ходе работ придется сжимать, изменять содержание файлов, что затруднит последующие их редактирование.
Что касается мох познаний в сайтостроении, то я без особого труда могу разобраться: хоть в сжатых файлах, хоть не в сжатых, так что для опытных веб-мастеров это не большая проблема, что нельзя сказать про новичков.
Итак, если Вы закончили с дизайном сайта и его функционалом, то самое время приступить к сокращению объема файлов, которые подгружаются вместе с основным контентом, а это css-файлы, js-файлы и html-файлы, что позволит ускорить загрузку сайта.
Про сокращение js и html файлов мы поговорим в другой раз, а сейчас я расскажу, как сократить CSS. Поехали!
Технология удаления «мертвых» стилей
Прежде всего надо провести тщательную ревизию в файле style.css и выявить стили, которые не используются в шаблоне.
Но как определить какие стили используются, а какие нет? На самом деле сложного в этом ничего нет. Если у Вас нет свежей резервной копии файлов, то сделайте ее с помощью FTP клиента FileZilla.
Затем в редакторе Notepad++ открываем файл style.css, выделяем любой класс или идентификатор (выделать надо только слово, без точки или решетки) и во вкладке «Поиск» выбираем пункт «Найти в файлах»:
В открывшимся окне жмем на кнопку «…», как показано на скриншоте:
И в резервной копии фалов ищем папку с темой:
Далее жмем на кнопку «Найти все»:
После чего в редакторе появится дополнительное окно с результатами поиска:
В моем случаи результаты таковы. Notepad++ нашел только одно совпадение, которое находится в файле style.css.
О чем это говорит? А говорит это о том, что данный идентификатор не используется в шаблоне и все стили, прописанные для него, бесполезны и просто засоряют файл.
Поэтому смело удаляем данный идентификатор со всеми селекторами и их значениями:
Давайте рассмотрим другой пример. Я произвольно выбрал класс и результат поиска показал следующее:
Видно, что класс «homepage_post» используется в файлах шаблона, таких как: 404.php, archve.php, index.php, page.php, search.php и sindle.php.
Из этого следует, что данный класс и все стили прописанные для него, работают и удалять их не надо.
Если в файлах Вашей темы используются функции post_class() и body_class(), советую ознакомится с данным материалом, чтобы не удалить лишнего.Надеюсь понятно. Таким способом проверьте все классы и идентификаторы. Уверен, что вы обязательно найдете «мертвые стили», избавившись от которых, сократите код CSS. Работа конечно нудная, но проделать ее надо, если мы хотим ускорить загрузку сайта. Идем дальше.
Объединение файлов CSS
Теперь, когда мы избавились от «мертвых» стилей, можно приступать ко второму этапу сокращения CSS.
В некоторый шаблонах может использоваться несколько файлов стилей. Они могут по разному называться, но все они должны иметь расширение .css. Эти файлы также стоит проверить на «мертвые» стили.
Наша задача состоит в том, чтобы объединить все файлы стилей, в один файл. Это не сложно, просто скопируйте содержимое дополнительных файлов стилей и вставьте в самый конец основного файла -style.css.
После чего, дополнительные файлы стилей можно удалить. Также надо избавиться от кодов подключения удаленных файлов, которые находятся в header.php.
Важно! Будьте аккуратны при объединении файлов стилей! Всегда оставляйте возможность вернуть все на свои места, если что-то пойдет не так.
Обязательно делайте копии и чем больше будет резервных копий, тем лучше. Этим Вы избавите себя от лишних проблем. В любой случаи, если что будет непонятно, лучше спросите в комментариях и я постараюсь разъяснить тот или иной момент более подробно.
Но если Вы боитесь лезть в коды, то лучше этого не делать. Как говориться, страх плохой советчик. Значит Вы еще не готовы и лучше не торопится. Обучайтесь, набирайтесь опыту, вернутся к проведению данных работ никогда не поздно или в крайнем случаи обратитесь к человеку, у которого есть опыт и нет страха.
Как сократить CSS
Итак, мы имеем один файл style.css. Теперь на надо сократить его объем (не путать с сжатием файлов).
Технология сокращения CSS довольно простая. Надо убрать ненужные комментарии, пробелы, табуляции и пустые строки. Опять же пределы сокращения CSS могут быть разные. Все зависит от того, собираетесь ли Вы редактировать файл style.css в будущем.
Что касается меня, то я постоянно редактирую стили и уверен, что многие веб-мастера делают тоже самое. Сокращение CSS можно разделить на три вида: прогрессивное, умеренное и щадящие.
Прогрессивное сокращение CSS подразумевает размещение всех классов, идентификаторов и их селекторов в одной строке. Т,е, в файле style.css, после такого сокращения, останется только одна строка, но очень длинная.
Серверу будет требоваться гораздо меньше времени на подгрузку такого файла, но редактировать его будет весьма неудобно, хотя с помощью функции поиска в редакторе Notepad++ найти нужный класс или идентификатор не составит особого труда.
Для реализации прогрессивного сокращения можно воспользоваться сервисомcsscompressor.com. Копируем содержимое файла style.css и вставляем в поле на странице сервиса:
Выбираем наибольшее сжатие «Highest (no readability, smallest size)» и жмем на кнопку «Compress».
Мой подопытный css код имел исходный размер 10240 байт. После сокращения он похудел примерно на 43% и стал весить 6546 байт:
При щадящем сокращении CSS, на одной строке размещается класс или идентификатор, селекторы и их значения, а следующий класс прописывается уже с новой строки. Например:
Чтобы не заниматься нудной работой и вручную не удалять все пробелы табуляции и т.д, можно воспользоваться вышеописанным сервисом csscompressor.com, только перед сокращением, в настройках надо выбрать строчку «High (moderate readability, smaller size)»:
Также можно воспользоваться расширением PageSpeed для браузера Mozilla Firefox. Для этого, в результатах анализа выбираем пункт «Сократите CSS», жмем на стрелочку рядом с ним. Затем кликаем по ссылке «optimizet version»:
И PageSpeed предоставит нам щадящее сокращении CSS кода:
Останется только скопировать и вставить код в файл style.css.
Умеренное сокращение CSS — это вручную доработанное щадящие сокращение. Данный способ я использую сам. Заключается он в том, что в одну строку помещаются стили, отвечающие за определенный участок сайта, при этом я помечаю каждую строчку, соответствующим комментарием:
В общей сложности у меня получилось 38 строк, но при желании можно сделать еще меньше.
После реализации любого из вышеперечисленных способов, пункт «Сократить CSS» должен оказаться в зеленой зане, что конечно поможет ускорить загрузку сайта.
До встречи!
С уважением, Виталий Кириллов
« Оптимизация WordPress. Нагрузка на сервер и как ее снизить« PageSpeed — реальное ускорение сайта« Как включить gzip сжатие и кратно ускорить сайт« Как включить кэш браузера на стороне пользователя
seo-mayak.com
Советы по ускорению загрузки сайта Статьи и уроки создания сайта на WordPress
Янв132013
Время загрузки Вашего сайта является основным фактором, влияющим на юзабилити и поведение посетителя. Интернет пользователи ненавидят ждать загрузку медленных страниц, в то время как «мгновенные» страницы вызывают большее удовлетворение и доставляют больше удовольствия посетителю. Сегодня скорость интернет соединений становится все выше, и много Web-разработчики не задумываются над оптимизацией своих страниц для повышения их скорости, а ведь это очень важный фактор. В этой статье Вы получите фундаментальные советы по повышению скорости web-страниц и улучшению юзабилити ваших web-приложений.
1. Уменьшайте количество файлов
Уменьшение количества файлов на странице, приводит к уменьшению необходимых HTTP соединений для их загрузки, тем самым ускоряя этот процесс. Но как же это сделать? Можно использовать следующие техники:
Используйте CSS спрайты
Вместо того, чтобы использовать раздельные изображения для фона различных элементов, можно объединить их в одно и использовать технику CSS спрайтов для этого файла. Это заметно уменьшит количество загружаемых файлов и ускорит загрузку страницы.
Объединяйте CSS/JS файлы в один
Если вы используете множество CSS/JS файлов на своей странице, то их объединение можно значительно уменьшить количество запросов.
2. Уменьшайте размер файлов
Большие файлы совершенно очевидно требуют много времени для загрузки, потому с помощью определенных техник Вы можете уменьшить размер файлов.
Уменьшайте HTML файл
Используйте HTML-минификатор, например HTML Tidy, он уберет лишние пробелы и переносы строк.
Уменьшайте CSS/JS файлы
Использование инструментов вроде jscompress, css-compressor помогут уменьшить размер Ваших JavaScript/CSS файлов за счет их оптимизации, но сделают их совершенно не читаемыми. Поэтому стоит вести разные версии файлов, одну оптимизированную выгружать на сайт, а вторую, в читаемом виде, использовать для разработки.
Упаковывайте JavaScript
JS компрессоры, такие как Packer могут сжать Ваш JS код и довольно неплохо уменьшить его размер, за счет удаления комментариев, изменения форматирования, обускации и переименования переменных.
Оптимизируйте изображения для Web
Перед добавление изображений на страницу, оптимизируйте ее для Web. Если вы создаете изображение в графическом редакторе, таком как Photoshop, то используйте пункт «Сохранить изображение для Web» и выбирайте оптимальные настройки.
Так же Вы можете использовать инструменты, такие как Smush.it для оптимизации своих изображений.
3. Оптимизации серверной стороны
Кэшируйте динамические страницы
При использовании кэширования динамических страницы сервер отдает браузеру статические файлы, что занимает гораздо меньше времени, чем генерация страницы. Веб-серверы, такие как Apache оптимизированы для очень эффективного обслуживания статического контента. Если Вы пользуетесь WordPress, то для кэширования страниц Вам подойдет плагин WP-Super Cache.
Включите GZip
Большинство современных браузеров умеют работать с GZip, использование которого на стороне сервера позволяет уменьшить размер HTML, CSS/JS файлов до отправки их браузеру, за счет чего сокращается объем передаваемого трафика.
Используйте заголовки Expires для статического контента
Для контента который изменяется не часто, например, изображения, CSS, JS файлы, добавление заголовка Expires позволит использовать кэширование браузера. Установка Expires на дату в будущем позволяет заставить браузер не запрашивать ресурсы повторно, а брать их из кэша.С помощью следующего кода можно установить заголовки Expires в Apache используя файл .htaccess:
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$"> Header set Expires "Thu, 31 Dec 2013 12:00:00 GMT" Header unset ETag FileETag None </FilesMatch>Использование заголовков Expires для статического контента существенно улучшит опыт пользователей вернувшихся на Ваш сайт, т.к. весь статический контент будет обслужен локальным кэшем браузера.
Используйте косую черту в URLах
Этот метод мало известен, однако известно что он увеличивает производительность. Всегда добавляйте косую черту (/) в конце адресов гиперссылок. Это уменьшит накладные расходы сервера при необходимости 301 HTTP Redirect, т.е. при перенаправлении на адрес с косой чертой в конце, если Вы заходили по адресу без нее.
Избавьтесь от ошибок 404
404 ошибка (Страница не найдена) приводит к накладным расходам как на стороне сервера, так и в браузере. Проверьте серверные логи или найдите битые ссылки и исправьте их.
Всегда используйте favicon.ico
Большинство браузеров пытаются найти favicon.ico для домена, чтобы добавить маленькую иконку сайта, вне зависимости от того указана ли она в html. Если вы не хотите использовать favicon.ico, то просто разместите прозрачную иконку в корень своего сайта, и браузер не будет получать 404 ошибку при попытке ее открыть.
4. Оптимизация HTML
Другой хороший способ улучшить скорость Вашего сайта, это оптимизация html Вашей страницы таким образом, чтобы она выводилась на экран так быстро, на сколько это возможно, улучшая восприятие посетителем Вашего сайта. Далее мы рассмотрим несколько советов по HTML оптимизации ускоряющих рендер.
Загружайте таблицы стилей в верху страницы
Всегда размещайте таблицы стилей в верхней части Вашей страницы, в теге <head> , это сделает загрузку страницы постепенной. По мере получения браузером HTML контента, он будет выводить его применя к нему CSS стили.
Размещайте JavaScript в низу страницы
Когда браузер встречает JavaScript файл, он начинает загружать его и останавливает загрузку других ресурсов. Поэтому вы должны стараться размещать весь JS код в конце страницы, за исключением важных функций, необходимых для корректного вывода страницы.
Избегайте использования @import
Если вы используете @import для внешних таблиц стилей, то прекратите это делать, т.к. @import может приводить к последовательной загрузке таблиц стилей, вместо параллельной, а при большом количестве подключений таблиц порядок их загрузки также может измениться. Всегда используйте <link> для подключения таблиц стилей.
Избегайте CSS выражений
CSS выражения иногда могут быть полезными, но они крайне не эффективно выполняются в браузерах. Браузеры вычисляют CSS выражения при загрузке страницы, при ее прокрутке и вообще при каждом движении мыши. Одно CSS выражение на странице будет вычисляться тысячи раз в браузере. Вы можете проверить это, используя счетчик, внутри выражения.
Указывайте высоту и ширину изображений
Всегда указывайте высоту и ширину для тэга img, так браузер сможет узнать о размерах изображения еще до их загрузки с сервера. В ином случае, браузер узнает о размере изображения только после полной его загрузки.
Избегайте масштабирования изображений в браузере
Если вы используете свойства ширины и высоты тэга img для отображения большого изображения как небольшого, Вы вынуждаете браузер делать дополнительную работу для вывода страницы. Лучше использовать миниатюру изображения со ссылкой.
Очевидно, что оба последних совета не применимы в случае использования адаптивности.
Выделяйте JS/CSS код во внешние файлы.
Старайтесь выделять весь JS/CSS код во внешние файлы, вместо того, чтобы размещать его прямо в HTML. Браузеры умеют кэшировать JS/CSS файлы, что будет полезно при возвращении посетителя.
5. Прочие оптимизации
Кроме техник о которых было сказано выше, существуют и другие способы ускорить загрузку страницы.
Сокращайте DNS запросы
Браузеру для разрешения доменного адреса в IP-адрес требует примерно 20-120 милисекунд для каждого нового адреса. Поэтому, если вы используете ресурсы на множестве доменов, например, изображения, скрипты и т.п. то старайтесь перенести их на свой сайт, это уменьшит число DNS запросов.
Используйте несколько доменов для статического контента
Как известно у браузеров существует ограничение на количество одновременно принимаемых файлов с одного домена, поэтому использование поддоменов поможет распараллелить загрузку Вашей страницы. Например если Ваш сайт называется мойсайт.рф, то статичный контент может отдаваться например с доменов стат1.мойсайт.рф и стат2.мойсайт.рф. Это не приведет к увеличению числа DNS запросов, поскольку запрос для мойсайт.рф уже выполнен.
Используйте домены без cookies для статического контента
Если Ваш сайт использует куки, как это делает большинство сайтов сегодня, то Вы должны знать, для каждого запроса к серверу, вместе с запросом отправляются и куки. Это просто накладные расходы для статического контента вроде JS/CSS/изображений. Раздавайте статический контент с доменов без куки, чтобы избежать этого. Многие крупные сайты пользуются этой техникой, например Yahoo использует yimg.com для обслуживания статического контента. YouTube использует ytimg.com для статики.
Используйте сети доставки контента
Использование CDN существенно улучшает опыт посетителя Вашей страницы, поскольку контент загружается с ближайшего к нему сервера. Это уменьшает сетевые задержки, если сервер расположен далеко, а также распределяет нагрузку между несколькими серверами. CDN обладает высокой эффективностью, и такой же высокой ценой, что делает их доступными только для очень больших сайтов.
Используйте оптимизационные инструменты
Используйте инструменты вроде PingDom, Firebug, Y Slow, Google PageSpeed для проверки своего сайта. Они будут очень полезны для Вас, т.к. покажут время загрузки Вашего сайта и покажут проблемные области с советами по их устранению, все это поможет сделать Ваш сайт «мгновенным». Если у Вас возникли вопросы — то задавайте их в комментариях.
Похожие записи
Немного об авторе: Сергей Белянин
Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)
belyan.in
