A note from the authors: Some of the information and instructions in this book are now out of date because of changes to Hugo and the blogdown package. If you have suggestions for improving this book, please file an issue in our GitHub repository. Thanks for your patience while we work to update the book, and please stay tuned for the revised version!

In the meantime, you can find an introduction to the changes and new features in the v1.0 release blog post and this "Up & running with blogdown in 2021" blog post.

— Yihui, Amber, & Alison

B.4 Useful resources

B.4.1 File optimization

Although static websites are fast in general, you can certainly further optimize them. You may search for “CSS and JavaScript minifier,” and these tools can compress your CSS and JavaScript files, so that they can be loaded faster. Since there are a lot of tools, I will not recommend any here.

You can also optimize images on your website. I frequently use a command-line tool named optipng to optimize PNG images. It is a lossless optimizer, meaning that it reduces the file size of a PNG image without loss of quality. From my experience, it works very well on PNG images generated from R, and can reduce the file size by at least 30% (sometimes even more than 50%). Personally I also use online tools like https://imagecompressor.com to optimize PNG and JPEG images. For GIF images, I often use https://ezgif.com/optimize to reduce the file sizes if they are too big.

Note that Netlify has provided the optimization features on the server side for free at the moment, so you may just want to enable them there instead of doing all the hard work by yourself.

If you prefer optimizing images using R packages instead of online tools, you may consider using the functions xfun::tinify() and xfun::shrink_images(). The former compresses PNG/JPEG/WebP images using TinyPNG (https://tinypng.com), and the latter shrinks images to a maximum width (800px by default) using the magick package. If you want to use the TinyPNG service, you will need an API key, and I also recommend that you set a global option in your .Rprofile to avoid unnecessary API calls to TinyPNG:

# create a tinify history file if it does not exist
dir.create("blogdown", showWarnings = FALSE)
file.create("blogdown/tinify.txt")
# set the global option
options(xfun.tinify.history = normalizePath("blogdown/tinify.txt"))

See the help page ?xfun::tinify for more information. If you want to both compress images and shrink them, you may call xfun::shrink_images(tinify = TRUE).

B.4.2 Helping people find your site

Once your site is up and running, you probably want people to find it. SEO — Search Engine Optimization — is the art of making a website easy for search engines like Google to understand. And, hopefully, if the search engine knows what you are writing about, it will present links to your site high in results when someone searches for topics you cover.

Entire books have been written about SEO, not to mention the many companies that are in the business of offering (paid) technical and strategic advice to help get sites atop search-engine rankings. If you are interested in finding out more, a good place to start is the Google Search Engine Optimization Starter Guide (https://developers.google.com/search/docs/beginner/seo-starter-guide). Below are a few key points:

  1. The title that you select for each page and post is a very important signal to Google and other search engines telling them what that page is about.

  2. Description tags are also critical to explain what a page is about. In HTML documents, description tags are one way to provide metadata about the page. Using blogdown, the description may end up as text under the page title in a search-engine result. If your page’s YAML does not include a description, you can add one like description: "A brief description of this page."; the HTML source of the rendered page would have a <meta> tag in <head> like <meta name="description" content="A brief description of this page.">. Not all themes support adding the description to your HTML page (although they should!)

  3. URL structure also matters. You want your post’s slug to have informative keywords, which gives another signal of what the page is about. Have a post with interesting things to do in San Francisco? san-francisco-events-calendar might be a better slug than my-guide-to-fun-things-to-do.