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


Автор: Харис Басич (Haris Bacic) – руководитель отдела дизайна и разработки в агентстве поискового маркетинга AdFicient.

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

1. Кэширующие плагины для WordPress

Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.

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

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


Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании.

Есть ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче установить.

2. Подключение к сети доставки контента

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

CDN – это крупная сеть серверов, распределённых по всему миру, способная кэшировать файлы вашего сайта, а затем отправлять эти файлы с ближайшего к вашим пользователям сервера. Таким образом, в идеальной ситуации пользователь в Нью-Йорке  загрузит файлы сайта с северо-востока Соединенных Штатов, а не западного побережья или Европы.

Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.

Чтобы настроить CDN, например CloudFlare, выполните следующие действия:

  1. Зарегистрируйте аккаунт.
  2. Добавьте в него свой сайт.
  3. Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки.
  4. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare.
  5. При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта.

3. Оптимизация изображений

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

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

Один из самых удобных сайтов для конвертации JPG-изображений в PNG – Tiny PNG. Как видно на скриншоте ниже, с его помощью нам удалось уменьшить размер тестового изображения с 9,8  до 4,8 Кб.

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

Далее можно оптимизировать изображения, используя более новый стандарт WebP. Однако на сегодняшний день этот стандарт поддерживают не все браузеры (только Google Chrome, Android и Opera), поэтому при его применении обязательно нужно использовать резервные методы для корректной загрузки изображений в других браузерах.

4. Объединение и удаление файлов Javascript

Для выполнения этой задачи нужно иметь представление о JavaScript, в противном случае можно нарушить эту функциональность на сайте.

Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.


Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.

Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress.

Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt или Gulp для автоматизации процесса минимизации JavaScript. Существует также модуль Apache, который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.

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

При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird или Async JavaScript, которые позволяют легко добавить атрибуты async или defer к JavaScript-файлам.

5. Объединение и минимизация CSS-файлов

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


Для пользователей CloudFlare функция минимизации CSS расположена в том же разделе Speed. Вы также можете включить минимизацию HTML.

Как и в случае с JavaScript, продвинутые пользователи могут использовать Grunt или Gulp для минимизации кода CSS на своём сервере. Существует также модуль Apache, называемый mod_ext_filter, который может быть настроен для автоматической минимизации файлов CSS, однако, поскольку они не будут кэшироваться как статические файлы, это не является предпочтительным способом минимизации.

Чтобы вручную минимизировать CSS, можно использовать специальные онлайн-инструменты. Например, Minifier.

6. Загрузка динамических частей через AJAX

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

Например, на сайте PriceListo те страницы, на которых находятся счётчики репостов в социальных сетях, могли бы загружаться медленно, поскольку сайту нужно связываться с серверами Facebook и Twitter для правильного расчёта общего числа репостов.

Чтобы не замедлять загрузку страницы в целом, на данном сайте эта часть кода вызывается через AJAX. Это позволяет главной странице полностью загружаться, пока счётчик репостов обновляется в фоновом режиме и, вероятно, сохранять его в своей базе данных для ещё более быстрого обновления при последующих загрузках.


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

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

7. Использование браузерного кэширования

Браузерное кэширование – это способность браузера сохранять локально ресурсы, такие как изображения, файлы JavaScript и файлы CSS, чтобы их не нужно было загружать каждый раз. Хотя использование этой функции влияет в основном на повторных посетителей, это по-прежнему важный шаг для ускорения сайта.

В CloudFlare этот параметр можно настроить, перейдя на вкладку Caching и выбрав подходящий вариант срока хранения данных в кэше – Browser Cache Expiration. Если ваши файлы обновляются нечасто, вы можете выбрать более длительный срок, например 8-16 дней. Если файлы обновляются чаще, то нужно выбрать меньший период.

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


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

8. Использование алгоритма сжатия Gzip

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

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

Если вы используете CloudFlare, ваши ресурсы автоматически будут автоматически сжиматься с помощью Gzip.

9. Избегание загрузки большого количества внешних ресурсов

Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.

Проблема в том, что когда вы добавляете сторонние фрагменты кода на свой сайт, он, скорее всего, загрузит различные зависимые объекты и файлы, чтобы их функциональность работала. Это в свою очередь экспоненциально увеличит время загрузки вашего сайта – вплоть до 100%.

Что же с этим можно сделать? Самое простое решение – свести к минимуму количество сторонних скриптов, добавляемых на сайт. Например, если вы используете несколько рекламных сетей, попробуйте консолидировать все свои объявления в одну или две сети максимум.


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

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

10. Настройка Google AMP

Google AMP (Accelerated Mobile Pages) – это фреймворк для создания облегчённых версий веб-страниц для мобильных устройств. Для ускорения загрузки эти страницы предварительно загружаются и кэшируются серверами Google.

Для настройки AMP пользователям WordPress рекомендуется использовать официальный AMP-плагин.

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

www.searchengines.ru

Короткое резюме по ускорению сайта на WordPress


Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.

 

Полная инструкция как ускорить сайт на WordPress

1. Качественный SSD хостинг, быстрый пинг

Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.


Хостинг «До»:

VPS хостинг FreeHost.com.ua
Размер диска: 30 Gb HDD
Память: 2 Gb RAM
Частота CPU: 2,2 Ghz
Количество CPU: 1
Расположение серверов: Киев, Украина
Стоимость: 12,8 $/месяц

Хостинг «После»:

VDS хостинг от ihor.ru
Размер диска: 20 Gb HDD
Память: 1 Gb RAM
Частота CPU: 2,4 Ghz
Количество CPU: 1
Расположение серверов: Москва, Россия
Стоимость: 250 руб/месяц (примерно 5$/месяц)

По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.

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

 

2. Оптимизировать изображения

Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.


Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.

Существует специальный плагин для оптимизации изображений – WP Smush. Признаюсь — я ним не пользуюсь, так как сам перед публикацией оптимизирую все изображения на предмет размера и качества. Но если вы хотите автоматизировать процесс — то используйте этот плагин.

 

3. Настройка wp-config.php для ускорения работы сайта на wordpress

Небольшой способ снизить загрузку на хостинг — отредактировать файл wp-config.php, который находится в коревой директории вашего сайта.

Находим в файле wp-config.php строку:

define ('WPLANG', 'ru_RU');

Заменяем на:

if (strpos($_SERVER['REQUEST_URI'], 'wp-admin')) define ('WPLANG', 'ru_RU'); else define ('WPLANG', 'ru_RU_lite');

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

 

4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.

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

Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:

User-agent: Slurp Disallow: /

Я прописал следующие запрещающие директивы:

