Как ускорить медленный сайт

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

Скорее всего, вы ждали в режиме ожидания, слушая музыку, с периодическим перерывом в работе: «Из-за необычно большой громкости вызовов время ожидания больше, чем обычно».

Так ты ждал. Прошла одна минута, затем 2 минуты, затем 3 минуты. Через 6 минут вы наконец добрались до представителя службы поддержки.


Но эти 6 минут ощущались как 45 минут!

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



Если веб-страница загружается через 2-4 секунды, это приемлемо. Если загрузка страницы занимает 10-20 секунд, это не нормально, и ваши посетители собираются под залог … и вы потеряете потенциальных клиентов. Панель была поднята, и теперь ваши посетители ожидают, что ваш сайт будет быстрым.
Что делает сайт медленным?

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

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

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


Что многие люди не понимают о цифровых изображениях

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

Если вы используете эти изображения для печати или для создания видео высокой четкости, скорее всего, вам понадобятся все данные, упакованные в эти изображения. Но для вашего веб-сайта эти изображения с высоким разрешением, сделанные прямо с камеры, излишни. Сколько людей имеют монитор, достаточно большой для отображения изображения с разрешением 4608 × 3456 пикселей?

Чтобы дать вам некоторые ориентиры по размерам изображения …

    Изображения высокого разрешения с сегодняшних камер часто имеют размеры 2000-4000 пикселей (или больше).
    Размеры файлов изображений с современных камер часто составляют от 2 до 10 мегабайт каждая.
    Ширина стандартного веб-сайта обычно составляет от 960 до 1280 пикселей.
    Регион веб-сайта, на котором вы читаете текст статьи, обычно имеет ширину 600-800 пикселей.
    Если вы хотите, чтобы веб-страница загружалась быстро, размер файла изображения веб-сайта должен быть менее 500 килобайт (0,5 мегабайта), предпочтительно, по возможности, менее 250 килобайт.

Например, когда вы используете гигантское изображение в регионе на вашем сайте размером 640 x 360 пикселей, веб-браузер вашего посетителя должен загрузить этот огромный файл изображения, а затем уменьшить его размер, чтобы привести его в соответствие — и на это требуется время, даже если быстрое подключение к интернету.

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


Уменьшение размеров файлов без ущерба для качества изображения

Если вам нужна быстро загружаемая веб-страница, вы просто не можете использовать файлы изображений монстров.

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

Вот как ты это делаешь.

Это простой трехэтапный процесс

Обрезка. Изменение размера. Компресс.

Я буду использовать реальное изображение, чтобы вы могли видеть, как это работает. Наш образец изображения называется «Майами Кабана». Исходный размер изображения 1698 x 1131 пикселей, 2,18 МБ. Вы можете увидеть фактическое изображение здесь. Действительно хорошее изображение, но оно СЛИШКОМ большое, чтобы использовать его на стандартном веб-сайте.

Шаг № 1: Начните с обрезки и вырезания ненужных частей вашего исходного изображения. Это не только уменьшает размеры изображения, но и может фактически улучшить ваше изображение, отображая только то, что наиболее важно.

Есть моменты, когда обрезка не требуется. Эта «Майами Кабана» является хорошим примером. Однако на практике я обрезаю большинство изображений на своем веб-сайте до стандартного соотношения сторон, например 16: 9 или 4: 3, потому что это то, к чему привыкли люди.

Шаг № 2: изменить размер. Здесь вы можете значительно уменьшить размер файла.

Вы помните, что исходное изображение было 1698 x 1131 пикселей, 2,18 МБ. Но посмотрите, что произойдет, когда мы уменьшим его до размера, который поместится на стандартном веб-сайте:

    Изменение размера изображения до 800 x 533 пикселей приводит к размеру изображения 276 кБ — уменьшение на 87%. Вы можете просмотреть это изображение здесь (потому что оно все еще слишком велико, чтобы показывать прямо здесь).
    Изменение размера изображения до 600 x 400 пикселей приводит к размеру изображения 164 КБ — уменьшение на 92%. Вот это изображение:


Все еще выглядит довольно хорошо, не правда ли?

Шаг № 3: Сжать. Большую часть времени я останавливаюсь после шага № 2, потому что размер изображения был достаточно уменьшен. Однако, если вы хотите сделать еще один шаг вперед, вы можете сжать изображение и еще больше уменьшить размер файла с минимальным (если есть) снижением качества изображения.

Существует много программ, а также онлайн-ресурсов, которые выполняют сжатие изображений. Тот, который работает очень хорошо (и не имеет кучу надоедливой рекламы) — tinypng.com. Хотя название подразумевает, что оно работает только для файлов .png, оно также работает и для файлов .jpg.

Вот что может сделать сжатие:

    Сжатие оригинальной «Miami cabana» (без обрезки или изменения размера) уменьшает размер файла изображения с 2,18 МБ до 271 КБ — и на 87%. Вы можете просмотреть это сжатое изображение здесь.
    Сжатие нашего изображения размером 800 x 533 пикселей из шага № 2, приведенного выше, уменьшает размер файла с 276 кБ до 80,6 кБ, что на 96% меньше исходного. Вы можете просмотреть это изображение здесь.
    Сжатие нашего изображения размером 600 x 400 пикселей из шага 2 выше уменьшает размер файла с 164 КБ до 43,7 КБ, что на 98% меньше исходного. Вы можете просмотреть это изображение ниже:

Можете ли вы отличить изображение от шага 2 выше?
Вот инструменты, которые вам понадобятся

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

Для пользователей Windows все, что вам нужно, это Microsoft Paint (поставляется бесплатно с Windows) для обрезки и изменения размера.

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

Не нужно использовать сложное или дорогое программное обеспечение, такое как Adobe Photoshop, для простого кадрирования и изменения размера, если, конечно, вы уже не знакомы с ним, потому что используете его постоянно. Я лично использую Paint Shop Pro от Corel. Я использую его с 1999 года и считаю его более удобным для пользователя, чем Photoshop.

Вы также можете использовать бесплатные (или очень недорогие) графические редакторы, такие как Gimp, PicMonkey или Pixlr, если хотите. Но упомянутые выше бесплатные приложения будут работать просто отлично.

Несколько советов по предварительной обработке изображений

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

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


    Используйте стандартное соглашение об именах. Ваша библиотека изображений будет быстро расти, особенно если вы создаете одну или несколько версий каждого изображения. Итак, вы захотите разработать простое описательное соглашение об именах, чтобы вы могли сразу узнать, что это за изображение, не открывая файл изображения и не просматривая его. В нашем примере выше мастер-изображения были помечены как «miami_cabana_orig.jpg». Версия 800 x 533 была помечена как «miami_cabana_800.jpg». Измененное и сжатое изображение было помечено как «miami_cabana_800_compress.jpg».
    Стандартизируйте размеры вашего изображения. По возможности старайтесь соответствовать вашим размерам изображения. Это создаст симметрию, единообразие и улучшит общую эстетику вашего сайта.
    Сохраните ваши изображения как .jpg или .png. Это 2 наиболее распространенных формата файлов для изображений. Если у вашего изображения прозрачный фон, вам нужно использовать формат .png. .Png может иметь чуть большую четкость изображения, чем .jpg, но большинство людей (включая меня) не видят разницы. При прочих равных формат .jpg обычно будет иметь меньший размер файла, чем .png. Я на самом деле использую оба формата, но я склонен использовать формат .png больше.

Это все, что нужно сделать

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