Tämän sivun nopeus TTFB … LCP …
Uncategorized

Nopeuta Contact Form 7:ää

Selim Koç Lukuaika 4 min

Avoin lähdekoodi · Rufo

Contact Form 7.
Vain siellä, missä sitä tarvitaan.

Rufo poistaa automaattisesti Contact Form 7:n käyttämättömät CSS- ja JavaScript-tiedostot jokaiselta sivulta, jolla ei ole lomaketta. Maksuton WordPress.orgissa.

Ongelma

5 miljoonaa sivustoa.
Jokainen sivu hidastettuna.

Tiesitkö, että Contact Form 7 -lisäosaa, jonka on luonut Takayuki Miyoshi, käytetään yli 5 miljoonalla WordPress-sivustolla? Se on ollut vuosia WordPressin suosituin valinta yhteydenottolomakkeisiin. Siinä on paljon ominaisuuksia, ja sitä on todella helppo käyttää. Nopeuden kannalta siinä on kuitenkin iso ongelma. Contact Form 7 lisää CSS- ja JavaScript-tiedostonsa sivustosi jokaiselle sivulle, vaikka sivulla ei olisi lomaketta lainkaan. Eivätkä nämä tiedostot ole valtavia, mutta ne hidastavat sivustoasi silti. Se on iso asia, varsinkin kun kaikki yrittävät nopeuttaa sivustojaan.

Mitä Rufo tekee

Tiedostot vain siellä, missä lomakkeet ovat.

/contactSivulla on Contact Form 7 -lomake
CF7-tiedostot ladataan
/blog, /about, /shop …Sivulla ei ole lomaketta
Poistettu

Automaattinen. Ei mitään asetettavaa.

Asennus

Käytössä minuutissa.

  1. Kirjaudu WordPressin hallintapaneeliin.
  2. Avaa vasemmasta valikosta Lisäosat.
  3. Klikkaa Lisää uusi lisäosa.
  4. Hae nimellä ”Rufo”.
  5. Asenna ja ota käyttöön. Siinä kaikki.

Poista asennus poistamalla lisäosa käytöstä ja poistamalla se. Rufo ei käytä sivustosi tietokantaa eikä muita resursseja.

Opas

Koodi kiinnostaa enemmän? Näin se toimii.

Kaksi tapaa estää Contact Form 7:ää lataamasta tiedostojaan sivuille, joilla ei ole lomaketta.

No niin, ongelma on tunnistettu. Puhutaan ratkaisuista. Tässä kaksi vaihtoehtoa noiden tiedostojen poistamiseen sivuilta, joilla ei ole yhteydenottolomaketta:

Vaihtoehto 1: Oma PHP-koodi

Voit kirjoittaa omaa PHP-koodia ja lisätä sen teemasi functions.php-tiedostoon. Koodi kertoo WordPressille, ettei Contact Form 7:n tiedostoja ladata sivuilla, joilla ei ole yhteydenottolomaketta.

Mutta hetkinen! Jos teet muutoksia teemaan, joka saatetaan myöhemmin päivittää, kannattaa käyttää lapsiteemaa. Näin muutoksesi eivät katoa, kun pääteema päivittyy.

Tämän voi tehdä kahdella tavalla:

Vaihtoehto 1, A. Käytä sivun tarkkoja tietoja

Jos tiedät yhteydenottolomakkeen sisältävän sivun ID:n, voit käyttää tätä koodia. Se kertoo WordPressille, ettei Contact Form 7:n tiedostoja ladata sivulla, jolla on määritetty ID.

if ( !is_singular() && get_the_ID() != 65 ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

Jos sinulla on yhteydenottolomakkeita useilla sivuilla, joiden ID:t ovat 65 ja 99:

if ( !is_singular() && !in_array(get_the_ID(), [65,99]) ) {
        add_filter( 'wpcf7_load_js', '__return_false' ); 
        add_filter( 'wpcf7_load_css', '__return_false' );
}

Jos haluat käyttää sivun slugia ID:n sijaan.

if ( !is_singular() ) { 

    $page_slug = get_post_field( 'post_name', get_queried_object_id() );
    $excluded_slugs = ['example-page-slug-1', 'example-page-slug-2']; 
    
    // Add your excluded slugs here 
    if ( !in_array($page_slug, $excluded_slugs) ) { 
          add_filter( 'wpcf7_load_js', '__return_false' ); 
          add_filter( 'wpcf7_load_css', '__return_false' ); 
    } 
}

Vaihtoehto 1, B. Sivun sisällön tarkistaminen lomakkeen shortcoden varalta:

Tämä koodi tarkistaa, sisältääkö sivun sisältö Contact Form 7:n shortcoden. Jos shortcodea ei löydy, se estää CSS- ja JavaScript-tiedostojen latautumisen kyseisellä sivulla.

function globaliser_page_has_contact_form() 
     {

        global $post;

        if ( is_singular() ) 
        {
           $content = $post->post_content;   
           if ( has_shortcode( $content, 'contact-form-7' ) ) 
           {
             return true;
           }
        }
        return false;
     }


     if ( !globaliser_page_has_contact_form() ) 
     {
         add_filter( 'wpcf7_load_js', '__return_false' ); 
         add_filter( 'wpcf7_load_css', '__return_false' );
     }

Vaihtoehto 2: Rufo WordPress -lisäosa

Etkö halua sotkea koodia? Ei hätää! Vaihtoehtoisesti voit käyttää Rufo WordPress -lisäosaa. Tämä kätevä työkalu tunnistaa automaattisesti sivut, joilla ei ole yhteydenottolomaketta, ja poistaa tarpeettomat CSS- ja JavaScript-tiedostot. Se on yksinkertaisempi ja käyttäjäystävällisempi ratkaisu kuin oman koodin kirjoittaminen.

Se tekee saman asian kuin yllä oleva toinen menetelmä. Se poistaa automaattisesti CSS- ja JavaScript-tiedostot sivuilta, joilla ei ole yhteydenottolomaketta.

Miksi teimme tätä varten lisäosan sen sijaan, että olisimme vain käyttäneet koodia? Jotkut saattavat ehdottaa Contact Form 7 -lisäosan muokkaamista suoraan, mutta WordPressin maailmassa se ei ole hyvä ajatus.

Lisäksi tarkistimme verkosta, että muutkin ratkaisut ehdottavat koodin lisäämistä. Siksi teimme tämän lisäosan helpottamaan kaikkien elämää, etenkin niiden, jotka eivät ole teknisesti suuntautuneita.

Ja jos sinua kiinnostaa tehdä omia WordPress-lisäosia hienolla MVC-nimisellä arkkitehtuurilla, meillä on toinen lisäosa nimeltä ATA, joka auttaa siinä. Mutta se on jo toinen tarina!

Sinun menestystarinasi voi olla seuraava.

Kysyttävää? Autamme sinua tekemään oikean ratkaisun.

Seuraava menestystarina voi olla sinun.

Kysyttävää? Autamme sinua tekemään oikean valinnan.