Как реально увеличить скорость загрузки сайта | Заметки вебмастера






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

увеличить скорость загрузки сайтаПриветствую, постоянные читатели моего блога! Рад вас видеть!

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

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

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

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

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

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

Итак, начнем действовать.

Реальное ускорение WordPress

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

Если вы читали мою прошлую статью про проверку и увеличение скорости загрузки страниц блога, то знаете, что для определения скорости я пользовался вот этим сервисом-

 http://mainspy.ru/skorost_zagruzki_sajta

Теперь хочу вам порекомендовать еще один, который даже намного лучше предыдущего:

 https://developers.google.com/speed/pagespeed/insights/

Проверьте скорость загрузки своего сайта. Какая она? Для того чтобы это узнать, введите доменное имя своего блога в специальное поле и нажмите кнопку «Анализировать». Вот какой результат показывает сейчас этот сервис при проверке скорости загрузки главной страницы:

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

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

А какая у вас скорость загрузки главной? Норм или жесть? Если второе, то читайте дальше, и я расскажу, как можно все исправить.

Хочу отметить, что до того момента как я применил все способы, которые я опишу дальше в этой статье, скорость загрузки моего блога была такой:

скорость загрузки сайта перед улучшениями

Разница заметна, не так ли? Итак, настало время выполнить все необходимые действия, которые позволят увеличить скорость загрузки сайта.

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

  • Редактирование файла header.php

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

Однако в этом файле прописаны также совершенно ненужные или лишние запросы к базе. Без них вполне реально можно обойтись. Чем меньше будет различных запросов к СУБД, тем меньше будет нагрузка на хостинг, а следовательно, выше скорость загрузки страниц блога.

Ладно, лучше давайте расскажу подробнее, чтобы вы поняли.

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

На изначально пустом веб-бланке, начинают сформировываться все необходимые элементы данной веб-страницы из которой она состоит: заголовки H1-H6, контент (текст, изображения), формы подписки, баннеры, контекстная реклама и т.д. Однако перед загрузкой всех этих элементов файл header.php сначала обращается к базе данных.

Этот файл делает запрос к БД о и как бы узнает, что необходимо загружать в настоящий момент для пользователя с целью предоставления необходимой информации. После этого БД сформировывает свой запрос и посылает его в качестве готового ответа файлу header.php. Только после этих действий искомая веб-страница постепенно загружается вместе со всеми элементами, которые на ней должны присутствовать.

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

код в header.php

Можете посмотреть. Я специально для вас обозначил несколько запросов, без использования которых блог будет себя чувствовать отлично. К примеру, файл header.php высылает запрос БД (номер 1) «какую кодировку использовать для корректного отображения блога?» БД дает ответ — в кодировке UTF-8. Отлично!

Например, если посмотреть исходный код этой веб-страницы вашего блога, (с помощью сочетания клавиш «Ctrl+U») и посмотреть на него, то мы увидим следующее:

исходный код файла header.php

Видите,- запрос уже сформирован! Это говорит о том, что можно его с легкостью удалить. Для этой цели необходимо заменить этот запрос, который прописан в header.php:

 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

на другой уже сформированный код с готовым ответом:

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

После этих несложных манипуляций браузер будет считывать файл header.php и наблюдать на месте старого запроса сформированный готовый ответ.

Действуем дальше. Итак, теперь запрос номер 2. В этом случае файл обращается к БД и требует от нее адрес расположения иконки фавикона для вашего блога. Действуем по аналогии. А именно заменяем запрос в файле header.php:

 <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />

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

 <link rel="shortcut icon" href="http://saranchinsergey.ru/wp-content/uploads/2012/07/serg.png"/>

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

Кстати, хочу вам показать еще один бесполезный ненужный код в файле header.php (номер 4 на скриншоте):

 <meta NAME="generator" content="WordPress <?php bloginfo('version'); ?>" />

Он информирует о том, какая версия системы WordPress установлена на данный момент на вашем ресурсе. Данный код очень поможет различного рода злоумышленникам взломать вашу систему. Поэтому от него нужно поскорее избавиться. Он вам не нужен. Версия системы и так прописана в административной панели. Так что просто удалите это код и спите спокойно.

Я показал вам только три примера. На самом деле может быть ещё несколько запросов, которые необходимо будет заменить на готовые ответы. Отлично! Пойдем далее.

  • Перенос скриптов из header.php в footer.php

Так как header.php загружается в первую очередь, то необходимо, насколько это возможно, добиться того, чтобы он подгружался быстрее.