User-agent: grub-client Disallow: /  User-agent: grub Disallow: /  User-agent: looksmart Disallow: /  User-agent: WebZip Disallow: /  User-agent: larbin Disallow: /  User-agent: b2w/0.1 Disallow: /  User-agent: psbot Disallow: /  User-agent: Python-urllib Disallow: /  User-agent: NetMechanic Disallow: /  User-agent: URL_Spider_Pro Disallow: /  User-agent: CherryPicker Disallow: /  User-agent: EmailCollector Disallow: /  User-agent: EmailSiphon Disallow: /  User-agent: WebBandit Disallow: /  User-agent: EmailWolf Disallow: /  User-agent: ExtractorPro Disallow: /  User-agent: CopyRightCheck Disallow: /  User-agent: Crescent Disallow: /  User-agent: SiteSnagger Disallow: /  User-agent: ProWebWalker Disallow: /  User-agent: CheeseBot Disallow: /  User-agent: LNSpiderguy Disallow: /  User-agent: ia_archiver Disallow: /  User-agent: ia_archiver/1.6 Disallow: /  User-agent: Teleport Disallow: /  User-agent: TeleportPro Disallow: /  User-agent: MIIxpc Disallow: /  User-agent: Telesoft Disallow: /  User-agent: Website Quester Disallow: /  User-agent: moget/2.1 Disallow: /  User-agent: WebZip/4.0 Disallow: /  User-agent: WebStripper Disallow: /  User-agent: WebSauger Disallow: /  User-agent: WebCopier Disallow: /  User-agent: NetAnts Disallow: /  User-agent: Mister PiX Disallow: /  User-agent: WebAuto Disallow: /  User-agent: TheNomad Disallow: /  User-agent: WWW-Collector-E Disallow: /  User-agent: RMA Disallow: /  User-agent: libWeb/clsHTTP Disallow: /  User-agent: asterias Disallow: /  User-agent: httplib Disallow: /  User-agent: turingos Disallow: /  User-agent: spanner Disallow: /  User-agent: InfoNaviRobot Disallow: /  User-agent: Harvest/1.5 Disallow: /  User-agent: Bullseye/1.0 Disallow: /  User-agent: Mozilla/4.0 (compatible; BullsEye; Windows 95) Disallow: /  User-agent: Crescent Internet ToolPak HTTP OLE Control v.1.0 Disallow: /  User-agent: CherryPickerSE/1.0 Disallow: /  User-agent: CherryPickerElite/1.0 Disallow: /  User-agent: WebBandit/3.50 Disallow: /  User-agent: NICErsPRO Disallow: /  User-agent: Microsoft URL Control - 5.01.4511 Disallow: /  User-agent: DittoSpyder Disallow: /  User-agent: Foobot Disallow: /  User-agent: WebmasterWorldForumBot Disallow: /  User-agent: SpankBot Disallow: /  User-agent: BotALot Disallow: /  User-agent: lwp-trivial/1.34 Disallow: /  User-agent: lwp-trivial Disallow: /  User-agent: BunnySlippers Disallow: /  User-agent: Microsoft URL Control - 6.00.8169 Disallow: /  User-agent: URLy Warning Disallow: /  User-agent: Wget/1.6 Disallow: /  User-agent: Wget/1.5.3 Disallow: /  User-agent: Wget Disallow: /  User-agent: LinkWalker Disallow: /  User-agent: cosmos Disallow: /  User-agent: moget Disallow: /  User-agent: hloader Disallow: /  User-agent: humanlinks Disallow: /  User-agent: LinkextractorPro Disallow: /  User-agent: Offline Explorer Disallow: /  User-agent: Mata Hari Disallow: /  User-agent: LexiBot Disallow: /  User-agent: Web Image Collector Disallow: /  User-agent: The Intraformant Disallow: /  User-agent: True_Robot/1.0 Disallow: /  User-agent: True_Robot Disallow: /  User-agent: BlowFish/1.0 Disallow: /  User-agent: JennyBot Disallow: /  User-agent: MIIxpc/4.2 Disallow: /  User-agent: BuiltBotTough Disallow: /  User-agent: ProPowerBot/2.14 Disallow: /  User-agent: BackDoorBot/1.0 Disallow: /  User-agent: toCrawl/UrlDispatcher Disallow: /  User-agent: WebEnhancer Disallow: /  User-agent: suzuran Disallow: /  User-agent: VCI WebViewer VCI WebViewer Win32 Disallow: /  User-agent: VCI Disallow: /  User-agent: Szukacz/1.4 Disallow: /  User-agent: QueryN Metasearch Disallow: /  User-agent: Openfind data gathere Disallow: /  User-agent: Openfind Disallow: /  User-agent: Xenu's Link Sleuth 1.1c Disallow: /  User-agent: Xenu's Disallow: /  User-agent: Zeus Disallow: /  User-agent: RepoMonkey Bait & Tackle/v1.01 Disallow: /  User-agent: RepoMonkey Disallow: /  User-agent: Microsoft URL Control Disallow: /  User-agent: Openbot Disallow: /  User-agent: URL Control Disallow: /  User-agent: Zeus Link Scout Disallow: /  User-agent: Zeus 32297 Webster Pro V2.9 Win32 Disallow: /  User-agent: Webster Pro Disallow: /  User-agent: EroCrawler Disallow: /  User-agent: LinkScan/8.1a Unix Disallow: /  User-agent: Keyword Density/0.9 Disallow: /  User-agent: Kenjin Spider Disallow: /  User-agent: Iron33/1.0.2 Disallow: /  User-agent: Bookmark search tool Disallow: /  User-agent: GetRight/4.2 Disallow: /  User-agent: FairAd Client Disallow: /  User-agent: Gaisbot Disallow: /  User-agent: Aqua_Products Disallow: /  User-agent: Radiation Retriever 1.1 Disallow: /  User-agent: Flaming AttackBot Disallow: /  User-agent: Oracle Ultra Search Disallow: /  User-agent: MSIECrawler Disallow: /  User-agent: PerMan Disallow: /  User-agent: searchpreview Disallow: /

