Code snippets, der gør dit Elementor-website hurtigere

Hastighedsoptimering

Code snippets, der gør dit Elementor-website hurtigere

I denne artikel får du de koder, som jeg bruger på alle mine kunders WordPress hjemmesider, når de skal hastighedsoptimeres. Gør din hjemmeside hurtigere med kun ganske få klik og styrk jeres SEO.

Når man har et WordPress website, har man bygget sin hjemmeside op omkring et tema og en masse plugins. Det gør det lettere at designe, men det gør også, at alting går lidt langsommere.

Der er imidlertid mange ting, vi kan gøre, for alligevel at få en hurtig hjemmeside:

Optimere vores billeder
Uploade custom fonts direkte til vores mediebibliotek
Konfigurere Seraphinite Accelerators cacheplugin
Rydde op i vores database
Tilføje nedenstående snippets

Hvad er en snippet?

En snippet er et lille stykke PHP-kode, som du kan tilføje til dit WordPress-website ved hjælp af det plugin, der hedder “Code snippets.”

Det er rigtig smart, fordi på den måde slipper vi for at skulle tilføje kode direkte til vores functions.php-fil, som er tilknyttet vores tema. Af samme årsag slipper vi også for at have en child tema, som ligger og fylder på vores server, og derfor er Code snippets-pluginnet ganske enkelt genialt!

Installer Code Snippets pluginnet

Gå til til WordPress Dashboard -> Plugins -> Tilføj nyt. Søg på “Code snippets.” Tilføj og aktiver det.

De bedste snippets

Når du har installeret Code Snippets-pluginnet, kan du begynde at tilføje og aktivere snippets. Her bør du overveje at tilføje disse herunder for at gøre din hjemmeside hurtigere:

Omdan alle dine uploadede billeder til .webp-formater
Noget af det som fylder allermest på din hjemmeside er dine billeder og videoer. Udover du bør sørge for ikke at have en masse billeder liggende i dit WordPress mediebibliotek, som ikke bliver brugt på selve hjemmesiden, så bør du også sørge for, at alle dine billeder bliver omkonverteret til webp-formater, som er det billedformat, der fylder suverænt mindst, mens jpg-filer og png-filer fylder rigtig meget. Tilføj, gem og aktiver nedenstånede snippet for at sikre, at alle de billeder, du FREMOVER uploader, automatisk bliver omkonverteret til webp-formater


add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );

function wpturbo_handle_upload_convert_to_webp( $upload ) {
    if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
        $file_path = $upload['file'];

        // Check if ImageMagick or GD is available
        if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
            $image_editor = wp_get_image_editor( $file_path );
            if ( ! is_wp_error( $image_editor ) ) {
                $file_info = pathinfo( $file_path );
                $dirname   = $file_info['dirname'];
                $filename  = $file_info['filename'];

                // Create a new file path for the WebP image
                $new_file_path = $dirname . '/' . $filename . '.webp';

                // Attempt to save the image in WebP format
                $saved_image = $image_editor->save( $new_file_path, 'image/webp' );
                if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
                    // Success: replace the uploaded image with the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url']  = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
                    $upload['type'] = 'image/webp';

                    // Optionally remove the original image
                    @unlink( $file_path );
                }
            }
        }
    }

    return $upload;
}

Stop lazy load af billeder
Du vil mange steder blive anbefalet at lazy loade dine billeder, for at gøre din hjemmeside hurtigere. Det skal du for alt i verden ikke gøre! Vi kan gøre din hjemmeside meget hurtigere, hvis du stopper lazy load med følgende kode:


add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Giv alle billederne en eksplicit højde og bredde
Et vigtigt ranking parameter er, at alle dine billeder har en eksplicit højde og bredde. Tilføj det vha. følgende kode:


add_filter( 'the_content', 'add_image_dimensions' );

function add_image_dimensions( $content ) {

    preg_match_all( '/<img[^>]+>/i', $content, $images);

    if (count($images) < 1)
        return $content;

    foreach ($images[0] as $image) {
        preg_match_all( '/(alt|title|src|width|class|id|height)=("[^"]*")/i', $image, $img );

        if ( !in_array( 'src', $img[1] ) )
            continue;

        if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
            $src = $img[2][ array_search('src', $img[1]) ];
            $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][ array_search('alt', $img[1]) ] : '';
            $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][ array_search('title', $img[1]) ] : '';
            $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][ array_search('class', $img[1]) ] : '';
            $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][ array_search('id', $img[1]) ] : '';
            list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );

            $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
            $content = str_replace($image, $image_tag, $content);
        }
    }

    return $content;
}

Reducer antal versioner af det samme billede
Når du uploader et billede til din hjemmeside, gemmer WordPress faktisk mindst fem versioner af det samme billede på din server. Det fylder, og du bør slet ikke bruge billeder i andre størrelser end originalstørrelsen. Tilføj nedenstående kode, sådan WordPress kun gemmer originalversionen af billedet sammen med en thumpnail version på 150x150px


