YouTube Embed and PageSpeed Rating

SEO company calls, says my business website is slow and needs to be improved. I know where this going because I've had similar calls in the past, but I got time today so I go along with it.

First guy passes the phone to his manager. (flag) Manager rambles on about how my site is slow, they'll create a 8 page website for my business for $600, offer free lifetime maintenance (flag), and improve the SEO. Dude sends links of his previous work.

I run the sites he sent though PageSpeed Insights. Both come back with a lower grade on desktop and mobile than my site. I tell him his sites have lower scores than mine. Tries to tell me that customers care more about appearance than speed. (flag) I ask how he's going to improve my website SEO with only 8 pages when I have over 60, he talks about the site is slow. (flag)

Now he did have a point about the images taking too long to load because PageSpeed Insights confirmed that. As for the rest, thanks for the free suggestions.

During this back and forth, he sent me a screenshot of the website because he said some of the images did not load. Come to find out, what he thought was images that were not loading, were in fact placeholder images for some of the services listed on the website. Where he really messed up though was that he sent a screenshot of the whole window that he had. So I saw the 7 or so tabs on Yelp that he had pulled up, with the last tab being that of my business Yelp listing. Not to mention, doing a time zone comparison, he also was not located in the US.

Images

What I decided to do with the images is to create a script that will batch process the images. That way if I add new images to the folder in the future, I don't have to pick and choose them. I can re-run the script and it will update the images as necessary.

For those that are interested in the script, here it is:

#!/bin/bash

# remove existing thumbnail images so that they are not reprocessed
rm *thumb.jpg

for file in *.jpg
do
    # resize each image ending with "jpg"
    convert -thumbnail 300 "${file}" "${file}.thumb.jpg"  
done 

# rename thumbnail images so that the extension is not included twice in file name
rename 's/\.jpg\.thumb/\.thumb/g' *thumb.jpg 

The script is designed to be ran on Linux. If you do not have convert installed, then on a Debian based system, you can run the command

sudo apt-get install imagemagick

and the software will install. Then you can run the convert command. After doing some research on the command, I found that it does have a number of uses and features including creating thumbnails, reducing image sizes, and reducing image quality.

PageSpeed Insights

I looked at my PageSpeed score when comparing it to the other websites that the caller had listed. Noticed that some pages were way lower than what I thought that they should be. Decided to take some time and to investigate why that was the case.

The most obvious was some of the images were unnecessarily big. However, the other thing that I least expected was...

YouTube Embed

Yes the YouTube embedded videos caused significant page load time, which resulted in the PageSpeed score dropping. Apparently some others had found this out some time ago and blogged about it, but this was my first hearing about it playing a factor in low scores.

When looking at the suggestion, it mentioned that the 3rd party files were taking long times to load. Several of the entries pointed back to JavaScript files that were being called from YouTube.

What I decided to do as an immediate fix was to create an image of what the embedded player looked like on my website. Then making that image part of a link that would take you to the video. Ran the PageSpeed Insights on the page again and it went from a 55 score on mobile to a 86 score on mobile. That is a massive jump in score.

I continued to research the matter further and found that others had found this out already. What some had attempted to do was to have a div on the page load the thumbnail of the video from YouTube along with some CSS to display a video icon over the image. Then once the image was clicked, some JavaScript would take over and replace the image with the iframe player. Then if the user clicked again, the video would then play.

Having to click the video twice to get it to play is not very friendly when it comes to the user experience of the website. Rather have them click the photo and it go to the page and play the video at the same time.

Conclusion

Will continue working on optimizing the website. That way when those SEO companies go down the list of companies that they find on Yelp in the future, they'll hopefully hesitate in calling because they see that it is already optimized for speed.