Знаете ли вы, что изображения составляют 63% от размера средней веб-страницы? Это означает, что если вы хотите, чтобы ваш сайт работал быстрее, одна из лучших вещей, которую вы можете сделать, это ускорить загрузку изображения.
Самые быстрые сайты имеют:
Но как вы можете ускорить загрузку изображений и воспользоваться преимуществами более быстрого веб-сайта WordPress? хорошо, Вы следуете совету, который я собираюсь представить, Мы углубимся в.
Прежде чем начать: получите сравнительный тест
Не волнуйтесь, я покажу вам, как ускорить ваш сайт и ваши изображения. Но я хочу показать вам, что эти вещи действительно работают. Поэтому я попрошу вас сделать мне одолжение, прежде чем мы начнем:
Подсчитайте, сколько времени требуется для загрузки вашего сайта прямо сейчас. Помимо того, что я являюсь доказательством того, что я знаю, о чем говорю, это дает вам эталон для сравнения. Таким образом, вам не нужно угадывать, действительно ли изменение ускорило ваш сайт. У вас будут данные, чтобы знать наверняка,
Но как проверить, сколько времени занимает загрузка сайта? Хорошо, вам понадобится секундомер и быстрый палец …Подожди нет Это не похоже на хорошую идею. Как насчет автоматического способа сделать это?
Попробуйте вместо этого: зайдите в Pingdom Tools, вставьте URL своего сайта и нажмите Начать тест кнопка:
Затем Pingdom снова выплюнет, сколько именно времени потребовалось для загрузки вашего сайта:
Любое число, которое вы получите, это число, которое вы должны ожидать после того, как прочитаете этот пост!
Мой сайт портфолио (пример) уже довольно хорошо оптимизирован. Надеюсь, вы увидите похожее время загрузки страницы, как только вы реализуете эти советы …
Обновление контента
Бесплатный веб-сайт Speed EBook
(4 страницы)
12-ступенчатый контрольный список для
Достигнуть времени зарядки менее 1 секунды
скачать
1. Измените размеры изображений перед их использованием
Независимо от того, какую тему WordPress вы используете, ваша тема сможет отображать изображения только до определенной максимальной ширины. Это означает, что если вы загружаете изображения с размерами, превышающими эту максимальную ширину, вы замедляете свой сайт двумя способами:
- Вы делаете размеры файлов ваших изображений больше, чем необходимо.
- Вы заставляете веб-браузер вашего посетителя работать, чтобы изменить размер изображения.
Это также не очень хорошая вещь, если вы хотите ускорить загрузку изображений! Таким образом, чтобы решить проблему, обязательно всегда изменяйте размер своих изображений перед загрузкой.
Какие размеры вы должны использовать? Ну, точные размеры зависят от вашей темы WordPress, поэтому я не могу дать общий ответ. Но, как правило, где-то в диапазоне шириной 700-800 пикселей подходит для большинства тем WordPress.
Как изменить размер изображений WordPress
Есть два простых способа изменить размер изображений WordPress.
Во-первых, вы можете установить плагин, такой как Imsanity, который будет автоматически изменять размеры изображений, которые вы загружаете на свой сайт WordPress.
Во-вторых, если вы предпочитаете решение, отличное от плагина, вы можете использовать Batch Image Resizing Made Easy, чтобы легко изменять размеры изображений. Просто убедитесь, что вы выбираете Автоматическая высота чтобы инструмент не обрезал ваши изображения в процессе изменения размера:
Если вы работаете на существующем сайте, вам также следует вернуться и изменить размер как можно большего количества старых изображений. Плагин Imsanity может помочь вам изменить размеры существующих изображений WordPress.
2. Сжатие изображений, чтобы сохранить еще больший размер
Хорошо, изменение размеров ваших изображений – полдела. Но вы можете пойти еще дальше, чтобы уменьшить размер файлов изображений с помощью функции сжатия. Сжатие работает, чтобы уменьшить размер двумя возможными способами:
- без потерь компрессия, Уменьшите размер файла без потери качества.
- Сжатие с потерями, Это предлагает большую экономию размера, но за счет определенного качества.
Как правило, я рекомендую сжатие без потерь для фотографий или других изображений, качество которых достигло максимальной производительности. Но для чего-то вроде скриншотов учебника (например, изображений в этой статье), я бы рекомендовал использовать сжатие с потерями, чтобы получить наибольшую экономию размера.
Как сжимать изображения WordPress
Как и при изменении размеров изображений, вы можете воспользоваться плагином или использовать отдельный инструмент.
Когда дело доходит до плагинов, Smush Image Compression and Optimization – отличный вариант, потому что в его последней версии вы можете сжимать и изменить размер ваших изображений.
Если вам нужен автономный сайт, Kraken – еще один надежный вариант, который позволяет сжимать изображения с использованием методов без потерь и с потерями:
Я знаю, что это боль, но так же, как изменение размеров изображений, вы должны вернуться и сжать как можно больше старых изображений. Используя плагин Smush, вы можете автоматически сжимать старые и новые изображения.
3. Используйте CDN для доставки ваших изображений и другого контента
CDN, сокращение от сети доставки контента, ускоряет ваш сайт и загружает изображения следующим образом:
Обычно, когда кто-то посещает ваш сайт, он должен загрузить все файлы из вашего хостингового центра обработки данных. Если ваш дата-центр находится в Далласе, штат Техас, и кто-то посещает вас из Калифорнии, это нормально., Они все еще очень близки друг к другу!
Но что, если кто-то приезжает из Лондона, Великобритания? Теперь это не так хорошо, Видите, как бы ни был интернет, то есть важно физическое расстояние, хотя бы на долю секунды.
CDN решают эту проблему, храня файлы вашего сайта в различных дата-центрах по всему миру. Затем каждый раз, когда кто-то посещает ваш сайт, он может загрузить свои файлы из ближайшего глобального центра обработки данных.
Они являются удивительным инструментом для ускорения вашего сайта. Но сколько это будет стоить?
Не волнуйся! На самом деле, вы можете найти качественные бесплатные CDN. Два из этих вариантов:
-
Jetpack Site Accelerator – Модуль Jetpack Plugin Photon действует как CDN для ваших изображений. Если вы просто хотите ускорить загрузку изображений, это хороший выбор.
-
CloudFlare – популярный вариант, который прост в настройке и предлагает все ваши статические файлы, включая изображения и HTML.
4. Включите кеширование браузера для вашего сайта
Если вы когда-либо использовали инструмент Google PageSpeed Insights, фраза «Воспользуйтесь преимуществами кэширования в браузере», вероятно, преследует ваши мечты. То есть, это общее предложение для ускорения вашего сайта.
Кэширование браузера в основном говорит браузеру вашего посетителя хранить определенные файлы на локальном ПК вашего посетителя, а не загружать файлы каждый раз. Так, например, ваш посетитель должен будет загрузить изображение вашего логотипа при первом посещении. Но при каждом последующем посещении ваш посетитель загружает этот файл из своего локального кэша.
Это означает более быстрое время загрузки, потому что вашему посетителю не нужно получать все напрямую со своего сервера.
Самый простой способ настроить кэширование браузера – просто добавить следующий код в ваш файл .htaccess:
## EXPIRA CACHING ##
ExpiresActive On
ExpiresByType image / jpg "Доступ 1 год"
ExpiresByType image / jpeg "Доступ 1 год"
ExpiresByType image / gif "Доступ 1 год"
ExpiresByType image / png "Доступ 1 год"
ExpiresByType text / css "1 месяц доступа"
ExpiresByType text / html "Доступ 1 месяц"
Приложение ExpiresByType / pdf "Доступ на 1 месяц"
ExpiresByType text / x-javascript "1 месяц доступа"
Приложение ExpiresByType / x-shockwave-flash "Доступ 1 месяц"
ExpiresByType image / x-icon "Доступ 1 год"
ExpiresDefault "1 месяц доступа"
## EXPIRA CACHING ##
Вы можете найти свой файл .htaccess, используя программу FTP для подключения к корневому каталогу вашего сервера. Или, если вы не знаете, где найти этот файл, поддержка от вашего веб-хостинга может помочь!
5. Убедитесь, что вы используете плагин для кэширования страниц
Кэширование в браузере – не единственный способ ускорить ваш сайт WordPress. Существует также то, что называется кэшированием страниц, что позволяет вашему сайту легко обслуживать контент. Кроме того, кэширование страниц ускоряет загрузку изображений и ускоряет работу остальной части вашего сайта.
Для реализации кэширования страниц я рекомендую плагин под названием Cache Enabler, потому что он легкий и простой в настройке. Просто установите его и активируйте. Затем перейдите к Конфигурация → Включение кэша и настройте его так:
Лучше всего то, что Cache Enabler также минимизирует ваш код, что является еще одним методом сокращения времени загрузки страницы.
6. Отключите Hotlinking для ваших изображений
Горячие ссылки – это когда другие сайты публикуют изображения, размещенные на вашем сервере. В основном это заставляет ваш веб-сервер использовать ресурсы для. Это не хорошо!
Поэтому вы должны рассмотреть возможность отключения хотлинкинга. Таким образом, ваш сервер может сосредоточиться исключительно на своем веб-сайте.
Чтобы отключить хотлинкинг, вы можете использовать плагин All In One WP Security & Firewall или добавить следующий код в ваш файл .htaccess (тот же файл, в который вы добавили кэширование браузера):
ПереписатьEngine на
RewriteCond% {HTTP_REFERER}! ^ $
RewriteCond% {HTTP_REFERER}! ^ Http (s)?: // (www.)? Yourdomain.com (Северная Каролина)
RewriteRule. (Jpg | jpeg | png | gif) $ – (NC, F, L)
Просто обязательно замени tudominio.com с вашим реальным доменным именем!
7. Все остальное терпит неудачу: выберите более быстрый хост
Все, что я упомянул выше, ускорит загрузку вашего сайта и изображений. Но есть кое-что, что все эти советы не могут преодолеть:
Медленный хостинг,
Если у вас есть веб-хостинг с медленным временем отклика, все эти советы являются простыми бинтами. То есть скорость вашего сайта всегда будет ограничена производительностью вашего хоста.
Поэтому, если вы реализовали все вышеперечисленное и все еще разочарованы временем загрузки страницы, возможно, пришло время перекусить и перейти на премиум-хостинг-провайдера.
Или, если вы ищете более дешевые, но эффективные варианты, я большой поклонник SiteGround. SiteGround – это то, что я использую для своего личного портфолио, которое загружается менее чем за 700 мс.
Обновление контента
Бесплатный веб-сайт Speed EBook
(4 страницы) 12-ступенчатый контрольный список для
Достигнуть времени зарядки менее 1 секунды
скачать
Упаковка вещей
Я быстро остановлюсь, когда вы вернетесь в Pingdom и проведете повторный тест своего сайта.
…
Все быстрее? Они должны быть!
И с этим, вы настроили свой сайт на успех как сейчас, так и в будущем. Потому что, как мобильный интернет продолжает расти, время загрузки страницы будет только еще более важным.
SaveSave