Вот пример моего файла robots.txt

Запретив индексацию сайта этим способом, вы сможете снизить нагрузку на хостинг, следовательно ускорить загрузку сайта, высвободив ресурсы сервера.

 

5. Настройка файла .htaccess для снижения нагрузки на сервер.

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

Настройка №1. Часто с сайтов копируют информацию вместе с картинками, не изменяя адреса картинок. И когда такое происходит картинки лежащие на нашем хостинге загружаются на других сайтах, и это создает ненужную нагрузку на хостинг.

Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:

RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^http://(.+.)?yourdomain.ru/.*$ [NC] RewriteCond %{HTTP_REFERER} !^$ [NC] RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]

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

Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:

FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|gif|png|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 year" </filesmatch> </ifmodule>

Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:

<ifModule mod_gzip.c>  mod_gzip_on Yes  mod_gzip_dechunk Yes  mod_gzip_item_include file .(html?|txt|css|js|php)$  mod_gzip_item_include handler ^cgi-script$  mod_gzip_item_include mime ^text/.*  mod_gzip_item_include mime ^application/x-javascript.*  mod_gzip_item_exclude mime ^image/.*  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule>

Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.

RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post.php* RewriteCond %{HTTP_REFERER} !.*yourdomain.ru.* [OR] RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

Настройка №5. Если вы пользуетесь системой FeedBurner, то у вас явно установлены плагины, которые отправляют RSS-контент на сайт FeedBurner. Сегодня вы можете их удалить, потому что перенаправить контент можно и без плагинов, уменьшив нагрузку на хостинг.

RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC] RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC] RewriteRule ^feed/?([_0-9a-z-]+)?/?$ http://yourdomain.ru [R=302,NC,L]

ВНИМАНИЕ!!! Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.

 

6. Оптимизация базы данных

Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.

 

7. Оптимизация кода шаблона (темы)

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

Настройка №1. Найти код, который отвечает за стили в файле header.php:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Заменить на:

<link media="screen" type="text/css" href="http://yoursite.ru/wp-content/themes/yourthemes/style.css" rel="stylesheet">

Внимание!!! Не забудьте изменить yoursite.ru на ссылку своего сайта.

Настройка №2. Изменить код пинбеков:

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Заменить с исправлением yoursite.ru на свою ссылку:

<link href="http://yoursite.ru/xmlrpc.php" rel="pingback"/>

Настройка №3. Изменение кода RSS ленты:

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

Заменить с исправлением yoursite.ru на свою ссылку:

<link href="http://yoursite.ru/feed" title="ВАШ САЙТ RSS Feed" type="application/rss+xml" rel="alternate"/>

Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:

<?php get_bloginfo('name') ?>

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

Некоторые маленькие советы, которые позволят ускорить загрузку сайта:

1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):

<?php comments_template(); ?>

2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.

3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов <!-код-> и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…

4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом </body>, чтобы сперва загружался основной сайт, а уже потом загружались скрипты.

5) Все дополнительные коды на подобии счетчика сайта от Live Internet, либо Google Analytics стоит размещать в подвале сайта, что бы они так же как и другие скрипты грузились только в самую последнюю очередь.

 

8. WordPress плагины — для ускорения скорости загрузки сайта

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

1) Удалите ненужные плагины. Ненужные плагин Со временем работающие плагины накапливаются, и можно насобирать много ненужных пагинов которые помимо занимаемого места будут создавать ненужную нагрузку на сайт.

2) Деактивируйте ненужные плагины. Постарайтесь использовать как можно меньше Активированных плагинов. Некоторым плагинам не обязательно давать работать постоянно.Например плагин для оптимизации БД можно включать только на период работы с ним.

 

10. Ускорение сайта с помощью кэширования

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

1) WP Super Cache – лучший и бесплатный плагин для кэширования в WordPress. Рекомендую его установить и использовать. Также хорошие плагины WP Total Cache, WP Rocket.

