Создайте ленивую загрузку
Если на странице много графических элементов, то они в значительной степени замедляют её. И это происходит из-за неоптимальной загрузки. Когда пользователь переходит на страницу, браузер начинает загружать сразу все изображения — и те, которые видны прямо сейчас, и те, которые находятся ниже, которые пользователь не видит. Очевидно, что изображения, которые пользователь не видит, ему пока не нужны, и их загрузку можно было бы отложить, тем самым ускорив страницу. Такая вот ленивая загрузка позволяет загружать графические элементы на страницы не сразу, а по мере прокрутки страницы, увеличив этим скорость её загрузки.
У этого способа есть один недостаток — по мере прокрутки страницы пользователю придётся ждать несколько мгновений, пока загрузятся новые картинки. Поэтому данный метод актуален только на тех сайтах, где используется большое количество картинок.
А реализовать его можно с помощью плагина для WordPress — любого из этого списка.
На страницах с большим количеством изображений, создайте эффект ленивой загрузки — постепенной загрузки картинок по мере прокрутки страницы.
Избегание загрузки большого количества внешних ресурсов
Загрузка большого количества внешних ресурсов – это одна из проблем, с которой сегодня сталкиваются крупные медиасайты. Но это не значит, что данная проблема не может повлиять на ваш сайт. Фактически, это актуально и для более мелких сайтов, особенно тех, что используют рекламные сети, такие как Google AdSense, Media.net, Taboola и т.д.
Проблема в том, что когда вы добавляете сторонние фрагменты кода на свой сайт, он, скорее всего, загрузит различные зависимые объекты и файлы, чтобы их функциональность работала. Это в свою очередь экспоненциально увеличит время загрузки вашего сайта – вплоть до 100%.
Что же с этим можно сделать? Самое простое решение – свести к минимуму количество сторонних скриптов, добавляемых на сайт. Например, если вы используете несколько рекламных сетей, попробуйте консолидировать все свои объявления в одну или две сети максимум.
Если вы используете другие сторонние ресурсы, такие как формы, чат, всплывающие оповещения и т. д., то вам нужно будет проверить сайт с помощью инструмента GTmetrix (https://gtmetrix.com/). Как быстро загружается ваш сайт?Узнайте с GTmetrix:
Эффективность вашей страницы в сводном отчете
На вкладке Waterfall вы сможете просмотреть скорость загрузки всех файлов, найденных на странице, и понять, какие из них больше всего её замедляют.
Как увеличить лимиты на размер загружаемых файлов и объем выделяемой для PHP памяти
По умолчанию WordPress устанавливает небольшой лимит на размер загружаемых изображений, видеороликов и других файлов. Аналогичная ситуация с PHP memory limit , который сказывается на возможности запускать плагины и скрипты.
Если вы запускаете сайт с большим количеством контента, эти лимиты могут стать проблемой. Можно получить ошибку при загрузке:
Если достигнут предел выделяемой памяти, то выведется другое сообщение об ошибке:
Рассмотрим наиболее эффективные способы увеличения этих лимитов на сервере. Начнем с memory limit php ini .
- Обновление файла php.ini
- Редактирование файла .htaccess
- Изменение файла wp-config.php
- Изменение лимитов в WHM
- Заключение
Обновление файла php.ini
Если вы используете CPanel , перейдите в раздел « Файлы » и нажмите кнопку « Диспетчер файлов ». Убедитесь, что установлен флажок « Показать скрытые файлы », а затем нажмите на кнопку « Перейти ».
Выберите папку wp-admin и найдите файл php.ini или php5.ini . Если такого файла нет, создайте его, нажав на кнопку « Создать файл », расположенную в верхнем левом углу. Назовите файл php.ini и нажмите во всплывающем окне кнопку « Создать файл »:
Если ошибка не исчезла, попробуйте переименовать файл в php5.ini . Когда файл будет открыт, добавьте в него приведенные ниже строки, а затем сохраните изменения и закройте файл:
M — означает мегабайты. Измените лимиты 1000M, 2000M и 3000M на значения, которые необходимы. Изменение значения max_execution_time ограничит время загрузки скрипта.
Во многих случаях используемые значения должны увеличиваться по мере перехода в списке от первой до третьей строки. Upload_max_filesize должен быть самым маленьким, memory limit php ini — самым большим. При этом post_max_size должен иметь среднее значение.
Прежде чем проверить, не исчезла ли ошибка, очистите кэш браузера.
Редактирование файла .htaccess
Если редактирование php.ini не помогло, попробуйте изменить файл .htaccess . Добавьте приведенный ниже код в конец файла:
Измените значения php ini set memory limit так, как вам нужно. Не забудьте сохранить файл и очистить кэш браузера.
Изменение файла wp-config.php
Если оба способа не дали результата, попробуйте отредактировать файл wp-config.php , добавив следующий код в самый низ, перед строкой « happy blogging «:
Сохраните файл и очистите кэш браузера.
Изменение лимитов в WHM
Если сайт размещен на VPS или выделенном сервере, можно попробовать изменить лимиты в WHM .
После того, как вы вошли в систему, перейдите в раздел Конфигурация сервера> Настройки > PHP .
Введите нужные вам значения и нажмите кнопку « Сохранить ».
Затем перейдите в раздел Конфигурация служб> Редактор конфигурации PHP . Прокрутите страницу вниз до разделов memory_limit и upload_max_filesize :
Введите необходимые значения. В разделе « Параметры и информация » найдите memory_limit и задайте то же значение, которое вы установили в memory limit php ini и .htaccess .
Нажмите кнопку « Сохранить » и очистите кэш браузера.
Заключение
Мы рассмотрели все способы решения данной проблемы. Наслаждайтесь возможностью загружать большие файлы и продолжайте использовать на своем сайте плагины WordPress . Внесенные в php memory limit htaccess изменения должны вступить в силу через несколько минут, после чего можно будет приступить к работе с новыми параметрами.
Если нужно загрузить большие файлы только один раз, попробуйте сделать это через FTP . Обычно файлы, загруженные через FTP в каталог /wp-content/uploads/ , не отображаются в библиотеке медиа. Но с помощью плагина Media from FTP можно отобразить их всего в несколько кликов.
Если ни один из вариантов не дал результата, свяжитесь со своим хостинг-провайдером.
Данная публикация представляет собой перевод статьи « How to Increase the Maximum Upload and PHP Memory Limit » , подготовленной дружной командой проекта Интернет-технологии.ру
How to Check the Current Maximum Upload Size in WordPress
There are many ways to check your WordPress site’s current max upload size. Let’s go through all of them.
In the Media Library
The quickest way to check your site’s current maximum upload size is to go to your WordPress dashboard, and from there, go to Media > Library. Here, click on the Add New button to activate the media uploader tool.
The “Maximum upload size limit” in WordPress
As Kinsta hosts this site, the message displays below the Select Files button. If you’re using a different web hosting provider, you may see a different limit listed here.
You can also go to Media > Add New directly and see the same message displayed at the bottom.
The “Maximum upload file size” in WordPress’ Media Library
Again, you can see the 128 MB max upload file size here.
In the Site Health Info
WordPress 5.2 added the tool to help you debug your WordPress site better. Here, you can find almost all the information about your server and WordPress configuration.
As both the server and WordPress handle the max upload file size, there are two ways to find its value on this screen.
First, you can find it listed under the Media Handling dropdown. Here, look for the value of constant.
‘Media Handling’ settings in the ‘Site Health Info’ panel
The second method is to look under the Server dropdown. You’ll find many options related to your webserver’s setup under here. Please search for the value for constant to see what it is. On this site, the max upload file size limit is 128 MB.
‘Server’ settings in the ‘Site Health Info’ panel
You can also see other PHP constants and their values, such as:
- : Defines the maximum upload limit for .
- : Defines the memory allocated for PHP. It should be set equal to or higher than the limit. Or else the upload will fail.
Your web host sets these options. Usually, starter hosting plans will have a lesser upload size limit than enterprise hosting plans. Some hosts may allow you to override these limits. But in most cases, you may need your hosting provider’s assistance (and perhaps a plan upgrade) to increase them.
Кэширующие плагины для WordPress
Если ваш сайт работает на WordPress, то этот раздел статьи будет для вас наиболее полезен.
Чтобы ускорить WordPress-сайт, лучшее, что можно сделать, – это установить кэширующий плагин, который позаботится о большинстве из пунктов, которые мы рассмотрим ниже.
Самым популярным кэширующим плагином для WordPress является W3 Total Cache, однако он довольно сложный в использовании. W3 Total Cache (W3TC) улучшает SEO и удобство использования вашего сайта за счет повышения производительности веб-ресурса.
Плагин W3 Total Cache
Ещё один плагин, WP Fastest Cache, работать с которым намного проще. У этого плагина более дружественный к пользователю интерфейс и его легче настроить.
Плагин для кэширования WordPress
Объединение и удаление файлов Javascript
Для выполнения этой задачи нужно иметь представление о JavaScript, в противном случае можно нарушить эту функциональность на сайте.
Если вы используете CloudFlare, вы можете включить минимизацию JavaScript (JavaScript Minification), перейдя на вкладку Speed и отметив галочкой пункт JavaScript в подразделе Auto Minify.
Вы также можете включить Rocket Loader в том же подразделе. Эта функция объединяет JavaScript-файлы в один, загружает скрипты в последнюю очередь и кэширует их локально. Если использование этой функции приведёт к нарушениям в работе JavaScript-функциональности, её можно будет в любой момент отключить.
Если вы не используете JavaScript, то вы можете сжимать JavaScript-файлы вручную. Для этого можно использовать такой инструмент, как JS Compress (https://jscompress.com/).
Если вы веб-разработчик и хорошо разбираетесь в коде, вы можете запустить Grunt (https://gruntjs.com/) или Gulp (https://gulpjs.com/) для автоматизации процесса минимизации JavaScript. Существует также модуль Apache (https://www.modpagespeed.com/doc/filter-js-minify), который способен уменьшать размер исходного кода JavaScript «на лету», однако его нельзя сочетать с другими методами минимизации.
После объединения и минимизации ваших файлов JavaScript вам нужно настроить асинхронную или отложенную загрузку скриптов на сайте. Для внешних скриптов лучше использовать атрибут async. Для большинства других скриптов, которые полагаются друг на друга для работы, используйте атрибут defer. Более подробную информацию можно посмотреть на сайте — http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html.
При использовании WordPress вы можете попробовать один из плагинов оптимизации, таких как Hummingbird (https://premium.wpmudev.org/blog/hummingbird/) или плагин Async JavaScript (https://wordpress.org/plugins/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 — https://www.minifier.org/.
Конвертация в формат .webp
Выше мы написали, что на сайт лучше всего подходят изображения в формате .jpg. Но на самом деле наиболее оптимальными будут картинки в формате .webp. Это современный формат, который поддерживают большинство браузеров и они отличаются минимальным весом и хорошим качеством картинки. Но проблема в том, если заранее наконвертировать все картинки в этот формат, то WordPress не позволит загружать изображения в .webp из соображений безопасности. А вторая проблема — большинство, но не все браузеры поддерживают его.
Поэтому для WordPress есть специальный плагин, у которого есть две основные функции:
- Конвертирует прямо на сайте загруженные в .jpg картинки в формат .webp. То есть вы загружаете картинки в допустимом для WordPress формате .jpg, а уже потом плагин их конвертирует, после загрузки.
- Если браузер пользователя не поддерживает .webp, то плагин будет подставлять изображения в поддерживаемом формате .jpg.
Плагин называется WebP Express. Но кроме него такими же функциями обладает и большинство других аналогичных плагинов.
Конвертируйте изображения в формат .webp с помощью плагина.
Вес изображения
Чем меньше вес изображения, тем меньше будет его влияние на скорость загрузки, но тем хуже будет его качество. Рекомендуемый вес изображения до 100 кб. Поэтому следует найти предельное минимальное значение веса, при допустимом качестве. Чтобы уменьшить вес картинки, можно воспользоваться тремя способами:
- Применить онлайн сервисы, например, этот или любой другой, ведь их очень много. Недостаток этого метода — каждый раз перед загрузкой картинок придётся посещать сторонний сервис.
- Использовать плагин для WordPress, например, или подобный, их тоже очень много. Недостаток этого способа — в каждом таком плагине могут содержаться функции, которые вебмастер не использует, но которые при этом нагружают сайт и замедляют его.
У каждого из способов есть свои сторонники и противники.
Загружайте изображения весом до 100 кб.
Кстати, если вы обладаете навыками работы в графических редакторах, например, в Photoshop или аналогичных, то конвертировать и уменьшить вес картинки вы сможете с его помощью.
Подключение к сети доставки контента
Этот шаг важен для каждого владельца сайта, включая тех, чьи ресурсы работают на WordPress. В качестве примера мы будем использовать CloudFlare, но эти принципы применимы к любой CDN.
Маршрутизация трафика через CloudFlare позволяет сократить время загрузки и повысить безопасность веб-сайта.
Чтобы настроить CDN, например CloudFlare, выполните следующие действия:
Зарегистрируйте аккаунт на сайте https://www.cloudflare.com/. Инструкция подключения CDN CloudFlare к сайту ВордПресс.
Cloudflare + WordPress
Добавьте в него свой сайт. (С системой справится даже ребенок. Вы просто указываете адрес своего сайта и нажимаете большую зеленую кнопку. В течение минуты ваш сайт анализируется и затем на странице отображаются все предыдущие настройки DNS. Также предлагается изменить/добавить некоторые значения, если что-то вдруг перенеслось неправильно. В чем плюс? Все очень просто, ваш сайт перенесется и не будет простаивать. Ваши пользователи даже не заметят каких-либо изменений).
Измените серверы доменных имён, чтобы они указывали на те сервера, что были предоставлены CDN в процессе установки. При использовании WordPress и CloudFlare установите официальный плагин CloudFlare:
Официальный плагин CloudFlare
При использовании другой CMS установите модуль mod_cloudflare для Apache. Хотя это не обязательно, но полезно для регистрации реальных IP-адресов пользователей вашего сайта. CloudFlare — действительно очень удобный сервис. Согласитесь, защитить сайт, забыть о кешировании, установить статистику и не тратить нервы, если сайт недоступен, просто перенеся сайт на другие DNS — это здорово. А если почти всеми этими возможностями можно пользоваться бесплатно, то такой сервис — просто сказка
Увеличить размер фото в paint.net
В этой программе, в отличие от предыдущей, есть возможность увеличить размер фотографии в сантиметрах. Программа бесплатная, простая, удобная и по сравнению с Paint, довольно многофункциональная. Скачать можно здесь: https://www.dotpdn.com/downloads/pdn.html Установка простая, без всяких скрытых сюрпризов, поэтому описывать не буду.
Запустите программу. Откройте нужный файл. «Файл», «Открыть…». В меню нажмите «Изображение» и в раскрывшемся списке команд выберите «Изменить размер».
Сразу видно, что настроек изменения размера фото здесь побольше. Вот и обещанные сантиметры. Еще увеличить размер фото можно в дюймах, но для нас это уже экзотика. Принцип сохранения пропорций такой же, как и в предыдущем описании. Хотите сохранить — оставляйте галочку, хотите растянуть или сжать фото — снимайте.
Что еще хорошо в этой программе, так это возможность подредактировать получившийся результат
Обратите внимание в меню на «Эффекты». Первая же строка «Для фотографий», а там несколько классных инструментов для обработки
Как улучшить увеличенное фото в paint.net
Итак, в главном меню программы есть несколько инструментов для улучшения качества изображения. Воспользуемся ими при увеличении размера фото.
Эффекты paint.net для улучшения качества фото
- Портретный.
- Резкость.
- Свечение.
Эффекты «Виньетка» и «Удаление эффекта «красные глаза»» рассматривать не будем потому. Ими, конечно, можно пользоваться, но прямого отношения к улучшению качества увеличенного фото они не имеют.
1.Портретный. Название красноречиво говорит о назначении. Если Вы увеличиваете размер фото на котором изображен портрет человека, то обязательно попробуйте применить эту обработку. Три параметра доступны к настройке:
- Смягчение,
- Освещенность,
- Теплота.
2.Резкость. Эта обработка больше подходит для пейзажей, панорамных снимков и скриншотов с монитора и мало подходит для лиц людей. Тут все просто. Изменяйте параметр «Величина» резкости и наблюдайте, как меняется изображение.
3.Свечение. Хороший, практически универсальный инструмент для самых разных снимков. Управляйте параметрами своего фото:
- Контрастность,
- Яркость,
- Радиус.
Практика показывает, что если изначально кадр был хорошего качества, то этих инструментов вполне достаточно, чтобы поправить возможные мелочи после его увеличения.
Как Увеличить Максимальный Размер Загружаемого Файла в WordPress
WordPress имеет встроенный загрузчик медиафайлов. Это делает загрузку файлов на ваш блог лёгкой задачей — нет необходимости использовать FTP-клиенты или файловые менеджеры. Все медиафайлы, которые могут вам понадобиться в вашем блоге, могут быть легко загружены в несколько кликов мыши.
Однако стоит отметить, что медиа загрузчик использует PHP для загрузки файлов на сервер и, к сожалению, имеет лимит на максимальный размер загружаемого файла. Вы можете проверить максимальный размер файла в WordPress зайдя в Панель администратора→ Медиафайлы→ кнопка Добавить новый.
Этот лимит может быть разным в зависимости от провайдера услуг хостинга или настроек WordPress. В большинстве случаев, максимальный размер загружаемого файла в WordPress является достаточным для рядовых пользователей. Но что, если вы хотите загрузить видео высокого качества или большой PDF файл, который превышает лимит? Попытка загрузки подобного рода файлов приведет к появлению сообщения об ошибке Размер файла превышает максимальный для этого сайта:
Существует несколько способов для увеличения максимального размера загружаемого файла в WordPress. Мы расскажем о них в этом руководстве.
Что вам понадобится
Перед тем, как вы начнете это руководство, вам понадобится следующее:
- Доступ к панели управления хостингом
- Доступ к панели администратора WordPress
Вариант 1 — Увеличение максимального размера загружаемых файлов в .htaccess
Многие провайдеры услуг хостинга позволяют менять различные PHP настройки через файл .htaccess. Таким образом, применив правило php_value upload_max_filesize в файле .htaccess вы можете увеличить максимальный размер файлов для загрузки.
Мы будем использовать Файловый Менеджер для редактирования файла .htaccess, но, то же самое может быть сделано используя FTP-клиент. Найти файл .htaccess вы можете в том же каталоге, где расположены ваши файлы WordPress. К примеру, если вы можете получить доступ к вашему сайту через такой адрес вашдомен.ru, значит ваш WordPress и .htaccess должны находиться в папке public_html.
Как только расположение файла .htaccess определено, выберите его и нажмите кнопку Редактировать.
Вам необходимо добавить следующий код в конец файла:
Как только вы закончите, сохраните изменения нажав на иконку Сохранить в левом верхнем углу.
Вариант 2 — Настройка файла php.ini
ВАЖНО! Этот метод наиболее полезен, если ваш сайт WordPress находится на сервере VPS. Многие из провайдеров услуг виртуального хостинга не позволяют редактирование файла php.ini
Если вы используете виртуальный хостинг, свяжитесь с командой поддержки вашего хостинга для уточнения данной информации.
Как только вы закончите, сохраните изменения и проверьте результат изменений в Панели администратора WordPress→ Медиафайлы→ кнопка Добавить новый.
Вариант 3 — Увеличение максимального размера загружаемого файла в cPanel
Если ваш провайдер услуг хостинга использует cPanel и позволяет изменить настройки PHP, вы сможете легко увеличить максимальный размер загружаемых файлов в WordPress:
- Войдите в cPanel и найдите Выбор версии PHP в разделе Программное обеспечение.
- Нажмите на Switch to PHP Options (Переключиться на опции PHP).
- Измените значение post_max_size и upload_max_filesize.
- Нажмите кнопку Сохранить для сохранения изменений.
Вариант 4 — Изменение файла wp-config.php
Не волнуйтесь, если методы описанные выше для вас не работают. Еще одним путем для увеличения максимального размера загружаемого файла в WordPress, является изменение лимита памяти. Для этого добавьте следующий код в файл wp-config.php:
Войдите в Файловый Менеджер или FTP-клиент, найдите файл wp-config.php и добавьте код выше в конец файла. После того, как вы закончите, wp-config.php должен выглядеть вот так:
Заключение
Закончив данное руководство вы будете знать, как увеличить максимальный размер загружаемого файла в WordPress, теперь вы сможете загружать необходимые для вашего блога файлы.