SEO продвижение        23 декабря 2017        1089         10

Как увеличить скорость загрузки сайта

Ускорить загрузку сайта

ускоренная загрузка сайта

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

Считается, что, если сайт грузится более 3 секунд, то пользователи гаджетов не будут дожидаться полной загрузки страницы, а просто покинут ее, тем самым дадут сигнал для поисковых систем, что этот сайт не интересен пользователям, со всеми вытекающими последствиями. В этом обзоре мы поговорим об увеличении скорости загрузки сайта. Рассмотрим основные моменты (элементы) страницы, которые требуют особой оптимизации. Более подробную инструкцию с детальным описанием и примера читайте в статье: Как я увеличивал скорость загрузки своего сайта

Сначала зададим себе вопрос, что будет быстрее грузиться: большой файл или маленький? Даже не опытные пользователи с первого раза ответят, что время на загрузку маленького файла уходит меньше. Поэтому, будет учиться сжимать все, что сжимается, а именно:

  1. CSS-файлы, они же файлы стилей. Это то, без чего ваша страница будет выглядеть пустым набором текста. Они же отвечают и за верстку (макет) страницы.
  2. Картинки. Если из изображения выкинуть все системную информацию, то ее размер может значительно уменьшиться.
  3. Java-скрипты.
  4. HTML код.

По-порядку рассмотрим каждый пункт.

Сжатие CSS

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

Для онлайн-сжатия можно воспользоваться сервисом CSS Optimizer. Его достоинства в том, что, используя настройки по умолчанию, можно получить неплохие результаты сжатия и простоту использования. Вам достаточно вставить ваш код из файла css в форму, указать адрес сайта и нажать кнопку «Process CSS». В результате, вы получите сжатый код, который можно скопировать и вставить в новый файл стилей и пользоваться. Сжатие доходит до 90% и выше. Кроме этого, этот сервис проверяет на валидность ваш исходный код, и, если есть в нем ошибки, то он быстро укажет на них.

pic1

Уменьшаем размер изображений

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

Ужимаем JAVA

Если вы не специалист в написании скриптов на Яве, то рекомендуется сокращать готовые скрипты специализированными онлайн-сервисами. Я отношусь именно к таким пользователям.

Используем консольную программу YUI компрессор. Запускаем ее и прописываем такую команду:

java -jar yuicompressor-x.y.z.jar myfile.js -0 myfile-min.js

где:

myfile.js — файл, над которым мы будем работать;

myfile-min.js — полученный файл.

Но, можно и обойтись без этого. Дело в том, что браузер загружает страницы сверху вниз, поэтапно. Если на пути рендеринга встречается запрос на подгрузку Ява-скрипта, то, прорисовка останавливается, пока он не будет загружен. В этом случае, нужно или снижать размер самого файла, чтобы он быстрее загрузился или установить ему асинхронную загрузку при помощи «async». В последнем случае, отображение странички не будет приостанавливаться, она будет асинхронно грузиться вместе с Явой, тем самым, увеличится общая скорость загрузки сайта.

Оптимизация HTML

Здесь тоже предлагается масса онлайн-сервисов по сжатию ХТМЛ. Но, будьте осторожны. Как и в случае с CSS конечный код может перестать работать. Желательно руками удалить все лишнее. По правде говоря, большого прироста это не даст, но попробовать можно.

 

 

AMS Партнёр

Включаем сжатие на стороне сервера

Следующим шагом для увеличения скорости загрузки сайта – это включение сжатия gzip или zlib на сервере. Все зависит от того, какой модуль установлен на серваке вашего хостера.

Сначала проверим, что установлено на хостинге. Для этого создаем .php файл и в него прописываем такой код:

<?php phpinfo(); ?>

Помещаем этот файлик в корневой каталог, где находится ваш сайт на сервере и запускаем его: http://сайт/файл.php

Для включения будем редактировать файл .htaccess. Если реализовано сжатие по средствам gzip, то добавляем в htaccess команды:

pic4

Мы указываем серверу, что нужно ужимать html, txt, css, js, php, png и все файлы текстовых, графических типов и скрипты.

Включаем кэш браузера

Нужно его включить, чтобы пользователь, при повторном посещении страницы, не загружал вновь ее элементы, которые не изменились. Это полезно сделать для всей статики (CSS, HTML, картинок, java). Сделать это можно в настройках htaccess.

  1. Проверяем, какой модуль поддерживает хостинг. В природе существует их два: mod_expires и mod_headers. Принцип работы у них схожий. Они устанавливают срок хранения файлов в кэше браузера.
  2. Прописываем срок для каждого типа файлов (в секундах, в днях, неделях, месяцах)

Настройка модуля mod_expires:

pic5

Во всех случаях работы с htaccess нужно проверять подключения того или иного модуля командой проверки <IfModule mod_expires.c>. Если этого не сделать, то сайт загружаться не будет.

Кроме этого, рекомендуется воспользоваться CDN сервисами, где также можно настроить кэширование этих файлов. Используя такой подход, вы не только включите кэш, но и обезопасите себя от DDOS атак, и ваш сайт постоянно будет доступен даже при проблемах с сервером у хостинг-компании (его копия будет храниться на CDN-серверах).

Удалить блокирующие элементы

Это те элементы, которые блокируют прорисовку верхней части страницы. Как говорилось выше, браузер считывает код сверху вниз и, встречая команду на загрузку внешнего файла (CSS, скрипты), он останавливается и ждет, когда она выполниться. Именно эти команды и нужно постараться удалить из верхней части страницы. Про асинхронную загрузку Явы я рассказывал выше, то же самое нужно сделать и с файлами стилей. Но, в этом, случае «async» не поддерживается, поэтому, нужно использовать способ асинхронной загрузки CSS при помощи специального скрипта. Его реализация также описана по ссылке в начале обзора.

Кроме этого, для каждого обговоренного пункта существуют свои нюансы, которые нужно учитывать и в результате вы получите ощутимое увеличение скорости загрузки сайта. Мне удалось достигнуть 1,7-2 секунды. Но, если доводить до такого «фанатизма» как я, то можно потерять часть функционала сайта. Конечно, это все индивидуально, в моем случае отказался работать скрипт кнопок социальных сетей для мобильных устройств. Поэтому, я был вынужден пожертвовать некоторым временем загрузки в пользу работоспособности этих кнопок.

Так что решайте сами, пробуйте, а практические советы и примеры читайте по ссылке в шапке этой статьи. Всем удачи!!!

Если будут вопросы, то, задавайте их в комментариях.

С уважением Владимир Крамаров        24.12.2017 г.

 

 

НЕ ЖАДНИЧАЙ, ПОДЕЛИСЬ СТАТЬЁЙ С ДРУЗЬЯМИ В СОЦИАЛЕ!

ДОБАВЬТЕ КОММЕНТАРИЙ, ПОЛУЧИТЕ ОБРАТНЫЙ НА СВОЙ САЙТ!

Обсуждение: 10 комментариев
  1. Блог Александра Гаврина:

    Андрей, странно в статье в конце подпись стоит «С уважением Владимир Крамаров » ????

    Ответить
    1. Андрей Зимин:

      Добрый день, Саша. В начале статьи стоит надпись, статью написал вебмастер Владимир Крамаров. Это гостевой пост!

      Ответить
      1. Блог Александра Гаврина:

        Да, точно сразу не заметил=)) перешел к самой сути статьи=)) ;-)

        Ответить
  2. Александр:

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

    Ответить
    1. Андрей Зимин:

      Добрый день, Александр. Действительно, скорость загрузки сайта очень важна для посещаемости! :)

      Ответить
  3. Кирилл:

    Спасибо за дельные рекомендации! Возьму на вооружение.

    Ответить
    1. Андрей Зимин:

      Добрый день, Кирилл. Я думаю, вам пригодятся эти советы! ;)

      Ответить
  4. Михаил:

    Могу посоветовать WSR . Подключение через DNS, поэтому мудрить с кодом не нужно. Огромный плюс — помимо статики, кешируют и динамику, за счет чего многократно снижается нагрузка.

    Ответить
    1. Андрей Зимин:

      Спасибо, учту ваши советы!

      Ответить
  5. Marina Zemina:

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

    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
https://info-kibersant.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Поиск Нужных Статей По Сайту:
Моя Группа в (Facebook) — Присоединяйтесь!

Моя Сестра По Этому Методу Выучила Английский За Пол Года!

Обучение Английскому

Здесь я себе и выбрал компьютер!

БУДЬ ВСЕГДА ПЕРВЫМ!

Первый сайт

Создание Качественных Сайтов и Уникальных Статей!
Популярные Программы Рунета