2) Плагин Autoptimize – рекомендуют использовать вместе с Wp Super Cache. Никаких сверх настроек делать не нужно, просто активируйте плагин, в разделе «Настойки» → «Autoptimize» поставьте галочки, и плагин будет работать. Будьте осторожны, проверьте работоспособность сайта после изменения настроек, что бы предостеречь себя от неприятностей.

3) Плагин WP Widget Cache – позволяет кэшировать виджеты, с чем не справляется плагин Wp Super Cache.

 

11. Используйте CDN сети для более быстрой загрузки контента

Еще один способ ускорить загрузку сайта — использовать CDN сети, Content Delivery Networks. Каждый раз когда пользователь открывает ваш сайт, он загружает всю информацию с вашего сервера, на котором расположен сайт. Если регион пользователя и регион расположения сервера с вашим сайтом одинаковы, скажем Москва Россия — то все олично. Но если пользователь заходит на Ваш сайт скажем с Азии, или США, то доставка контента к нему уже будет происходить с меньшей скоостью, т.к. тут влияет расстояние. Использование CDN сетей дает возможность загружать файлы вашего сайта (изображения, скрипты, стили) не только с вашего хостинга, а с дата-центров по всему миру. Таким образом заходя на сайт, пользователь автоматически загрузит файлы сайта из наиболее близкой для него точки с серверами CDN сети, что значительно ускорит загрузку сайта.

Можно исюпользовать плагин Jetpack Photon который дает возможность использовать CDN сеть WordPress для загрузки изображений вашего сайта.

Можно использовать другие CDN сети, например MaxCDN, NGENIX или Amazon CloudFront. Я CDN сети не использовал, поэтому в этом пункте ограничися лишь кратким ознакомительным описанием этой технологии.

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

 

Несколько мелочей, которые в также помогут вам ускорить загрузку сайта:

  1. На главной странице сайта выводите только анонсы статей, не нужно выводить полные статьи.
  2. Очень большие статьи разделяйте на страницы с помощью тега <!-nextpage->.
  3. Не стоит выводить на главной странице больше 5-6 статей.
  4. Не стоит выводить под статьей больше 50 комментариев, пользуйтесь так же переключением страниц между комментариями.
  5. Установите поиск по сайту от Google или Yandex. Сайт будет искать информацию быстрее.

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

rightblog.ru

1. Используйте YSlow для отслеживания времени загрузки страниц

Зная количество времени, которое тратится на загрузку страниц, вы сможете определить проблемные места. Также это придаст вам ещё один стимул, для того чтобы залезть в функционал и постараться исправить ситуацию.

Перед тем как мы начнём, вам необходимо установить YSlow, если вы уже конечно этого не сделали. YSlow — это расширение к Mozilla Firefox, которое вы сможете найти на этой странице:

https://addons.mozilla.org/en-US/firefox/addon/5369

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

В нижней правой стороне вашего браузера, у вас находится специальная панель с иконкой (смотрите рисунок 1). Чуть поодаль данной панели, после загрузки страницы, рядом с ‘YSlow’ вы увидите число. Данное число – это время загрузки данной страницы в секундах в вашем браузере. Нам необходимо, чтобы данное число было как можно меньше.

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

Самыми часто встречаемыми «тормозилами» являются следующие объекты или операции:

  • Слишком много HTTP запросов
  • Не сжатые файлы JavaScript
  • Отсутствие времени истечения заголовков для графических файлов

Через несколько минут мы подробнее на этом остановимся.

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

Используем YSlow на полную

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

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

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

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

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

Но люди, как правило, не используют CDN (что является довольно-таки дорогим удовольствием).

Классификация типов ошибок

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

Делайте как можно меньше HTTP запросов: HTTP запрос происходит, когда браузер посылает запрос на сервер. То же самое может происходить при подключении скриптов, файлов CSS, изображений, а также при асинхронных запросах, как со стороны клиента, так и со стороны сервера (Ajax и другие подобные технологии). Однако когда речь заходит о производительности системы, то стоит задуматься о том, сколько подобных запросов происходит у вас на странице. В качестве решения можно применить кэширование, чтобы помочь клиентским машинам быстрее подгружать скрипты, CSS и изображения.