function limit_image_sizes($sizes) {
    // Keep only the thumbnail size
    return array(
        'thumbnail' => $sizes['thumbnail']
    );
}
add_filter('intermediate_image_sizes_advanced', 'limit_image_sizes');

function set_thumbnail_size() {
    // Set the thumbnail size to 150x150
    update_option('thumbnail_size_w', 150);
    update_option('thumbnail_size_h', 150);
    update_option('thumbnail_crop', 1); // 1 for hard crop, 0 for soft crop
}
add_action('admin_init', 'set_thumbnail_size');

// Remove the unnecessary regenerate_thumbnails function as the thumbnail is already handled

Reducer kopierne af din hjemmeside
De fleste page-buildere, herunder Elementor, har en rigtig fin indbygget “Go back in history”-funktion, som gør, at hvis du fortryder nogle af dine ændringer, kan du altid gendanne en tidligere gemt version af din side. Det er selvfølgelig rigtig brugbart, mens man designer, men det kan også gøre din hjemmeside rigtig langsom, hvis du har redigeret din side hundredvis af gange. Alle disse versioner bliver nemlig gemt, og de skal loade færdig på serveren, før dine brugere kan se den seneste gemte udgave af din side. Derfor bør du reducere kopierne af din hjemmeside, som er gemt internt på din server, og det kan du gøre med denne code snippet:


define('WP_POST_REVISIONS', 3);

Fjern Google Fonts
Stop din hjemmeside fra at hente fonts direkte fra Google. Det gør din hjemmeside langsommere, og er muligvis i strid med europæiske GDPR-regler. Derfor bør du uploade dine egne custom fonts til WordPress, og fjerne Google fonts helt fra dit website ved at tilføje, gemme og aktivere denne kode vha. Code Snippets-pluginnet:


 add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

Gør tekst synlig før alt andet
Når brugere klikker ind på din hjemmeside, vil du gerne have, at al din tekst bliver synlig, mens billederne venter på at blive loadet. På den måde har brugeren en fornemmelse af, at siden er færdigloadet, inden den faktisk er det. Tilføj, gem og aktiver nedenstånede code snippet, for at få den effekt:


add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
}, 10, 3 );

Fjern Gutenberg CSS
Hvis du bruger en pagebuilder som f.eks. Elementor, bør du tilføje en kode, der fjerner al Gutenberg CSS, da det betragteligt vil reducere antallet af HTTP-anmodninger, og dermed gøre din hjemmeside hurtigere. Indsæt, gem og aktiver nedenstående snippet:


//Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css(){
 wp_dequeue_style( 'wp-block-library' );
 wp_dequeue_style( 'wp-block-library-theme' );
}
add_action( 'wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css' );

Reducer ubrugt Javascript
Styles og scripts kan få din hjemmeside til at se rigtig flot ud, men det kan også gøre den rigtig langsom, hvis alt for meget ubrugt javascript nede i bunden af siden skal loades, før man kan se toppen af skærmen. Reducer ubrugt Javscript med denne kode:


 function wp_remove_scripts() {
// check if user is admin
 if (current_user_can( 'update_core' )) {
            return;
        } 
 else {
    // Check for the page you want to target
    if ( is_page( 'Forside' ) ) {
        // Remove Scripts
  wp_dequeue_style( 'jquery-ui-core' );
     }
 }
}
add_action( 'wp_enqueue_scripts', 'wp_remove_scripts', 99 );

“Ryd Cache”-knap i din WordPress Menu
Normalt vil du skulle bruge et cache plugin til at rydde cachen på din hjemmeside, men sådan en knap kan du også få med denne simple kode:


 add_action( 'admin_bar_menu', 'add_purge_cache_button', 999 );

function add_purge_cache_button( $wp_admin_bar ) {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }

    $args = array(
        'id'    => 'purge-cache',
        'title' => 'Purge Cache',
        'href'  => '#',
        'meta'  => array( 'class' => 'purge-cache' )
    );
    $wp_admin_bar->add_node( $args );
}

add_action( 'admin_footer', 'add_purge_cache_script' );

function add_purge_cache_script() {
    if ( ! current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <script>
    jQuery(document).ready(function($) {
        $('#wp-admin-bar-purge-cache').click(function() {
            if (confirm('Are you sure you want to purge the cache?')) {
                $.ajax({
                    url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                    data: {
                        action: 'purge_cache',
                    },
                    success: function() {
                        alert('Cache purged successfully!');
                    },
                    error: function() {
                        alert('An error occurred while purging the cache.');
                    }
                });
            }
        });
    });
    </script>
    <?php
}

add_action( 'wp_ajax_purge_cache', 'purge_cache_callback' );

function purge_cache_callback() {
    global $wp_object_cache;
    if ( ! current_user_can( 'manage_options' ) ) {
        wp_die();
    }

    wp_cache_flush();

    wp_die();
}

– DEL DENNE ARTIKEL –