Search engines use speed as a ranking signal, but the specifics can get a little confusing – especially if you run your site through a speed tester (including Bluehost’s supercharge page) and get a report with a bunch of warnings.
In practice, the results of speed tests are good guidelines and will not affect your site ranking in search. Only the server response time of your web page has been shown to affect ranking, so a page caching tool can be useful.
But faster sites are a good thing, so we’ll highlight the most common warnings you might see, and what you can do as a ProPhoto user to improve them.
Be aware as you read below that tools like Google PageSpeed Insights may give reports separately for mobile and desktop views of your site. Review both reports for feedback.
Google shows mobile and desktop results in separate tabbed views
Optimize images
This is actually a pretty big one for you, because you’re a photographer – you probably have lots of photos on your site, right? Images have a big impact on loading speed, so if you see this warning, it’s worth improving as much as you can.
Even though ProPhoto already uses downsized versions of of your original uploads when possible, it is still extremely import to size and compress your images for the web before you upload them. Because of the sheer number of images on your site and how many display on a single page, preparing your images for the web might be the single most important thing you can do to improve your site’s performance. Every image you use should be sized to the smallest size that will work and compressed as much as possible. Don’t optimize only images inserted into posts, pages or galleries. Make sure to properly prepare images uploaded in the customizer, including images used in backgrounds, graphic widgets, and tiles.
As a general rule, creating images for the web should nearly always involve optimization on your computer. This means that you’ll use software like Photoshop or similar to export images properly for the web, applying compression to your photos and graphics. This is a great video explaining Photoshop’s built-in optimizer called “Save As for Web and Devices”:
For those without Photoshop a popular tool is BlogStomp. It’s much more economical and makes sizing and compression (as well as the creation of composite images) a snap. If you see images needing optimization listed in your speed report, try to copy the URL of the image and open it directly within your browser… just paste the URL address in your browser address bar.
Paste and image URL in your browser to view it directly
If you recognize the image from your ProPhoto design, try re-saving that image or graphic with more compression on your computer. Upload it inside ProPhoto to replace the original after you’ve reduced the file size as much as you can without making the image look bad. Make sure to test at large browser sizes since images in a responsive site can grow.
It’s not possible for us to suggest a recommended file size, but instead, the best approach is always to have the smallest file size without sacrificing too much visual quality. Experiment and see what looks good to you. For images that will be in galleries or are intended to occupy the full content width of a page, we recommend you start with 2000px in width.
Enable compression
If you see a message about ‘enabling compression‘ in a speed report, this may be a quick-and-easy thing that can speed up your page loading time substantially.
Contact your hosting company tech support about this and them ask about “gzip compression” for your web server. (on Apache servers, this is related to the “mod_deflate” feature) Your hosting tech support should be able to turn on this compression feature for your web server (it’s sometimes on by default), and should be able to confirm when it is working for your site.
If your host support team can’t enable this feature, you might consider moving your site to a hosting company who can enable this option.
Render-blocking JavaScript and CSS
Hold on, this one gets just a bit technical, which you probably notice by the name. The render-blocking portion of this message simply means:
stuff in your web page is blocked from loading until after something else.
So, if your site needs to load some code or styling before the rest of your content on a page, it can slow things down. It’s sort of like trying to use a restroom that has one stall, but a parent with three kids is before you in line – you’ve got to wait for them to finish before you can go.
JavaScript code is in the ‘head’ before the content – see what I did there?
In the simplified example seen in the screenshot above, the script mom-and-3-kids.js represents a file that needs to be downloaded first. Then, the body of content visitors see on the web page can be loaded. If the script file is really large, or if it takes a while to (*ahem*) download, then the page content will need to wait before it loads. In general, this method is bad practice for a web page, and that is why speed tests might warn you about this.
But it’s not always bad. For example, Google Fonts is one item that is loaded before the content in your page. This is so your text appears on the screen in the proper font. Otherwise, your text would be seen before the font arrives, and your text would snap to using the correct font after it downloads – which just looks sloppy to visitors.
Websites often use render-blocking code intentionally, and the amount of time added to page loading speed is negligible. ProPhoto breaks this rule by design, trading a small bit of performance so your site operates more reliably – you can ignore this warning if it is mentioned in your speed test.
Server response time
This one is a little technical, too, let’s use an appropriate analogy. Server response time is a bit like launching a program on your computer and waiting for it to open. You’ve told it what you want, but there’s a lot your computer must do before you can use the app.
Server response time warnings tell you that your server takes extra time to start loading your page in your browser. Servers can be slow to respond for lots of reasons, here are a few:
- Lots of WordPress plugins are being used
- Outdated server software
- Slow server performance
While an incomplete list, these highlight some things you can check on.
Check your WordPress Plugins
Make sure your site uses as few plugins as possible, and disable any you don’t need. Plugins give your web server more to do each time someone tries to view a page. Delete plugins you know you won’t need again or that you only need from time to time (you can always upload and reactivate).
Check your server PHP version
Next, web servers use a software called “PHP” which is what WordPress and ProPhoto use to operate. Older versions of PHP are slower than modern versions, so updating is a great idea. Ask your host what your options are an update to the most recent version possible, hopefully at least 5.6. The update should be seamless and can make a noticeable difference in your overall site speed. ProPhoto and WordPress are compatible with up to PHP 7, so update as much as you can.
Try page caching
Slow server performance may also be caused by other things like low memory, slow CPU processors, unusually large databases, or crowded file systems. While your host might not be able to easily change these things without upgrading your hosting account, ProPhoto page cache is something simple you can try.
Consider switching hosts
If page caching doesn’t help much, we encourage you to discuss server response times with your web hosting company. Server performance is their responsibility, and they may have other hosting options for you. Many hosts offer hosting geared specifically for WordPress which may be a good fit. If your hosting company isn’t able to provide better service at a good value, you might consider moving your site to a hosting company who provides better value. Faster servers result in faster websites.
Leverage browser caching
Another technical item, browser caching is when your visitor’s web browser stores files on their device for faster speed. Why should a visitor need to download your logo image each time they view a new page if the logo hasn’t changed? Items that are commonly cached include images and fonts, but can also include bits of code like CSS files, script files, and more.
Typically, this involves advanced coding with your server’s .htaccess file, but we recommend strongly against editing this file directly. Instead, consider using a WordPress plugin to do this for you. Leverage browser caching ninjas is about as simple as they come – a single checkbox takes care of everything for you. Also, the W3 Total Cache plugin has a Browser Cache section.
Otherwise, if you want to add the proper code to your server .htaccess file manually, we recommend working with your hosting tech support.
Minify CSS or minify JavaScript
Yet another technical item, you shouldn’t run into these warnings unless you use a WordPress plugin that doesn’t minify code. Minify simply means that code is simplified to take up as little space as possible for the fastest transfer. ProPhoto minifies its code as much as possible.
You might try disabling plugins one-by-one in WordPress, re-testing your site each time to see when this warning goes away. If you narrow down the warning to a specific plugin, consider using a different plugin to achieve the same thing. Many caching plugins also offer minification options, which you can try.
But minifying code is sort of scraping the bottom of the barrel – minified CSS and JavaScript, while good practice, has a very small impact on the speed of your site.