Добавление заголовков Expires: 80% загрузки страницы ориентировано на скачивание скриптов, фотографии и файлов CSS. В большинстве случаев данные вещи не меняются на пользовательских машинах. Добавив немного коду в ваш файл .htaccess, вы можете кэшировать дублирующийся файлы на локальной машине пользователя (о том, как это сделать мы поговорим позже).

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

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

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

Избегайте CSS выражений: я лично никогда не использовал CSS выражения (ещё их называют динамическими свойствами). Данные выражения являются собственной концепцией программирования для IE (такие как условные выражения) в CSS. Технология, которая используется в IE8, да и во всех остальных версиях больше поддерживаться не будет, так что в любом случае придётся завязывать с данным написанием CSS выражений. PHP больше подходит для подобных целей, к примеру, для того, чтобы загрузить разные CSS стили в зависимости от какого-то условия, такого как случайное число, время суток или браузер пользователя.

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

Сокращайте время DNS поиска: когда пользователь набирает имя вашего сайта в строке браузера, то тут же начинается DNS поиск IP адреса, по которому находится ваш сайт. Чем больше ваш сайт содержит внешних источников, тем больше будет занимать время DNS поиск. Как правило, один такой поиск длится 60-100 миллисекунд.

Минимизируйте JS: помимо сжатия посредством gzip, минимизация JavaScript файлов позволит вам облегчить скрипты, избавившись от ненужных пробелов, табов, и других специальных знаков, которые в совокупности увеличивают размеры файлов. Это же очевидно – чем меньше файлы, тем быстрее грузятся страницы. Для минимизирования JavaScript файлов можете использовать инструмент JSMIN.

Избегайте перенаправления: не имеет никакого значения, где вы делаете перенаправление, в JS, HTML или PHP. В любом случае ваш браузер получит заголовок с пустой страницей, на загрузку которой потребуется время. Так что просто старайтесь не применять редирект там, где его можно избежать.

Избегайте дублирования загрузки скриптов: если ваш браузер загружает скрипт более одного раза, это значительно сказывается на загрузке страницы. Математика тут не сложная. Чем больше загрузок одних и тех же файлов, тем дольше загрузка страницы. Просмотрите ваши скрипты и убедитесь, что вы не вызываете jQuery 2 или 3 раза. То же самое относится и к скриптам JS.

Что же… думаю этого достаточно. Теперь давайте перейдём к следующей вкладке YSlow, перед тем как рассмотрим некоторые другие техники, которые позволят увеличить скорость загрузки ваших страниц.

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

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

И наконец, перейдём к последней вкладке Stats tab. Тут вы найдёте информацию обо всех HTTP запросах, как для обычных файлов, так и для закэшированных. Значение Empty cache показывает, что данные файлы необходимо загрузить для отображения страницы. В свою очередь Primed Cache — это файлы, которые уже были закэшированы браузером пользователя. Это означает, что их скачивать не нужно.

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

2. Используйте CSS спрайты для сокращения HTTP запросов

CSS спрайты — это наверное самая значительная вещь, которую придумало человечество, после того как Тесла изобрёл электричество… Я действительно это сказал.. ой, я имел в виду Эдисона.

Ну, может быть не совсем самая крутая, но тем не менее.

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

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

Теперь давайте быстренько посмотрим, как на YouTube используют CSS спрайты. Так выглядит спрайт, которым они пользуются:

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

YouTube использует этот файл довольно оригинально. Загружают они его как фон классу sprite. Когда возникает необходимость в выборе какого-то элемента, происходит выбор изначальной позиции при помощи CSS свойства background-position, а затем применение высоты и ширины.

Давайте и мы попробуем что-то подобное. Поэкспериментируем на этом же самом изображении с сайта YouTube.

В примере, который расположен ниже, мы выводим логотип YouTube на экран. Используя тот же класс sprite, и то же самое изображение image, мы можем создать изображение, которое будет изменяться при наведении мышки.

Таким образом, используя данное изображение, мы можем свести все подключения к одному HTTP запросу. Ну, как эффект?

Ещё одно преимущество CSS спрайтов заключается в том, что при применении псевдо класса :hover, изображение не будет пропадать на несколько мгновений (которые уходят на загрузку нового изображения), как это происходит без использования CSS спрайтов.

3. Загружайте CSS файлы в начале, JavaScript в конце

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

