Как заставить изображения загружаться быстрее на вашем сайте WordPress

04.06.2020
WordPress 'Как заставить изображения загружаться быстрее на вашем сайте WordPress
0 8 мин.

Итак, вы хотите, чтобы ваши изображения загружались быстрее?


Ну, я не буду глупым. Давайте погрузимся прямо в хорошие вещи!

Существует три способа ускорить загрузку изображений в WordPress:

  • Изменение размера
  • Компресс
  • Ленивая нагрузка

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

Этот первый метод очень прост, но новички в WordPress часто его игнорируют..

Как оптимизировать изображения в WordPress

Изменить размер ваших изображений

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

Что такое изменение размера?

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

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

Ширина почтового раздела на вашем сайте, вероятно, не превышает 800 пикселей. Текст, который вы сейчас читаете, занимает всего около 700 пикселей по всей странице, поэтому представьте, что вы добавляете изображение шириной 5000 пикселей. Это было бы намного больше, чем нужно и хотя он будет уменьшен до размера страницы, загруженный файл изображения по-прежнему массивный и чрезвычайно расточительный. И это потому, что …

Изображения с большими размерами также имеют большие размеры файлов.

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

Давайте вернемся к моему примеру и предположим, что изображение имеет ширину 5000 пикселей и высокий. Если вы уменьшите его с 5000 пикселей до 700 пикселей, изображение будет использовать на 99% меньше пикселей. Другими словами, размер файла уменьшится примерно на 99%. Если бы изображение было 5 МБ, оно получилось бы всего 50 КБ, и оно загружалось бы на 99% быстрее на вашем сайте..

Изменить размер изображения

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

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

Изменить размер изображений вручную

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

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

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

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

Используйте меньшие размеры

Когда вы загружаете изображение в свою медиатеку, WordPress создает до 3 дополнительных версий: Thumbnail, Medium и Large.

Если вы посетите страницу настроек мультимедиа, вы увидите, что вы можете выбрать эти размеры здесь:

Настройки WordPress Media

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

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

WordPress Image Resize

Выберите «Большой» размер и обновите запись. Если у вас есть какие-либо негабаритные изображения, этот метод позволит вам быстро подать более подходящий размер, который будет загружаться быстрее без необходимости повторной загрузки и замены оригинала..

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

Автоматическое изменение размеров с помощью плагина

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

Optimole Image Optimizer

Это не работает так, как вы ожидаете.

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

Кроме того, вам не нужно указывать Optimole один размер для ваших изображений. Скорее, он получает размер экрана посетителя и генерирует версию оптимального размера каждого изображения на лету. Это означает, что кто-то на мобильном устройстве может загрузить версию изображения в 400px, в то время как другой посетитель на ноутбуке получит версию этого изображения в 700px.

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

Если вы хотите узнать, как использовать Optimole, вы можете посмотреть мое полное видео прохождение:

Я рекомендовал сначала изменить размер, потому что, если вы делаете это вручную или автоматизируете с помощью плагина, это просто и может принести огромные выгоды.

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

Сожмите ваши изображения

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

Существует два типа сжатия изображений.

Первый тип сжатия изображения называется сжатием без потерь.

Сжатие без потерь

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

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

Реальная выгода приходит от оптимизации с потерями.

Сжатие с потерями

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

Алгоритмы сжатия настолько хороши в наши дни, что вы часто можете уменьшить размер файла изображения на 50-70% без заметной разницы. Если вы не профессиональный фотограф и не хотите, чтобы ваши изображения были четкими на мониторах 4k, вы даже не заметите потери качества.

Как сжать ваши изображения

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

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

shortpixel

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

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

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

Реализуйте ленивую загрузку

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

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

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

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

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

Как использовать ленивую загрузку

Еще раз, эта техника оптимизации производительности легко добавляется в WordPress с помощью плагина..

Если вы ищете бесплатный вариант, попробуйте Optimole или ленивая нагрузка а3.

С Optimole ленивая загрузка включается автоматически, а плагин a3 легко настраивается.

Кроме того, если вы не против заплатить, проверьте WP Rocket. Имеет высокопроизводительное кеширование и множество других инструментов скорости..

Чтобы включить отложенную загрузку с помощью WP Rocket, все, что вам нужно сделать, это щелкнуть этот переключатель:

WP Rocket Media

Это не может быть проще!

Наслаждайтесь быстрой загрузкой изображений

Подводя итог тому, что вы только что узнали …

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

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

Далее, алгоритмы сжатия изображений прошли долгий путь, и в наши дни вы можете уменьшить размер файла изображения на 50-70%, не оказывая заметного влияния на качество. Это ежу понятно. Используйте ShortPixel или Optimole, чтобы сжать каждое изображение на вашем сайте.

Наконец, отложенная загрузка – отличный способ выборочной загрузки изображений. Вы можете использовать Optimole, a3 Lazy Load или WP Rocket для мгновенной реализации отложенной загрузки на вашем сайте..

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

У вас есть какие-либо вопросы о концепциях и методах в этом посте? Есть еще один совет, чтобы поделиться? Разместить в разделе комментариев ниже!

Вам также может понравиться,

Как исправить медленный сайт WordPress и панель администратора (навсегда)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector