Ultimate Guide to Web Optimization (Съвети и най-добри практики)

Уеб оптимизация е важна част от уеб разработката и поддръжката, но също така и нещо, което често се пренебрегва от уебмастърите. Помислете само за парите, които можете да спестите, и как това може потенциално да помогне за увеличаване на читателската аудитория и трафика, когато те са правилно извършени.

Ако досега не сте извършили никаква оптимизация на уебсайта си (или блога си) или просто сте любопитен как може да ускорите сайта си, моля, разгледайте този списък от съвети за оптимизиране, които сме събрали.

Разделихме нещата на 3 отделни секции за по-добра четливост - съответно оптимизация от страна на сървъра, оптимизиране на активите (което включва уеб компоненти като CSS, Javascript, изображения и др.) и платформа, където ще се съсредоточим Оптимизация на WordPress. В последния раздел, ние хвърляме в няколко връзки, които сме сметнали за полезни. Пълен списък след скок.

Оптимизация: от страна на сървъра

1. Изберете достоен уеб-домакин

   Вашият уеб хостинг акаунт няма пряка връзка с оптимизациите, които ще изпълните, но смятахме, че изборът на подходящия уеб хостинг акаунт е толкова важен, че решихме първо да го привлечем към вашето внимание. Хостинг акаунтът е основата на вашия уеб сайт / блог, където сигурността, достъпността (cPanel, FTP, SSH), стабилността на сървърите, цените и клиентската поддръжка играят важни роли. Трябва да се уверите, че сте в добри ръце.

   Препоръчителна литература: Как да изберем уеб хост от WikiHow е страхотна статия, която ви дава стъпки и съвети, които трябва да знаете, преди да закупите всеки уеб хостинг акаунт.

2. Активи на хоста отделно

   Когато споменем активи, имахме предвид такива като уеб компоненти снимки и статични скриптове които не изискват обработка от страна на сървъра. Това включва всички уеб графики, изображения, Javascripts, Cascading Style Sheets (CSS) и др. Хостинг услугите отделно не е задължително, но сме видели огромен резултат по отношение на стабилността на сървъра с това внедряване, когато блогът е имал скок на трафика.

   Препоръчително четене: Увеличаване на паралелните файлове за изтегляне в лентата на Carpool.

3. Компресия с GZip

   Накратко, съдържанието преминава от страна на сървъра към страна на клиента (обратна връзка), когато се прави HTTP заявка. Компресирането на съдържанието за изпращане значително намалява времето, необходимо за обработката на всяка заявка.

   GZip е един от най-добрите начини да направите това и той е различен според типа на сървърите, които използвате. Например, Apache 1.3 използва mod_zip, Apache 2.x използва mod_deflate и ето как можете да го направите Nginx. Ето някои наистина добри статии, които да ви запознаят със сървърните компресии:

   • Ускорете уеб сайта, като активирате Apache компресирането на файлове
   • Компресиране на уеб изход с помощта на mod_gzip и Apache
   • Как да оптимизирате сайта си с GZIP компресия
   • Компресиране от страна на сървъра за ASP

4. Намаляване на пренасочванията

   Уеб администраторите правят URL пренасочване (независимо дали е Javascript или META пренасочвания) през цялото време. Понякога целта му е да насочва потребителите от стара страница към нова или просто да насочва потребителите към правилната страница. Всяко пренасочване създава допълнителна HTTP заявка и RTT (двупосочно време). Колкото повече пренасочване имате, толкова по-бавен потребител ще стигне до целевата страница.

   Препоръчително четене: Избягвайте пренасочванията от Google Code ви дава добър преглед на въпроса. Статията също така препоръчва някои практически начини за намаляване на пренасочването, за да се увеличи скоростта на обслужване.

5. Намаляване на DNS заявките

   Според Yahoo! Блог на мрежата на програмистите, отнема около 20-120 милисекунди за DNS (система за имена на домейни) за разрешаване на IP адреса за дадено име на хост или име на домейн и браузърът не може да направи нищо, докато процесът не бъде завършен правилно.

   автор Стив Сюдерс Предполага се, че разделянето на тези компоненти в поне две, но не повече от четири имена на хостове намалява DNS заявките и позволява висококачествено паралелно изтегляне. Прочетете още на статията.

Оптимизация: Активите (CSS, Javascripts, Images)

1. Обединяване на множество Javascripts в едно

   Хора в rakaz.nl споделя как можете да комбинирате няколко Javascripts като:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   В един файл, като промените URL адреса на:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   чрез манипулиране на .htaccess и използване на PHP. Натисни тук за да прочетете повече.