Стоит также отметить:

  1. Загружайте файлы CSS в разделе прямо перед началом тега body.
  2. Подключайте JavaScript перед самым закрытием тега body.

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

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

4. Используйте поддомены для параллельного скачивания

Параллельная загрузка означает увеличение параллельных загрузок одних и тех же файлов. Пройдясь по множеству сайтов, вы можете заметить, что на многих из них запросы посылаются на static.domain.com и c1.domain.com. Это можно увидеть в нижней панели браузера.

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

Настройка процесса:

  1. Создайте 3 поддомена на вашем сервере
  2. Расположите ваши изображения в папках на разных поддоменах
  3. Замените пути в ваших файлах

5. Добавление заголовков Expires

Некоторые сайты остаются нагруженными даже после применения всех методов, описанных выше. Но есть ещё пару методов.

Пользователь может зайти на ваш сайт и совершить все необходимые HTTP запросы для отображения страницы, изображений, скриптов и т.д.

Когда вы используете заголовки Expires, вы можете закэшировать все эти элементы на пользовательской машине, тем самым не только увеличив скорость загрузки страницы, а ещё и сократив трафик. Заголовки Expires могут быть применены ко всем вашим скриптам, CSS и изображениям.

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

Следующий пример .htaccess файла устанавливает заголовки expires на какое-то число в 2010 году для таких типов файлов как .ico, .pfd, .flv (файлы Flash), .jpg, .png, etc.

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

К примеру, если у вас есть файл JavaScript, в котором вы что-то изменили, просто добавьте в название номер версии (что-то типа javascriptfile-1.0.js, javascriptfile-1.1.js и т.д.)

Вывод

Сегодня мы прошлись по многим способам. Надеюсь, вы отметили для себя несколько методов, которые будете активно применять в ваших проектах! Удачи!

ruseller.com

Оптимизация графики

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

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

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

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

Относительно дизайна, то старайтесь использовать в нем меньше изображений. Можно сделать вполне вменяемый и органичный дизайн, использовав при этом CSS стили. Это даже к лучшему будет. Если вы посмотрите на очень популярные ресурсы, то заметите, что у них дизайн — это по сути белый фон с разделительными линиями. Это играет на руку очень сильно и убивает 2х зайцев:

  1. Уменьшает время загрузки;
  2. Повышает удобность потребления контента.

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

Кэширование

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

Чтобы сделать кэширование на сайте (для WordPress) нужно установить плагин Hyper Cache. Полную инструкцию читайте по данной ссылке. Все разжевал там.

Также можно добавить некоторые коды в файл .htaccess, которые также будут включать кеширование, а также gzip сжатие. Честно сказать, их действие на своем сайте я не заметил. Может потому, что мой блог уже был полностью оптимизирован. Да и не вижу в них особого смысла. И заморочка одна имеется, так как не сможем очищать кэш. Тогда не будет видно изменений на сайте. Поэтому, не буду давать эти коды, чтобы вы потом не ломали себе голову при возникновении проблем.

Я их не использую. Кэширования с помощью плагина Hyper Cache более, чем достаточно.

Оптимизация загрузки скриптов

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

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

Чтобы подгрузить скрипты в самом конце загрузки страницы, их нужно разместить в самом низу кода страницы, то есть в подвале. На WordPress это реализовывается с помощью размещения в файле footer.php перед закрывающим тегом </body>.

Также можно разместить скрипты в отдельном файле, а не в файле footer.php. А затем уже подгрузить этот файл в конце файла подвала. Это наилучший способ, как загружать скрипты на сайте.

Покажу на практике, как это все делать. Начну с видео-урока.

Как правило, большинство скриптов размещается в файле header.php между тегами <head></head> и они размещаются между тегами <script></script>. В пример показываю один скрипт из своего файла шапки.

«>

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

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

«>

Теперь сохраняем данный файл в формате .js и называем его удобным именем. Я назову «footer-scripts.js», чтобы четко понимать, что это файл скриптов, которые выводятся в футере сайта.

«>

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

«>

Теперь можно подгрузить этот файл на сайт, чтобы скрипты работали. Для этого нужно разместить строчку кода, в которой прописан путь к этому файлу. Разместить код нужно в файле footer.php перед закрывающим тегом </body>/

