CSS, JavaScript, blocarea pagina de descărcare în WordPress
În acest post voi presupune că sunteți familiarizați cu instrumentele Google pentru a optimiza viteza de încărcare de pagini de pe site-ul - PageSpeed Insights. Ascultați, acum tastați în site-ul dvs., faceți clic pe «Analize».
Bine, și acum - ce acest post?
Am observat că acest element este unul dintre cele mai greu de rezolvat (intensiv forța de muncă) și în aproape toate site-urile, chiar și pe foarte rapid, acesta este prezent.
Cum să-l stabilească în teorie:
Așa cum este, de asemenea, în cazul în practică, și, în acest caz particular - pentru site-uri pe WordPress?
1. Noi folosim scripturi dependența altele pe jQuery
În WordPress temă născocită în mod corespunzător toate fișierele pentru CSS și JS sunt conectate prin wp_head () și wp_footer () - adică,
iar la sfârșitul anului respectiv.De asemenea, fișierele au dependențe, care este, de exemplu, fancybox.js priza trebuie să fie conectat după jquery.js. ceea ce înseamnă că, în cazul în care biblioteca jQuery este în wp_footer (). FancyBox sondei nu poate intra în wp_head ().
Mutare jQuery la subsolul site-ului
Acest lucru se face foarte simplu - folosind) funcții (wp_deregister_script. wp_register_script (). wp_enqueue_script () și wp_enqueue_scripts cârlig (init cu cârlig uneori utilizate împreună cu is_admin ()). Tot ce trebuie să faceți este să inserați codul pentru a citi în fișierul functions.php al site-ului.
În același timp, munca noastră se termină cu JS crește cu siguranță în viteză va da mai multe script-uri și combinarea (de exemplu, trage-le pe toate pentru a înregistra și apoi pur și simplu conectați versiunea lor combinată) - dar Google acum nu mai este necesară.
2. Asociația CSS în WordPress
Amintiți-vă de captura de ecran la începutul articolului (10 blochează resursele CSS)? În cazul în care nu un astfel de număr de fișiere CSS, deoarece tema dezvoltator trebuie să înțeleagă ce să facă?
Răspunsul - de la plug-in-uri.
De exemplu, «Formular de contact 7" plug conectează foaie de stil propriu, și cu toate că, în sine, este mic, este mai bine în continuare, pentru a evita inutile HTTP-cereri.
Să ne pas cu pas cum să analizeze.
- Copiați conținutul stiluri de plug de masă și introduceți-l în sfârșitul fișierul principal stiluri - style.css.
- Verificarea, dacă datele sunt puse stiluri de link-uri relative la imagini, de exemplu URL-ul ( 'images / load.gif'). Dacă da, sau să le înlocuiască cu absolută sau transfera imaginile de la plug-in cu tema dosarului.
- Tu du-te în setările plugin și a vedea dacă este posibil, oriunde pentru a elimina o căpușă și nu conectați plugin-ul CSS. «Formular de contact 7" acest lucru nu este posibil, iar apoi vom trece la pasul următor.
- Chop off fișierelor prin functions.php. Pentru stiluri «Formular de contact 7" cod va fi după cum urmează:
Uneori, folosind tag-uri condiționale fișiere Plugin (cum ar fi CSS, JS) dezactiva numai acele pagini care nu sunt în uz.
Ok, cu «Formular de contact 7" a dat seama cum să recunoască și fișierele CSS ID-ul la alte plugin-uri?
Da descoperi cu ușurință codul sursă al paginii și vom vedea acolo o imagine similară:
Misa Rudrastyh
Mai multe detalii despre accelerarea site-ului
- Convenabil de optimizare CSS pentru a lucra în fiecare zi, propriul meu instrument gratuit pentru a optimiza codul cu un minim de configurare și interfață intuitivă.
- Triunghiuri, săgeți, pătrate și lămâie folosind proprietățile de frontieră CSS border-radius și folosind proprietatea de frontieră CSS și proprietatea CSS3 border-radius, vă voi arăta cum puteți crea săgeți, triunghiuri și cercuri fără utilizarea de imagini.
- Ce este CSS-sprite, și cum funcționează? Două scop principal CSS-sprite. Care este principala eroare nubo-DTP?