2. Компресиране на JavaScript и CSS

   омаловажавам е приложение от PHP5, което може да комбинира няколко CSS и Javascript файлове, компресира съдържанието им (т.е. премахва ненужните интервали / коментари) и показва резултатите с HTTP кодиране (gzip / deflate) и заглавки, които позволяват оптимално клиентско кеширане.

   

   Компресирайте ги онлайн!Има и някои уеб услуги, които ви позволяват ръчно да компресирате вашите Javascripts и CSS файлове онлайн. Ето няколко неща, които познаваме:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS оптимизатор (CSS)

3. Персонализиране на изтичане / кеширане на заглавието

   Кредит: httpwatch

   Чрез използване на персонализирана заглавка Expiry, вашите уеб компоненти като изображения, статични файлове, CSS, Javascript прескочиха ненужната HTTP заявка, когато един и същ потребител презареди страницата за втори път. Той намалява необходимата пропускателна способност и определено помага за по-бързото обслужване на страницата.

   Препоръчителни показания:

   • Yahoo! Блог на разработчиците - Добавяне на заглавие за изтичане
   • Как да добавим добри изтичане на заглавията към изображения в Apache 1.3
   • Кеширане на HTTP
   • Caching Tutorial за уеб автори и уебмастъри

4. Активи на разтоварване

   Под разтоварване имаме предвид разделяне на Javascripts, изображения, CSS и статични файлове от главния сървър, където се хоства уебсайтът, и да се поставят на друг сървър или да се разчита на други уеб услуги. Видяхме значително подобрение тук през Hongkiat чрез разтоварване на активи на други уеб услуги, оставяйки сървъра основно да извършва PHP обработката. Ето някои предложения за онлайн услуги за незавършено зареждане:

   • Снимки: Flickr, Smugmug, Платени хостинг *
   • Javascripts: Google Ajax Library, Google App Engine, Платени хостинг *
   • Уеб формулярs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Проучване и анкети: SurveyMonkey, PollDaddy

   * Платени хостинг услуги - Платените услуги винаги имат по-добра надеждност и стабилност. Ако уебсайтът ви постоянно изисква активи, трябва да се уверите, че са в добри ръце. Ние препоръчваме Amazon S3 и Cloud Front.

5. Работа с уеб изображения

   Изображенията са важна част от уебсайта ви. Но ако те не се оптимизират правилно, те могат да се превърнат в тежест и в крайна сметка да използват непредсказуемо голямо количество честотни ленти на дневна база. Ето няколко най-добрите практики за оптимизиране на вашите изображения:

   • Оптимизиране на PNG изображенияХората в Smashing Magazine описват някои умни техники, които могат да ви помогнат да оптимизирате вашите PNG изображения.
   • Оптимизиране за уеб - Неща, които трябва да знаете (форматите) Научете повече за JPEG, GIF, PNG и как трябва да запазите изображенията си в мрежата.
   • Не мащабирайте изображенияВинаги практикувайте поставянето на широчина и височина за всяко изображение. Също така не намалявайте изображението само защото имате нужда от по-малка версия в мрежата. Например: Не насилвайте мащаба на изображението с размери 200 × 200 px до 50 × 50 пиксела за вашия уебсайт, като промените широчина и височина. Вземете вместо това 50 × 50 пиксела.

   Оптимизиране с уеб услуги и инструменти. Добра новина е, че не е необходимо да сте експерт в Photoshop, за да оптимизирате вашите изображения. Има много уеб услуги и инструменти, които да ви помогнат да си свършите работата.

   • Smush.itВероятно един от най-ефективните онлайн инструменти за оптимизиране на изображенията. Има дори WordPress плъгин за него!
   • JPEG и PNG StripperИнструмент за Windows за отстраняване / почистване / премахване на ненужни метаданни (боклуци) от JPG / JPEG / JFIF и PNG файлове.
   • Оптимизатор на изображенияПозволява ви лесно да оптимизирате своите GIF файлове, анимирани GIF файлове, jpgs и pngs, така че да се зареждат възможно най-бързо на сайта Ви, чрез Dynamic Drive
   • SuperGIFБез усилие правете всичките си GIF изображения и анимации по-малки.
   • Ето още нещо.