Вот моя строка кода.

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

Путь к файлу в данной строке подходит к сайтам на WordPress. Если у вас сайт на другом движке или просто HTML станица, то путь придется изменить под себя.

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

«>

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

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

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

«>

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

Идем дальше.

Избавление от лишних запросов в коде шаблона

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

Нам потребуется файл header.php и все, что находится внутри него между тегами <head></head>. Между этими тегами и хранятся php коды, которые генерируют запросы и выводят основную информацию. Всю суть легче будет понять с помощью видео-урока, который я подготовил ниже.

Теперь текстовый вариант.

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

«>

Как видим, это php код. Если же посмотреть в исходный код (ctrl+u) любой страницы сайта, то увидим, что этого php кода уже нет, а будет HTML код с указанной кодировкой.

«>

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

«>

От одного запроса избавились. Таким же образом нужно заменить другие возможные строчки. Конечно получится не все сделать, так как не все в исходном коде выводится. Но нужно стремиться к максимальному количеству замен.

Также хочу обратить внимание, что имеется код на генерацию названия сайта. Заключается он, как правило, в теги <title></title>. Если вы планируете изменять название ресурса, то либо не заменяйте этот код или же не забудьте потом в коде файла изменить название, так как после замены название будет выводиться из готовой строки с названием. Генерация имени сайта не будет происходить, так как php кода не будет. Учтите этот момент.

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

Отключение ревизий

Снова замучаю вас видео-уроком.

Ревизии — это автоматическое сохранение копий записей, которые делаются при создании записей в определенные интервалы времени.

На самом деле, вещь полезная, но иногда создает очень много мусора и нагружает базу данных. Я бы не сильно рекомендовал отключать данный функционал, так как иногда спасает. Может внезапно пропасть свет и что тогда? А, если будут копии записи, то вы сможете спокойно восстановить прогресс. Не раз такое бывало, знаю по собственному опыту.

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

Как очистить БД я покажу далее, а сейчас все таки покажу, как отключить ревизии в WordPress.

В корне движка имеется папка WP-includes, в которой лежит файл default-constants.php. Необходимо открыть его, найти в нем следующее содержание.

На момент написания этой статьи все это находится, начиная с 277 строки. Весь этот код отвечает за сохранность наших записей. Состоит он из 3х частей, каждая из которых начинается на if.

«>

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

Значение ставим в секундах.

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

Третья часть отвечает за работу ревизий. По умолчанию они включены. Если хотите отключить, то значение true необходимо изменить на false или поставить 0.

Что делать с ревизиями, решать вам, но мое мнение — отключать не нужно. Рекомендую просто поставить значение интервала сохранения в пределах 15-20 минут, а затем периодически удалять все ревизии из базы данных.

Минимум плагинов

Чем больше плагинов на сайте, тем больше та же нагрузка на базу данных. Поэтому, стараемся сократить их количество к минимуму. Если у вас сайт на WordPress, то количество можно сократить до 4-5 плагинов, использовав только реально необходимые плагины. Кстати, по этой ссылке вы узнаете, что это за плагины.

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

  • Форма обратной связи без плагинов
  • Карта сайта без плагинов
  • Редирект после первого комментария

Данный список постоянно пополняется. Так, что ждем вас еще.

Чистка базы данных

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

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

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

Вот сами запросы.

  • 1я строчка — удаляем все ревизии;
  • 2я строчка — очищаем корзину;
  • 3я строчка — оптимизируем таблицы;
  • 4я строчка — удаляем все спам комментарии;
  • 5я строчка — удаляем пингбэки;
  • 6я строчка — отключаем пингбэки;
  • 7я строчка — удаляем информацию о последних редактированиях постов и еще некоторые моменты.

Заходим в phpMyAdmin своего хостинга и выбираем свою базу данных, которую будем чистить. Нас интересует пункт SQL.

«>

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

«>

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

«>

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


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

Надеюсь, что использовав все эти фишки, вы значительно ускорите свой сайт. Я не давал ничего нерабочего. Сам все проделал и получил замечательные результаты. Берите все на вооружение.

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

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

Ну все. До встречи в новых материалах. Пока!

С уважением, Константин Хмелев!

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

kostyakhmelev.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.