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 http://optimizilla.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.

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 (http://bit.ly/google-seo-starter). 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.