Wsparcie » Spotkania społeczności WordPressa » Jak zoptymalizować pod seo film YouTube wrzucony na wordpressa?

  • Witam
    Potrzebuję pomocy przy optymalizacji wideo z YouTube wrzuconego na wordpress
    Strasznie spowalnia stronę
    Czy jest jakiś sposób aby opóźnić wczytywanie biblioteki Youtube?

    Strona przy której potrzebuję pomocy: [zaloguj się aby zobaczyć ten link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Według Mozilli, znaczniki iframe zawsze będą spowalniać stronę, gdyż jako element osadzony (tzw. browser context) do obsługi wymaga zwiększenia pamięci i innych zasobów komputera. Każda dodatkowa rama będzie pochłaniała kolejne zasoby, dlatego też wczytywanie się strony będzie spowolnione.

    Według mnie, jedynym sposobem na „optymalizację” jest NieWczytywaie tych ramek a zastąpienie ich czymś innym np. wczytywanie Tylko miniaturki (obrazka) zamiast całej strony (stron!) z YouTube.

    Miałem kiedyś podobny problem i poradziłem sobie z nim w ten właśnie sposób.

    Nie osadzam filmu poprzez wklejenie do edytora linku z YouTube (WordPress automatycznie generuje ramke) tylko używam własnego znacznika [youtube].

    Dzięki temu mam pełną kontrolę nad tym co i kiedy się wczytuje.

    Aby później odtworzyć film, wystarczy kliknąć tą miniaturke.
    Miniatura sprzężona jest z lightbox, film a więc ta ramka (iframe) wczytywany jest tylko wtedy, gdy gdy chcemy go odtworzyć.

    Podam Ci gotową funkcje jakiej używam ja:

    /*
    Plugin Name: Znacznik YouTube
    Plugin URI: https://www.facebook.com/WPSolucje/
    Description: Dodawanie filmu z YouTube. Wstawienie znacznika [youtube] spowoduje wygenerowanie kontenera dla miniaturki filmu z YouTube, link bezpośredni i krótki opis. 
    Version: 1.0
    Author: Paweł Nowak
    Author URI: https://czystespalanie.info
    */
    
    add_shortcode( 'youtube', 'czystespalanie__youtube' );
    function czystespalanie__youtube( $atts, $content = null ){
    
    	wp_enqueue_script('lity');
    	wp_enqueue_style('lity');
    
    	$url = get_stylesheet_directory_uri();
    
    	    $a = shortcode_atts( array(
            'link' => '',
    				'float'=> ''
    
        ), $atts );
    
    	$float = ( $a['float'] ) ? ' float-' . $a['float'] : '';
    	);
    
    	$film_id = preg_match( "/(?<=v=|v\/|vi=|vi\/|youtu.be\/)[a-zA-Z0-9_-]{11}/", $a['link'], $match );
    
    	#sprawdzam czy film jest dostępny na podstawie miniaturki
    	$headers = @get_headers( 'https://img.youtube.com/vi/' . $match[0] . '/mqdefault.jpg' );
    
    	if ( strpos( $headers[0], '200') ) {
    	$img = '<img src="' . $url . '/images/play.png" class="card-title">';
    	} else {
    	$img = '<span class="badge badge-danger ml-1 mt-1 p-1">⚠ Film niedostępny</span>';
    	}
    
    	$output = '<figure class="col-6 col-sm-4 col-md-3 ' . esc_attr( $float ) . '">' . "\r";
    	$output .= '<div class="shadow card mb-4 box-shadow rounded-0">' . "\r";;
    	$output .= '<a href="' . esc_url( $a['link'] ) . '" data-lity><img class="card-img-top img-fluid rounded-0"  src="https://img.youtube.com/vi/' . $match[0] . '/mqdefault.jpg"/></a>' . "\r";;
    	$output .= '<div class="card-img-overlay p-0 '. esc_attr( ( strpos( $headers[0], '200') ) ? '' : ' w-100 text-center' ) . '">';
    	$output .= '<a href="' . esc_url( $a['link'] ) .'" data-lity>' . $img . '</a>' . "\r";;
    	$output .= '</div>' . "\r";;
    	$output .= '<figcaption class="card-body text-center bg-light py-2 px-2">' . "\r";;
    	$output .= '<h6 class="h6 card-text font-weight-normal">' . trim( $content ) . '<a title="Link bezpośredni do YouTube" target="_blank" class="external-link float-right mt-3 pt-2" href="' . esc_url( $a['link'] ) . '"></a></h6>' . "\r";;
    	$output .= '</figcaption>' . "\r";;
    	$output .= '</div>' . "\r";;
    	$output .= '</figure>' . "\r";;
    
    	return $output;
    }

    Kod wklejam też na Pastebin.

    Tą funkcję należy wstawić do pliku functions.php.
    Należy również wcześniej zarejestrować skrypt i styl Lity, który możesz pobrać z tej strony.

    Ja użyłem Lity, ale ty równie dobrze możesz wykorzystać inny Lightbox, taki który podoba się tobie.

    Przykład użycia możesz zobaczyć na tej stronie.

    Kod HTML i CSS jest dostosowany do biblioteki Bootstrap 4. Jeżeli nie używasz tej biblioteki na swojej stronie, dostosuj kod pod własny styl.

    Jak używać znacznika? Przykład:

    [youtube link="https://www.youtube.com/watch?v=SXj-rc2igoA"] Blue flame rocket stove. Wzorcowy płomień spalania pelletu (biomasy) [/youtube]

    Pozdrawiam.

    @mariuszf50 mój poprzedni wpis trafił do moderacji. Pewnie za dużo linków było. Musisz zaczekać, aż moderator go zatwierdzi. Tam masz pełną odpowiedź. Nie będę wklejał ponownie, żeby nie powielać treści.

    Pozdrawiam 🙂

Viewing 2 replies - 1 through 2 (of 2 total)