3 Things to Make Your Vue.js App Search Engine Friendly
Most of my web applications exist within company/government intranets but a recent Vue.js project required that it was search engine friendly. I was surprised to learn that many search engines, including Google, still treat JavaScript rendered applications as a second-class citizen when it comes to indexing. The problem is that while indexing your site, Google offloads the rendering of your SPA until resources are available. Though most of this article will apply to other search engines, I will reference Google a lot considering they are the king of search. They also provide a ton of great resources to help the SEO community in understanding their rankings.
1. Use Prerender.io
Because Google treats a JavaScript site differently, it doesn’t always load all of the resources for your Vue.js app. And though Google does better than other search engines, they won’t do a great job of telling you why.
There are plenty of options to deal with this, even some targeted just for Vue.js applications. But if you’re like me, you don’t want to add any large dependencies to your app unless you absolutely have no other choice. In that case, you’re better off delivering search engine crawlers a pre-rendered version of your app. Even Google suggests going this route. In general, pre-rendering consists of loading your app in a headless browser and then saving the final HTML once the route “looks” like it’s done loading. The benefit of pre-rendering your app for consumption by crawlers is that they’ll see your site as if it were a plain old HTML page which is much faster for them to process.
You could pre-render your Vue.js app yourself at build time with prerender-spa-plugin, but that’s not a great option for apps with a large number of routes that need regular updates.
The best option in my opinion is using a service like prerender.io. Using the configs they provide, you forward all requests from the various crawlers to their site. From there, they will pre-render the route for you and cache it for later use. They will also automatically recache these URLs after a certain period of time that you designate. Prerender.io is free even for decent sized sites (up to 250 pages at the time of writing). The rates for larger sites are very reasonable or you could run the same technology on your server for free.
2. Make Your Vue.js App Load Fast
How many seconds does it take for you to give up on a site loading? In my case, I wait about 2-3 seconds on my phone before my finger starts drifting towards the close button. I’m not alone. Google knows this about users and is increasingly incorporating page speed when determining rank.
Test Your App
Do yourself a favor and test your site here before and after making any of the adjustments below. That page will also give plenty of other suggestions on how to improve your Vue.js app’s speed. Below are the improvements that helped me the most. They are the result of both PageSpeed Insights suggestions as well as a greater awareness of my Vue.js bundle size.
Don’t Use Bloated Libraries
Prior to testing my Vue.js apps for speed, I was sold on using component libraries to help with development. Unfortunately, Vue.js component plugins like BootstrapVue and Vuetify massively increased my built app even when only loading the components I absolutely needed. In my case, I was much better off just using popular CSS libraries paired with custom components when necessary. It was slightly more work but a huge improvement in my page load times.
Use a CDN for Images
If you use anything more than zero images per page and aren’t optimizing your images for load time, I promise you this will be your biggest issue. And this goes for any site, not just Vue.js apps. I would say you really only have two options to fix this. One option is to use some online or desktop image compression software anytime you add an image to your app. This is actually a pretty good option for a small site (i.e. no blogs or ecommerce sites). For anything more you’re better off uploading your images to an image management service like Cloudinary and letting them handle the hosting and optimization. It’s pretty easy to stay in their free tier and their awesome auto-optimization tools make even the paid tiers more than worth it as your traffic grows (pricing is mainly based on storage and bandwidth usage).
Enable Compression On Your Web Server
Compressing the resources you return from your server can significantly increase the speed of your app. This is especially true for large text-like files such as JavaScript.
Enabling compression on your web server takes two forms. First, you will want to create compressed versions of your application files whenever you build your app. Second, you’ll want to allow your web server to compress any files that aren’t already compressed by your build process.
Compressing your Vue.js app files during build time is as easy as installing the compression-webpack-plugin in your app and configuring it with something like this in your Vue config file:
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins.push(...[
new CompressionPlugin()
])
}
}
}This default configuration will put compressed versions of your apps files alongside the non-compressed versions for your web server to use. See your web server’s docs on how to get it to host these compressed files. If you use nginx, you’re in luck because the following configuration is what I’ve used to do this as well as compress any other files without a pre-compressed version.
server {
# Basic server config...
gzip_static on; # Hosts pre-compressed files ending in ".gz"
gzip on; # Allows compressing other files
gzip_min_length 1000;
gzip_proxied any;
gzip_types text/plain application/xml application/json;
# Location blocks, etc...
}Note: in the case of nginx, you might have to do more work to get the gzip_static directive to work depending on how you install it.
3. Use Webmaster Tools
This last point is basically to make sure that the search engines your targeting are actually indexing your Vue.js app. This seems like an easy step and it is but that makes it no less important. At the very least, make sure you register with each search engine webmaster toolset and submit your site (the process differs for each) so they know your site exists.
Many of these tools will also show you what they’ve crawled on your site and any issues they ran into. I’ll be honest though that other than with Google’s Search Console, you’re going to be disappointed with what you find. Luckily, many of the issues other search engines have with your site will also affect Google.
Going Forward
Remember that getting your Vue.js app to rank in any search engine isn’t a one time process. As you can probably tell, much of the advice above needs to be kept in mind as you continue to grow your app and your traffic.
If you only take one thing away from this article, it would be to regularly check your site on both:
