How To Optimize A Real Estate Website For PageSpeed Insights And SEO

You have probably had the worrying thought: is my real estate agency’s website fast enough? You’ve checked your score on Google’s PageSpeed Insights and it’s not looking good.

Look familiar?

Google PageSpeed Insights

Yeah, that looks bad. Unfortunately, Google doesn’t like websites that are slow and therefore, get pushed down on search results. It’s important to note here that the PageSpeed Insights score is no end all be all to your SEO score. In reality, it might be impossible for a real estate agent to optimize their website and get the perfect score without sacrificing user experience.

Luckily, there’s a lot you can still do to optimize your website and rank higher on search results.

Importance of speed

I found a local real estate agency and began testing their website. All in all, the agency’s frontpage was 102 megabytes in total and it took over 13 seconds to finish downloading. The recommended size is a maximum of 4 megabytes. And while this is true for most websites and it benefits especially people using mobile data, it might be tricky for a real estate website to achieve.

What you should look for instead is getting the “first contentful paint” down to under 3 seconds. As a matter of fact, research shows that most people navigate off websites that do not load under that magical 3 seconds. This means your website needs to be showing something, ANYTHING under 3 seconds so the user doesn’t leave. As a result, the more you can cram into that timeslot that retains users’ interest longer, the better.

Here’s how to fix it

Real estate websites tend to be very photo-heavy which can get taxing on the number of megabytes that the user needs to download. Especially when you want to display the highest quality photos on your website to showcase your properties.

Optimize photos

One of the biggest mistakes I see on the web, that even you might be doing right now, is big uncompressed images that are 2 megabytes or more each. That’s a lot! In my testing, I downloaded a photo that was clocking at 1.9 megabytes from my local real estate agency’s website. Now that I was done optimizing, it was down to 188.91KB. That is 10 times smaller than the original photo and as an added bonus, no noticeable loss in quality.

Manually:

  1. Resize your photos

    Find the maximum height and width your website uses. Use photo editing software to resize it. Save as JPEG.

  2. Compress by using https://compressor.io/

    If you have multiple photos to compress, you can use TinyPNG which allows up to 20 images at a time to be compressed.

  3. Upload the compressed photos

    Depending on where your photos are getting pulled from to your website, upload the newly compressed photos.

Note. TinyPNG allows you to compress at least 500 images free per month. There are free alternatives but might not compress as well.

WordPress using a plugin:

  1. Download the plugin

    There are many plugins but TinyPNG is what we recommend for best results. You can either manually download it and upload it or you can go to the Plugins page on your WordPress dashboard, click “Add New” and searching for “TinyPNG”.

  2. Activate the plugin

    Go to your Plugins page, find “Compress JPEG & PNG images” and click “Activate”.

  3. Register

    In the settings page, register using your name and email address. You’ll receive an email asking you to verify your email address. Verify it and you should be good to go.

Lastly, I wanted to point out that if you are using a 3rd-party provider who hosts your photos like many real estate agencies do, check if they provide smaller photo sizes automatically.

Use a plugin to lazy load images, caching and more

Lazy loading images means users won’t start downloading any images on the website they can’t see yet. In other words, as users scroll through your website and come across an image, only then will it start downloading it. This improves the time it takes the user to load the website and see something happen in those crucial first 3 seconds.

Serving users a cached version of your website should speed up the load times straightaway as well. In short, cached versions of your websites are temporarily stored in the browser for faster loading. Chances are your website won’t be updated with crucial information every single time a user visits your website so having a stored copy of it makes sense. If you’d like to read more about page caching and how to set it up manually, you can read this great article by SEO Site Checkup.

The same plugins usually automatically serve your javascript and CSS files minified so that’s another box ticked in Google’s book.

There are quite a few WordPress plugins you can use, for example here’s just a few of them:

I would recommend using Autoptimize and Comet Cache together for the easiest solution. Comparatively, W3 Total Cache requires more effort on your part to be set up properly and so, it might not be the best solution for non-power users.

Make sure to check your website after activating any of these plugins to make sure nothing broke.

Use a content delivery network (CDN)

A content delivery network means having a network of distributed servers strategically placed around the world. These servers hold a copy of your website’s static resources and get distributed to users who visit in their proximity. This reduces the time it takes to load a website as the server is closer.

Depending on the company, setting up a CDN manually can require some technical knowledge to set up properly. Here’s just a few of them:

There are a few WordPress plugins for CDN’s but setting up would take too long to explain here so I’ll just guide you to a great article by WPBeginner that compares different providers and another one that is a tutorial on how to install MaxCDN.

Enable gzip compression

You might need the help of a coder or somebody who knows how to configure server settings instead as this gets more technical. Moreover, you might not even have access to your server settings and in this case, you should contact your web hosting provider to enable these settings.

By enabling gzip on your server, you are essentially sending compressed versions of your website to your visitors. These files are smaller and therefore faster to download.

Apache:

  1. Locate .htaccess file and open it

    Your .htaccess file should be in the root directory of your website.

  2. Add these lines

    # GZIP compression for text files: HTML, CSS, JS, Text, XML, fonts
    <IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    </IfModule>

  3. Hard refresh your web page

    On your browser, hit CTRL + F5 to hard refresh.

  4. Check it’s working

    Go on PageSpeed Insights and check GZip compression is enabled.

NGINX:

  1. Locate nginx.conf and open it

    It should be in one of these locations:
    /etc/nginx/nginx.conf
    /usr/local/nginx/conf/nginx.conf
    /usr/local/etc/nginx/nginx.conf

  2. Add these lines

    #
    gzip Settings
    #
    #
    gzip on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;

  3. Restart your server

    Type in console: sudo service nginx restart and enter

  4. Check it’s working

    Go on PageSpeed Insights and check GZip compression is enabled.

In conclusion

As a result, of implementing these changes, your website should already be scoring much higher on Google’s PageSpeed Insights tool. But as I said, the PageSpeed Insight score should not be your only gauge for a good SEO score. The fact is, there’s a lot more to SEO and PageSpeed Insights only gives you an idea of how your webpage is performing speed-wise, which undoubtedly is important as well.