Introduction

Hey everyone, I hope you’re all doing well. I know I haven’t made much of a public appearance here recently so I wanted to give a quick update on some things. Believe it or not, I’ve been really busy working on my website, it’s just all been a lot of background work. While it may be lacking recent content, my website should begin to be a lot more user-friendly, it should run faster and smoother, and have additional features added.

Believe it or not, a large reason I started this website wasn’t to blog about my life or travels or music, although that was definitely a factor. Rather, I was really interested in the technical side of everything involved; web hosting and web servers, learning a content management system (CMS) and the languages behind it (for WordPress, that’s PHP and MySQL) as well as HTML and CSS, and also learning general practices for web development . So I hope you’re understanding when I say that sometimes I may appear to disappear but I’m hard at work learning a lot of technical skills and thoroughly enjoying it. It’s been a priority in my life for a while so I’m extremely grateful I’m finding the time to learn and play with everything right now.

Technical Improvements

If you’re not a tech-savvy person, you don’t run your own blog, or you’re not too interested in the recent changes I made, skip this section and go to the “A Plan for the Future” section (or just click here). I will warn you this is quite a lengthy post, so skipping some or all of this is absolutely acceptable! This section is more so to keep a record of some of the changes I made and resources I used for anyone else who might be going through the same things, as well as for myself in the future sometime.

One big feature of this last round of updates was improving my SEO. For this unfamiliar with the term, it stands for Search Engine Optimization, and it basically is the factor that determines how high your website ranks on search engines like Google, Bing, etc. SEO is something that you want to improve, and in this digital day and age of internet marketing, SEO is king.

For someone that just runs a personal blog about their travels, SEO might not be important, but it’s something I wanted to focus on. While my website mainly holds posts right now about my travels and music, my original goal for this website was that it be more than a blog, but rather a personal webpage that hosts a blog as well as other content. Some of this other content I want to include includes guides and posts on life in Madrid (how to get a metro abono, best bars in Madrid, tips on the apartment search), as well as other posts on a variety of other topics that would benefit from appearing higher in search engines.

SEO was a bit of a Pandora’s Box for me, as I initially only wanted to change one thing but ended up doing a lot more than initially intended (aka a normal day as a developer). I started off my journey using this website as a good guide. The site recommends using serps.com to assess your current rankings, but as I lack many of the aforementioned content I didn’t deem this necessary. I then decided to focus on two main categories: page speed and lack of good SEO metadata.

1. Page Speed

When I ran a test of my website on Google’s PageSpeed Insights I initially had a score of 14/100. Not good. As the article I linked previously mentions, the speed of your webpage is a huge factor on your SEO score (at least for Google). If you have a webpage that’s extremely slow and preforms poorly it’ll get heavily penalized and appear quite far down on Google search results. I found Google’s PageSpeed Insights tool to be very helpful in this step with recommending what exact steps I needed to take and detailed guides to use, but I also used GTmetrix and and WebPagetest for second opinions and more detailed data.

I initially did a lot of basic speed improvements by installing the WordPress Plugin W3 Total Cache, which is extremely advanced and has hundreds of options. It’s totally free and is extremely popular as the best caching plugin available. Besides a couple specific options I configured manually (that I’ll mention below) I just followed this guide on the best default options for W3. I differed from the guide on a few things that were more specific to my site, and if you don’t like that guide you can always good for your own W3 setup guide.

After using W3 for some higher-level issues, I found my more serious issues centered on two categories which I’ll break down now.

1.1. Image Optimization

The largest issue I was having is that my images were not optimized – at all – and that’s a big no-no for web development apparently! What this means is that if you have images from the internet, your phone, camera, wherever, and you directly upload them onto your website it’ll likely cause drastic slowdowns. Unfortunately I didn’t save a copy of my results from before so I don’t have the exact numbers, but the amount of time the web server was taking to download the images was insane.

The first step is to make sure any images you upload are saved with the right resolution and file type. File type essentially boils down to using .jpg or .png, and if you Google the differences between them you should be able to see the differences and typical use of both. Resolution, on the other hand, means that you aren’t uploading images that are 5184×3456 when they’re only being displayed at 790×527 pixels. Higher resolution is nice in photography and printing images, but on web design there’s a limit to what resolution you want. The higher the resolution the larger the file size, which equates to longer load times, especially on slower devices (smart phones or your grandma’s computer).

Modern monitors are typically 1920×1080 pixels (I’m ignoring higher resolutions like 4k for the sake of simplicity) and the amount of that screen that’s actually your website inside a browser is much smaller. It differs between each website/platform/theme, but for example, my content area on my website is only 790 pixels wide. That means any image with more than 790 pixels will get scaled down to the proper size, and scaling is not good.

A good example of this in practice was my own front page. I had images that I (thankfully) had a proper resolution for inside each post, but I was using the same image as the “featured image” (i.e. the image that you see as with the preview of the post on my front page). The preview images on the front page are 325 pixels wide, much smaller than the 790 pixels of the images inside my blog. However, in order the show them correctly, when a user goes to markmcnall.com and the browser begins loading my website, it has to first download the entire large image that’s 790 pixels wide and then it downsizes them in HTML or CSS, which takes a lot effort and slows down page loading. I also had a image I uploaded straight from my phone (of the Madrid skyline) that was thousands of pixels wide and tall, and it was being shrunk to the 325×244 pixels of a featured image and was taking more time to load than the rest of my entire website.

The solution is to upload a separate instance of the same picture that’s already shrunk down. It’s the same reason in nearly every media dump for websites, applications, etc. companies will have their logo/icon in many resolutions, to prevent in-application scaling.

Another fix I had for image optimization was to download an image-optimizing plugin for WordPress. I downloaded both WP Smush and EWWW Image Optimization, and while they both performed well, I kept the former just because it was more popular and I liked the simple interface better.

The last change I could have made (but didn’t) would have been using a Content Delivery System (CDN). It’s something I’ve planned to look into in the future, as I don’t know much about it yet, but the easy explanation is that it’s a server hosted by a separate company that hosts your media (pictures, videos, files) as well as JavaScript and CSS files on their server and when people visit your webpage, the media gets downloaded from their servers instead of yours, saving you precious resources and time.

1.2. Render-blocking JavaScript and CSS in above-the-fold content

There’s not much to write on this one, as it was a pretty easy fix using the aforementioned W3 plugin. You know sometimes when you load a webpage you see a blank white page for a second or so before anything appears? That’s a result of this. I’m no means an expert in JavaScript, CSS, HTML, or PHP, so take my advice with a grain of salt, but my general understanding is this:

In your webpage’s main HTML file, the order various functions and assets are called determines the render order, or the order that files get downloaded to your browser. If you have JavaScript and CSS assets called at the top, they’ll start downloading and they’ll block the downloading of any visible images, text, etc. and prevent your user from seeing anything for a second (or more).

There’s a couple solutions for this, according to Google: “Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.” Thankfully, in WordPress you don’t need to do any code editing to fix this issue. You can do it all through the W3 plugin (these are the manual changes I mentioned earlier). It centers around using the Minify feature of the plugin. I followed this guide but feel free again to find your own guide. I actually still have a few issues that haven’t been fixed, but I’ll look into that later.

2. SEO metadata

The information that Google (and other other search engines) uses when crawling your website may not be what you think it is. It’s important to make sure the proper metadata is present so search engines will classify and display your pages when it should. For example, even though my URL is markmcnall.com, my name and the overall aim of my website wasn’t present in any of the important site metadata so googling my name doesn’t display this webpage until a few pages down on Google (as of now). SEO data can be set for both your web page as a whole (i.e. the home page) as well as each individual post and page. This data includes, titles, descriptions, and much more.

I personally am using the All in One SEO plugin for WordPress, but there’s a couple out there that all look decent. I’m no expert at SEO yet and working on my SEO data is the least-finalized task I’ve started, so I’ll just recommend downloading the plugin and looking at the documentation for it. It’s very thorough and has lots of helpful info for beginners. I also used the plugin to set a sitemap.xml file and tinker with the robots.txt file (if you don’t know what either of these are, google more information on them as they’re important files all websites usually have).

3. Social Media Settings and the Open Graph protocol

Another issue I’d been having is how my website appeared when shared on Facebook or other social media platforms. When you share any online content on social media it creates an object that displays info such as the title, description, and a picture. My example below of sharing the current NFL Power Rankings demonstrates this.

This functionality was developed by Facebook and named the Open Graph protocol, although a variety of other social media platforms have also adopted it as well. The protocol defines a set of metadata that can be put in tags (HTML, for example) and helps social media platforms display your content correctly. Some tags you can define with the OG protocol include article title, site name, image, description, type of content, and so on.

My original issue was that, when sharing my website on Facebook, without these tags explicitly defined, Facebook was “guessing” which data to use, so it was pulling random photos and creating a description that made no sense.

The solution came with the previously-mentioned plugin All In One SEO Pack. One additional feature is Social Meta, although note this is deactivated by default and must be activated before it appears. The plugin allows users to set site-wide Open Graph tags, page/post-specific tags, and set defaults in case other content isn’t working properly. It also has a variety of other options for other Social Media meta information, but I didn’t delve too deeply into it.

That’s all for the technical changes I’ve made (so far!) My Google PageSpeed Insights score jumped up to an 81/100, and while not where I want to be, it’s a drastic change for only a few hours work of image editing and using plugins.

A Plan for the Future

I’m definitely not fully satisfied with where I’m at with this website, so I wanted to finish up with detailing a few future changes you can expect to see on markmcnall.com, both visible and behind the scenes.

• Reworking of the front page, including (potentially) transitioning it to a static front page, while the “blog” aspect gets moved to its own page and has a link on the top menu
• Start writing a series of posts on advice/recommendations on living in Madrid
• Addition of a new page that lists some of my favorite blogs, rescources, websites of personal friends, etc.
• Adding a way for readers to subscribe via email or other contact methods and get notifications on new posts vs. having to constantly check the website
• Notifications that can be tailored to specfic categories or tags (I.E. only email on posts about your travels and life in Spain but not music)
• Adding my rèsumè and other semi-professional portfolio-esque items for potential employers to view
• Continue the reworking and optimization of current media to improve SEO score
• Continue to refine my PageSpeed Insights results, focusing on my render-blocking assets that won’t go away
• Add post-specific SEO data to all my past posts
• Look into what a Content Delivery System (CDN) is, and consider using one to further improve speed and performance of web servers