В том случае, если на вашем блоге имеются всевозможные коды (скрипты) типа <script> ( по правде говоря они есть на каждом ресурсе), то их перенос из header.php в footer.php увеличит скорость загрузки. Footer.php это файл, который отвечает за вывод нижней части вашего блога на WordPress. Он загружается в самый последний момент.

При таком раскладе первоначально будет загружаться основная часть веб-страниц, а затем остальные малозначимые элементы. Этот подход реально повлияет на увеличение скорости загрузки страниц блога.

В том случае, если после переноса того или иного скрипта блога пропадет какая-то часть элементов контента (не будет отображаться), то просто перенесите этот скрипт не в footer.php а в самый конец файла header.php, перед открывающим тегом <body>.

  • Использование кэширования в браузере на стороне пользователя

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

Для большего понимания процесса расскажу об этом поподробнее.

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

На ней, кроме свежей информации, расположены такие же элементы, как и на предыдущей странице (шапка сайта, боковая панель, подвал).

Как видите, эти элементы повторяются. И когда вы переходите на другую страницу, они опять загружаются с сервера, а это в свою очередь негативным образом сказывается на скорости загрузки сайта. Но хочу сказать, что эту проблему можно легко решить. Необходимо просто добавить в файл .htaccess вот такой код:

 FileETag MTime Size
 <ifmodule mod_expires.c>
 <filesmatch ".(gif|jpeg|jpg|png|ico|css|js)$">
 ExpiresActive on
 ExpiresDefault "access plus 1 year"
 </filesmatch>
 </ifmodule>
 <IfModule mod_setenvif.c>
 BrowserMatch "MSIE" force-no-vary
 BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
 </IfModule>

.htaccess, для тех, кто не знает, расположен в корневой папке блога. Если по какой то причине у вас нет этого файла, то обязательно его создайте.

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

Если пользователь перейдет на другую страницу, то контент будет грузиться с сервера вебмастера, а вот повторяющиеся элементы (шапка, футер или сайдбар) уже из кеша браузера пользователя.

Вот такой классный код, который будет здорово вам помогать.

  • Установка плагина Hyper Cache

В обязательном порядке я вам рекомендую установить плагин кэширования Hyper Cache на свой блог . Его главная функция — кэширование страниц вашего веб-ресурса. Как он это осуществляет? Ничего сложного. Этот плагин создает на вашем веб-ресурсе свою папку, в которую перемещает заранее сгенерированные копии веб-страниц блога.

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

Ну что ж, отлично! Если вы выполнили все мои рекомендации на практике, можете проверить еще раз скорость загрузки вашего блога. Мне кажется, вы увидите совсем другую картину.

Я прав? Какая скорость загрузки у вас стала после внедрения методов, описанных в этой статье? Жду ваших ответов в комментариях. Надеюсь, данная статья была вам полезна.

На последок хочу ещё раз подтвердить всё вышесказанное мной. Предоставляю Вам скриншот статистики Alexa Rank. Посмотрите на скорость загрузки моего блога сегодня:

скорость загрузки сайта по Alexa Rank

На этом все. Желаю успеха в применении на практике моей информации. До скорой встречи, ребята!

Успехов Вам и Удачи
С Уважением,


Книга о заработке в интернете:
Книга о заработке в интернете

