Ускоряване на сайта - Page Speed
Здравейте, скъпи читатели и гости на блога asbseo.ru!
В тази статия ще научитекак да увеличите скоростта на зареждане и работа на всеки сайт чрез оптимизиране на кода и изображенията в сайта, както и други действия за ускоряване на сайта.
Ако все още не сте изпълнили тези стъпки, тогава ви препоръчвам да го направите, те значително ще ускорят вашия блог!
За да ускоря блога си, закупих и инсталирах кеширащия скрипт "maxcache". Това е страхотен скрипт, който ускорява блога и значително намалява натоварването на вашия хостинг сървър! Писах за скрипта в моята статия: „Maxcache – WordPress блог кеширащ скрипт“.
Като цяло се замислих заускоряване на сайтовете след като видях тези снимки:
На първата екранна снимка можем да видим лентата с инструменти на Alexa Rank, която показва, че блогът ми се зарежда много бавно и 83% от другите ресурси се зареждат по-бързо.
Не знам колко оправдан и важен е този индикатор, но ме накара да се замисля и се обърнах към панела за уеб администратори от Google (Lab - Site Performance), който също измерва скоростта на сайта. И ето какво видях:
Тук също бях уведомен, че скоростта на моя ресурс е много ниска.
Тази страница също ни моли да зададемСкорост на страницата, която се използва за оценка на ефективността на страниците и получаване на предложения за подобряването им.
В тази статия ще разгледаме инсталирането, конфигурацията и работата с инструмента Page Speed , но първо, малко отклонение и няколко от моите препоръки за ускоряване на всеки сайт и блог.
Как да ускоря сайта? Съвети за увеличаване на скоростта на изтегляне и производителноствсеки сайт
Както неведнъж съм казвал, скоростта на зареждане и работа на всеки сайт влияе върху позицията му в резултатите от търсенето и съответно трафика. Колкото по-бързо работи сайтът, толкова по-лесно ще бъде повишаването на позицията на сайта в резултатите от търсенето. Ето защо на това събитие трябва да се обърне най-голямо внимание не само на напреднали интернет ресурси, но и на много млади проекти.
Ако красивите Flash сайтове са почти невъзможни за оптимизиране по отношение на увеличаване на скоростта на зареждане, тогава обикновените блогове и сайтове могат да бъдат ускорени, но може да се наложи да се откажете от някои удобства и красиви ексцесии в полза на ускоряването.
Струва ли си да се правят такива жертви?
Мисля, че си заслужава! За мен лично бързината на работа и зареждане на сайта е по-важна от красотата му и някакви лосиони.
1. Оптимизация на изображението
Особено внимание трябва да се обърне на ресурси с голям брой графични изображения. В моята статия „Оптимизиране на изображения за мрежата“ вече писах за това как да намалим изображенията, които използваме в нашите сайтове и блогове. Препоръчвам ви да прочетете тази статия!
Всяко изображение, което вмъкваме в уеб ресурс, трябва да бъде намалено и не само теглото, но и размерът му.
Просто казано, ако сте качили изображение от 1200 × 900 пиксела и вмъкнете изображение от 600 × 450 пиксела в публикацията си, тогава кодът допълнително ще посочи ширината и височината на използваното изображение. Такъв код би изглеждал по следния начин:
src="http://yourdomain.ru/images/videokurs.png" alt="« width="600" height="450"
2. Оптимизиране на код и скрипт
Нямам много опит в работата с html, php, css код, всичките ми знания се свеждат до разбиране на местоположението на елементите в кода (къдеторазположен) и познаване на някои параметри и свойства.
Ето защо, за да ускоря сайта с помощта на оптимизация на кода, най-вероятно ще се обърна към специалисти по този въпрос в близко бъдеще или постепенно ще го разбера сам.
Междувременно моите препоръки се свеждат до следните дейности, изброени по-долу.
Премахнете всички интервали в кода
Кодът, който няма интервали, не винаги е ясен и понякога няма да е лесно да се намери нещо там. Но от друга страна, такъв код се обработва по-бързо от браузъра, поради което се увеличава скоростта на зареждане (отваряне на страници) на сайта. Ето как изглежда кодът на моя блог:
Ето как изглежда кодът на таблицата със стилове (файл styles.css):
Стиловата таблица (CSS) може да бъде оставена засега, ще се върнем към нея по-късно и ще оптимизираме кода й с едно натискане на бутон!
Организирайте скриптовете и премахвайте ненужните
Когато страниците се отварят, всички елементи на кода се зареждат в реда, в който са написани. Ако бъдат открити скриптове при зареждане на html код, тогава отварянето на страницата се спира, докато скриптът се зареди напълно.
Следователно, когато е възможно, всички скриптове трябва да бъдат преместени в самия край на кода. Например, за WordPress блог, това е файлът footer.php.
Естествено премахването на ненужния код води до значително ускоряване на зареждането на сайта. Например премахнах скрипта, отговорен за появата на бутона в горната част и плавното превъртане на страницата при натискане.
Освен това този скрипт се записва в отделен файл, в резултат на което при зареждане на страницата се отваря допълнителен файл (документ) и се зарежда кодът му, което намалява скоростта на зареждане на страницата.
Ето защо е нежелателно да включвате допълнителни файлове, по-добре е да пишете кодове в единмясто.
Също така не използвам никакви (!) джаджи в моя блог.
Можете да видите това от екранната снимка по-долу. Написах всички елементи на страничната лента в кода на файла sidebar.php.
Оказа се дори по-добре, отколкото беше. 🙂
Page Speed - ускорение на уебсайт от Google
Сега нека се върнем към страхотното табло за управление на Google Webmaster (инструменти за уеб администратори).
Тук се интересуваме от елемента „Ефективност на сайта“, в който е възможно да оценим скоростта на нашия интернет ресурс, както и да инсталираме разширениетоPage Speed, което ще анализира сайта и не само ще даде препоръки как да го ускорим, но и ще помогне малко за коригиране на ситуацията.
Между другото, успях да "разпръсна" блога си от 63 на 84 папагала от 100 възможни. И това не е всичко, може би ще успеете да се доближите до заветната стотина, аз също ще се опитам да направя това.
И така, изтеглете и инсталирайте Page Speed на вашия браузър, ще говоря за това, като използвам браузъра Google Chrome като пример. Между другото, Page Speed работи не само с Chrome, но и с браузъра Mozilla Firefox.
След като инсталирате Page Speed, трябва да отидете в настройките на Chrome и да изберете елемента „Инструменти за програмисти“, който се намира в раздела „Инструменти“.
Когато сайтът се отвори, щракнете върху бутона "Анализиране".
В резултат на анализа ще видите оценката на проверявания ресурс, както и препоръки за неговото ускоряване. Препоръките са разделени на три групи според степента на важност (приоритет):
- висок приоритет. Прилагането на тези препоръки ще ви даде максимална възможна печалба с минимални усилия, така че тези предложения трябва да бъдат приложени първо;
- среден приоритет. Изпълнение на тези предложениядава малка печалба или изисква значителни усилия;
- нисък приоритет. Трябва да го изпълните последно или можете изобщо да пренебрегнете тези препоръки, тъй като няма да получите видимо увеличение на скоростта.
В Page Speed има още един елемент „Вече е направено“, който изброява предложенията, които вече са завършени.
След това ще изброя основните чипове, водещи до ускоряването на всеки сайт, който успях да внедря в моя блог.
1. Разрешете компресията
Активирането на компресия, например с gzip, ще ви позволи значително да увеличите скоростта на изтегляне на вашия интернет ресурс. Това събитие обаче може значително да натовари хостинг сървъра. Това се дължи на факта, че компресията изисква определено количество ресурси, но количеството прехвърлени файлове ще намалее.
Активирането на gzip компресия на хостове може да варира.
Лично аз успях да активирам gzip, като добавих следния код към файла .htaccess:
2. Използвайте кеша на браузъра
Тук мисля, че няма нужда от обяснение. За целта е достатъчно да напишете следния код във файла .htaccess:
3. Оптимизиране на изображения
Наистина ми хареса този елемент и успях да компресирам размера на всички шаблонни изображения с около 50%. Разбира се, проблемът остана, но сега скоростта на зареждане на страницата се увеличи значително.
За да оптимизирате изображенията, щракнете върху предложените връзки и запазете оптимизираните изображения, като премахнете част от името. След това ги заменете в папката (обикновено "images") с вашата тема.
4. CSS оптимизация
По принцип цялата SCC оптимизация се свежда до премахване на интервали и поставяне на параметрите на всеки елемент на един ред, но това ви позволява да увеличите скоростта на изтеглянесайт.
CSS оптимизацията се прави много лесно. Следвайте предоставената връзка, в прозореца, който се отваря, копирайте целия код и заменете съдържанието на вашия файл Styles.css с него.
5. Осигурете изображения с правилни пропорции
Вече споменах тази точка в началото на тази публикация. Необходимо е да качите изображения в хостинга точно с размера, с който ще се показват на страниците на вашия интернет ресурс.
6. Минимизиране на Java Script
Приблизително същото като в случая с CSS, като щракнете върху връзката, ще получите съкратен код, който трябва да замени оригинала.
Съкратих кодовете в моя блог, но част от скриптовете се зареждат от други ресурси, така че забележката остава.
7. Посочете размерите на изображението
Тук говорим за това, че в кода е необходимо да посочите размера на изображенията, дори ако те имат желания размер и не се изисква мащабиране. Изпълнението на тази препоръка ви позволява да ускорите обработката на изображения и да не губите време за тяхното мащабиране и преначертаване.
Това е общо взето всичко, което исках да ти кажа. Не си губете времето иускорете сайта си !
Препоръчвам ви да прочетете следните публикации в блога:
С уважение, Александър Бобрин