6. Работа с CSS

   Модерните уебсайтове използват CSS като основа на стила, както и външния вид. Не само CSS дава голяма гъвкавост на промените, но е и по-малка по отношение на необходимите кодове. Въпреки това, ако те са лошо кодирани, това може да бъде обратен ефект. Ето някои контролни списъци, или по-скоро ръководства, за да се уверите, че вашите CSS са правилно оптимизирани:

   • Поддържане на децата на елементите ви в съответствие с потомствотоКак да поддържате маркировката си чиста с CSS Selectors.
   • Дръжте CSS краткаКогато дават същия стил, кодовете са по-добри, колкото са по-кратки. Ето едно Кратко ръководство за CSS вероятно ще се нуждаете.
   • Използвайте CSS SpriteТехниката на CSS Sprite намалява HTTP заявката всеки път, когато се зарежда страница, като комбинира няколко (или всички) изображения заедно в един файл с изображение и контролира изхода с CSS фон-позиция атрибут. Ето някои полезни ръководства и техники за създаване на CSS Sprites:
     • Онлайн CSS Sprite Generator
     • Най-добър онлайн и офлайн CSS Sprites Generator
   • Използване на всяка декларация само веднъжКогато искате да оптимизирате вашите CSS файлове, една от най-мощните мерки, които можете да използвате, е да използвате всяка декларация само веднъж.
   • Намалете количеството CSS файловеПричината е проста, колкото повече CSS файлове имате, толкова повече HTTP заявка ще трябва да направите, когато се изисква уеб страница. Например, вместо да имате няколко CSS файла като:

     Можете да ги комбинирате в един единствен CSS:

   Препоръчителни показания:

   • Полезни инструменти за проверка, почистване и оптимизиране на CSS файлаНякои от полезните инструменти, които можете да използвате, за да оптимизирате своя CSS код, дори и да не знаете напълно кодирането на CSS.
   • 7 Принципа на чистия и оптимизиран CSS кодОптимизацията не е само минимизиране на размера на файла - тя също е свързана с организирането, безпроблемно и ефективно.
   • Най-добри практики за оптимизиране на CSSРазгледайте тази статия по-скоро като академично упражнение, а не като съвети за оптимизиране в реалния живот.

Оптимизация за WordPress

От време на време наблюдаваме, сравняваме и анализираме работата на нашия WordPress блог. Ако сайтът върви бавно, трябва да знаем защо. Ето някои основни промени, които сме направили и сме решили значително да увеличим скоростта на блога ви в WordPress.

1. Кеш Вашият Worpress блог

   WP-Cache е изключително ефективна система за кеширане на WordPress страници, за да ви направи сайта много по-бърз и отзивчив. Ние също така препоръчваме WP Супер кеш което подобрява от предишния споменат плъгин и също върши страхотна работа.

2. Деактивирайте и изтрийте неизползваните приставки

   Когато забележите, че блогът ви се зарежда бавно, вижте дали имате инсталирани много приставки. Може да са виновникът.

3. Премахване на ненужните PHP тагове

   Ако погледнете в изходните кодове на вашата тема, ще намерите много етикети като тези:

   Те могат да бъдат заменени с текстово съдържание, което не причинява натоварване на сървъра. Разгледайте Майкъл Мартин'с 13 Етикети за изтриване от вашия WordPress Bloг

Препоръчителни четения:

• 3 лесни начина за ускоряване на WordPressДжон Позадзидес споделя как блогът му плавно преминава през трафик на Digg.
• 13 Great WordPress Скоростни съвети и трикове за MAX Performance Ето няколко неща, които трябва да опитате, ако установите, че сайтът Ви в WordPress не работи толкова добре, колкото би могъл да се дължи на висок трафик или скрити проблеми, за които не знаете.
• 40 Съвети за оптимизиране на WordPressСъвети за оптимизиране на слайдовете. 40 съвета за 40 минути.

Последно, но не на последно място ...

Ето някои полезни уеб услуги и инструменти, които ви дават по-широка перспектива и по-добър анализ, за ​​да ви помогне в уеб оптимизацията.

• Yahoo! YSlow

  YSlow анализира уеб страници и предлага начини за подобряване на тяхната ефективност въз основа на набор от правила за висококачествени уеб страници. Това ви дава добра идея какво трябва да се направи, за да може сайтът да се зареди по-бързо.

  (Необходим е Firebug)

  

• Скорост на страниците

  Подобен на Yahoo! YSlow, Google Скорост на страницата е с отворен код Firebug добавка за оценка на представянето на сайта и как да ги подобрим. (Необходим е Firebug)

  

• Инструменти за Pingdom

  Инструменти за Pingdom вземете пълно натоварване на уебсайта си, включително всички обекти (изображения, CSS, JavaScript, RSS, Flash и фреймове / рамки) и ви показва общата статистика за заредената страница, като например общия брой обекти, общото време на зареждане и размера, включително всички обекти.

  

Препоръчителни показания:Ето още съвети и инструменти, които си струва да се проверят.

• Google Web Optimizer
• 15 Инструменти, които ви помагат да развивате по-бързи уеб страници
• 15 + съвета за ускоряване на уебсайта си и оптимизиране на вашия код!