Комментариев к статье: 46

  1. Игорь Черноморец:

    Привет Сергей! А какая разница между кодом для кеширования и самим плагином кеширования?

    Ответить

    • Сергей Саранчин:

      Привет, Игорь! Рад видеть!
      Основная разница в принципе работы этих способов для увеличения скорости загрузки сайта (в статье этот факт фигурирует).
      Еще одно существенное различие заключается в том, что использование кэширования на стороне пользователя существенно эффективней, так как действует с использованием браузера пользователя, но к сожалению не сможет охватить весь спектр файлов блога для реализации функции кэширования…
      Плагин же наоборот, позволяет это сделать, но его минус заключается в задержке во времени между сервером и пользователем.
      Выражаясь простым языком эти два способа дополняют друг друга :smile:

      Ответить

      • Игорь Черноморец:

        Сергей, ты сейчас ответил как какой-то профессор филологических наук :roll: Представляю себе, если бы я услышал такой ответ в первый день ведения блога…я бы обалдел :smile:
        Я шучу,шучу! Круто ты объяснил, сейчас мне все понятно,но…
        Я вставил код кеша в файл .htaccess а гугл мне продолжает выдовать предупреждение, что нужно установить кеш браузера!
        В интернете я вычитал, что не всем этот код помогает. Есть у тебя еще идеи, как исправить ситуацию

        Ответить

        • Игорь Черноморец:

          Кстати, снйча я обратил внимание на твой скрин, так у тебя тоже Гугл советует использовать кеш браузера!!! Ты видел? Значит этот код и тебе не принес существенных изменений в плане кеширования?

          Ответить

          • Сергей Саранчин:

            Принёс, только он не все файлы прокэшировал, один оставил с расширением .psd :shock:

            Ответить

        • Alexandr:

          Разница в том, как если бы в ресторане Вы за заказ платили или за вас.

          Ответить

        • Alexandr:

          Игорь, всё просто. Разработчики сайтов для снижения нагрузки на сайт и сервер хотят нагрузку переложить на пользователя.

          Ответить

          • Юлия Иванова:

            Это делается для удобства пользователя.

            Ответить

      • Виталий Охрименко:

        установил и код и плагин, но гугль все-равно матюкается что нужно сделать кеширование…раньше плагин по кешированию css стоял, но к сожалению я его грохнул и не помню как называется. По факту он увеличивал скорость загрузки страницы вдвое, но при этом вес страницы так же увеличивался вдвое. Посчитал его ненужным и бахнул наглухо, а после проверки гуглом увидел вдруг ма ы в сторону кеширования. Ничего не можете сказать по этому поводу?

        Ответить

        • Сергей Саранчин:

          А какая сейчас скорость загрузки страниц блога, Виталий, по developers.google?
          Подробности смотрели, какие именно файлы не кэширует плагин Hyper Cache?

          Ответить

  2. Сергей Саранчин:

    Игорь, кликни на ссылку «Как исправить» и посмотри, какие файлы не может кэшировать данный код :oops:

    Ответить

    • Игорь Черноморец:

      Серёга, я кликнул и у меня высветилось более 100 файлов :o :!:
      И ещё…все коды, которые ты показал в статье файла header.php у меня прописаны правильно, а некоторых совсем нет, как например favicon и версия wordpress

      Получается, что мне ничего не помогло! Скорость как была 69 так и осталась!

      Ответить

      • Сергей Саранчин:

        100 на главной странице??? :shock: Ни чего себе…
        Ну насчёт header.php это понятное дело… шаблоны просто разные.
        Если ты установил мой код для кэширования, то нужно подождать определённое время. Он не сразу показывает результаты… :grin:

        Ответить

        • Игорь Черноморец:

          Хорошо Сергей, подожду немного.Позже отпишусь

          Ответить

          • Сергей Саранчин:

            Окей, буду ждать результатов :cry:

            Ответить

          • Игорь Черноморец:

            Результат отрицательный :!:
            Нет никаких изменений, или подождать еще?
            Может быть этот код каким-то образом конфликтует с моим плагином кеширования? И поэтому он никак не влияет на кеш браузера со стороны посетителя?

            Ответить

          • Сергей Саранчин:

            Хм, возможно и получается конфликт. Может почитать информацию на форумах для вебмастеров по этому поводу и подобрать «свой» код :grin:

            Ответить

          • Игорь Черноморец:

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

            Ответить

          • Сергей Саранчин:

            А что за проблемы были с кэшом? :shock:

            Ответить

          • Alexandr:

            Интересно, что для некоторых случаев рекомендуют полностью кэширование отключить, но мне никогда не удавалось это сделать.

            Ответить

  3. Alexandr:

    Судя по активности Игоря, он свой расчёт юбилейного коментария сделал. Я делал расчёт на Вашей информации Сергей.

    Ответить

    • Сергей Саранчин:

      Думаете он рассчитывает количество комментариев? :smile:

      Ответить

      • Alexandr:

        Конечно думаю. Каждый считает и высчитывает его. Это нормально, непредосудительно. Каждый хочет выйграть.

        Ответить

      • Aleksandr:

        Я сомневаюсь что кто-то считает сколько он комментариев написал!

        Ответить

        • Alexandr:

          Я считаю и не вижу ничего зазорного в этом. Сейчас уже не считаю. Один раз выйграл и нормально.

          Ответить

    • Игорь Черноморец:

      Ой ой ой ой ой ой Александр, ну зачем же так думать :o
      Во-первых, у меня нет ни малейшего представления, сколько комментариев осталрсь до юбилейного. Я не веду никакой расчет!
      Во-вторых, обрати внимание на комментарии к этой статьи…здесь нет никакой философии и размышлений, а конкретно вопросы и ответы, то есть происходит реальный диалог!
      Втретьих,я уже читаю и комментирую блог Сергея, как минимум 5 месяцев и выигрывал в конкурсах только один раз. То есть, за все это время никогда не пытался набить количество комментариев из-за вознаграждения!
      В-четвертых, пройдись по всем статьям Сергея и убедись в том, что я даже не на каждую статью комментирую, а только на те, в которых у меня есть что сказать или добавить.
      В-пятых, за более года ведении блога, у меня никогда, никогда не было обсессии выигрывать в подобных конкурсах и я комментировал исключительно на тех блогах, которые меня вдохновляли и в которых я находил действительно качественную информацию. Один из таких блогов это блог Сергея!
      Так что…вот такие вот пироги :)

      Ответить

      • Alexandr:

        Игорь у меня приятель часто говорит такие вот пироги))) Я бы на месте Сергея дал бы Вам Игорь приз за самого подробного коментатора.

        Ответить

  4. Alexandr:

    Сергей, что такое pingback под цифрой три в первой фотографии кода? Вы меняете его на xmlrpc.php. Что такое xmlrpc? В обоих файлай php, шило на мыло меняете?

    Ответить

    • Сергей Саранчин:

      xmlrpc это протокол вызова удалённых процедур, использующий xml для передачи информации с применением кодирования.
      Я так полагаю основная функция данного кода передача информации сторонним ресурсам (пинг сервисам) о появлении свежей информации на сайте или блоге.
      В данном случае я не меняю «шило на мыло», поскольку заменяю запрос к базе данных готовым ответом, что снижает нагрузку на сервер и, следовательно увеличивает скорость загрузки сайта :oops:

      Ответить

      • Alexandr:

        Это равноценная замена pingbackа на xmlrpc? Вы рекомендовали подключать пинг сервисы.
        Если xmlrpc вызывает удалённые процедуры чем это отличается от процедуры pingback url? В обоих случаях обращение к серверу. Или нет?

        Ответить

        • Сергей Саранчин:

          Я бы сказал, что это не замена, а дополнение pingback, так как я прописал несколько сервисов обновлений в настройках WordPress.
          Да, идёт обращение, но только к одному серверу, а не к двум (мой сервер заменён уже сформированным ответом базы данных) :smile:

          Ответить

          • Alexandr:

            Понятно, На одно обращение меньше станет.

            Ответить

  5. Alexandr:

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

    Ответить

  6. Alexandr:

    У Вас в коде используется краткая запись php. Пишут что это может вызывать конфликты с xml.

    Ответить

    • Сергей Саранчин:

      Не слышал об этом факте. Нужно будет почитать подробнее о нём… :smile:

      Ответить

  7. Alexandr:

    Какая граница в секундах между быстрой загрузкой и медленной загрузкой? И кто так постановил.

    Ответить

    • Сергей Саранчин:

      В данном случает так решил Google. Это же его сервис по проверки скорости загрузки страниц сайта…

      Ответить

  8. Alexandr:

    У вас в коде для .htaccess есть ifmodule mod_expires.c. А если модуль mod_expires.c на сервере не подключён? Может такое быть?

    Ответить

    • Сергей Саранчин:

      Так и у меня не подключён был изначально. Мы его с помощью этого кода подключаем

      Ответить

      • Alexandr:

        Сейчас понял. Я думал что ifmodule команда условия — если есть модуль.А на самом деле это команда подключения.

        Ответить

  9. Alexandr:

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

    Ответить

  10. Bogutskiy:

    Ну у меня 70/81 на блоге)) Не самый худший результат)

    Ответить

    • Сергей Саранчин:

      Согласен, довольно таки неплохо! :smile:

      Ответить

  11. Виталий Охрименко:

    Попробую сделать все что Вы советуете в статье и отпишусь потом о результатах

    Ответить

    • Сергей Саранчин:

      Ок, Виталий! Ждем известий!

      Ответить

      • Виталий Охрименко:

        Я подумал что буду это все делать после того как шаблон сменю. Жалко тратить время на настройку этого шаблона, а потом поменять его на новый. Так что пока побуду с малой скоростью загрузки

        Ответить


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

Нажимая кнопку "ОТПРАВИТЬ" комментарий, Вы принимаете пользовательское соглашение и подтверждаете, что ознакомлены и согласны с политикой конфиденциальности этого сайта.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: