Date aired: April 26th, 2017
Attention spans are getting shorter, and search engines are favoring websites with faster loading times and lower bounce rates. By optimizing your website performance, you can rank higher in search results, increase and retain your traffic and create an optimal user experience.
Caleb is a Firewall Analyst at Sucuri. He enjoys working with clients to configure the website firewall and follow best practices to prevent their sites from getting infected, so they can focus on what they do best – running their sites and business
Question #1: Does the WebP image format require images to be remotely located on Google’s server and embedded to the website? Or is this a different compression service offered by Google?
Answer: The images can be loaded where your site is hosted as images normally are. You can learn more about it here.
Question #2: How would we know if our host supports ‘Keep Alive’?
Answer: If your site is using Keep Alive, you will typically see a header such as “Connection: keep-alive,” for your site. You can check the header for your site using “curl -IL example.com” without the quotes in Terminal. If you aren’t sure how to do that, contact your host and make sure they support Keep Alive and you are using it on your site.
Question #3: For fixing multiple redirects: is your recommendation to change relative paths to absolute?
Answer: A relative path is typically fine for this, but it is more about fixing your absolute paths to be the exact final location, so the browser doesn’t have to go through multiple redirects to get to the final location.
Question #4: How is Sucuri different in terms of technicality when compared to other providers in the same domain, for example Sitelock?
Answer: There are many differences, but it really depends on what you are trying to accomplish and your needs to see how we would best fit into that process with what we offer. I would recommend reaching out to our sales team, so we can learn more about what you are trying to accomplish and suggest the best configuration including from a technical perspective to how we would fit into that.
Question #5: You mentioned only having one site per server, do you recommend against a VPS? Having a dedicated server for every website is cost-prohibitive.
Answer: You can have a VPS with multiple sites, just make sure the sites are properly isolated, so that one site can’t infect the other one; for example if it’s compromised. The exact configuration would depend on the server configuration, so it is best to engage with your host on how to best configure that.
Question #6: What do you consider the best performing caching plugin for WordPress?
Answer: It depends on your needs. I personally prefer WP Rocket, as in my experience even though it is a paid plugin, the plugin is great and their support is very helpful. If you are looking for a free performance plugin, I prefer WP Super Cache due to how it is very effective while being very simple.
Question #7: I was optimizing one of my websites recently and Facebook and Google meta tags were having multiple redirects. What’s the solution to these?
Answer: If it’s a request where you can update the code or path to remove the multiple redirects, you should do it. If it’s an external request, you won’t be able to do that and changing the code could impact the functionality. So in that case, as you can’t control the external request, it is best to leave it to avoid functionality issues.
Question #8: Can you recommend any competent Managed WordPress hosts?
Answer:Everyone’s needs are different, so the host I prefer for example may only offer ticket support and not live chat or phone support, but you may prefer one of those for support. If that’s the case, it wouldn’t be the best host for you most likely. I would recommend defining a list of requirements you need in a host and then additional things you are looking for, but aren’t required. From there once you know what you are looking for, reach out to the host’s and see which ones check those boxes and what host you feel the most comfortable with. There are many good hosts out there, but one great host won’t work for everyone as everyone has different needs that has some to do with why there are so many out there to start with.
Question #9: How do you size images for retina/high-density display? Is doubling the size of the displayed size still the way to go? (e.g. 1000px wide that will be displayed at 500px)
Answer: To maintain two separate images for the best performance and still have a visually appealing image on a retina display, you can consider a solution such as WP Retina 2X for WordPress or retina.js for other sites.
Question #10: When using Google Pagespeed a lot of the time for many websites it will show up and say to “Leverage Browser Cache” what is the best way to handle that?
Answer: The leverage browser cache part of the Google Pagespeed Insights test, is for making sure you have caching headers in place to tell the browser for visitors to the site to cache the page. Kinsta has a good blog post blog post on this that covers it in great detail and how to implement it.
See all Questions & AnswersExpand
Tony Perez – Sucuri Co-Founder
I want to thank everyone for joining us. This is a really exciting period for us to sit down and chat with you on a number of security topics. I want to specifically start on what happens once an attacker is successful, and I think this is an important way to start. I think often we focus too much energy on what are the things we should be doing, but we don’t necessarily know what it is we’re trying to achieve. So a common theme you hear in my conversation – it’s all about mindset.
Caleb Lane – Firewall Analyst
Hi, thanks for the introduction, Val. Welcome everyone to the webinar. Before we get started, I want to just go over a few things and then the main topics we’ll cover on today’s webinar. The first thing being the two main metrics that you should be focusing on when optimizing your site for the best performance. The next part will be the steps that you should take to effectively optimize your site for the best performance and lastly, the tools and solutions to accomplish that.
To start, before you start to optimize your site for the best performance, I generally recommend establishing a baseline for your site. That way, you have results from before you optimize a site once you’re done to see how effective and how much your site improved from a performance perspective once you are done.
The second tool, the Sucuri Global Performance Testing Tool gives you three metrics from a lot of different locations around the world which is helpful when establishing that initial baseline as well. I mentioned three other tools: Gtmetrix, WebPageTest, and Google Pagespeed Insights as well. I recommend trying all the tools and then picking the two or three that work best for you in what you’re trying to accomplish.
When optimizing your site for the best performance, generally people focus on the letter grade that these tools provide. I don’t recommend focusing on that as much. It’s definitely a factor that you should look at, but it’s not the main factor that I consider when optimizing a site for performance. One of the main reasons of that is it’s generic recommendations for all websites out there. What I mean by that is those are recommendations that are tailored for your site in a way that it is tailored, but at the end, it’s still generic recommendations apply to all sites and not individually for your site. It’s an automated check. Having a good understanding of performance and understanding a waterfall and different things, and the most important aspects of optimizing your performance are definitely a lot better than relying on that letter grade.
Before you start optimizing your site for performance, I recommend going through and doing a spring cleaning, similar to what you would do in your house in the spring, just go through and clean everything top to bottom. That’s what I recommend doing with your site as well.
First, before you get started, you want to make sure you take a full back up of your files and database. That way if anything goes wrong while you’re doing this, you have a back up to go to and you don’t have to worry about losing any data or having any issues. The other thing that I’ll mention is ideally you’re doing this in a staging or development environment and you’re not doing this in a production environment. So if something does go wrong, it’s not impacting your production site and it’s only on a staging or a testing site.
The next part is updating the content management system version you’re using whether that’s WordPress, [inaudible 00:09:04], Magento, whatever it may be, and also the plugins and themes. Updating everything often it contains security fixes and maintenance fixes along with new features. It also has the security benefits that as well, because it often patches those security vulnerabilities as I mentioned.
The next part, going hand in hand, you just updated everything on your application, you’ll also want to do that on the server. Depending on who your hosting provider is and how that is configured will depend on who’s responsible for this. If you’re on a server managed plan, then you’ll still want to reach out to your hosting provider and make sure that they are indeed keeping everything up to date because some hosting providers do fall behind on this. If you are managing the server yourself or paying a developer or system administrator to do that for you, you’ll definitely want to make sure that you’re doing that yourself because that responsibility falls on you.
The next part is removing any inactive plugins or themes. Generally a habit that we see a lot is that if you aren’t using a plugin or theme, you may just deactivate it and leave it on your site. If you aren’t using it, remove it because that way it can’t be used as a possible attack vector when a potential attacker is trying to compromise your website, and it also can’t impact the performance as well because it’s totally removed. If you ever do need it later down the road, you can always reinstall it.
Continuing on with spring cleaning, you don’t want to have any backups on the server. Anything that isn’t needed for your production site to perform and function as it should. Often, for example, backups, generally having backups and storing them on the same server as your production environment is never good practice anyway because if something goes wrong on that production environment, well your backups are on the same server, thus you can’t rely on those normally because they will be impacted as well.
The next part is having one purpose and one site per server. What I mean by that is you don’t want to have what’s commonly referred to as a soup kitchen server of having all of yours sites, e-mail, and every single possible function that you can think of, on the server because it not only hurts the performance but it also generally introduces security risks in your environment as well. Ideally, you want to have one site per server and if you have a lot of sites that’s generally not scalable or possible and if that’s the case, make sure you isolate them properly so that one can’t impact the other.
What we commonly see is sites continue to get reinfected through something that we refer to as cross-site contamination. What that means is if one site is on the server and it’s compromised and the other sites on the sever aren’t properly isolated from that site, it can cause that one site to impact all the other sites and all the sites on the server get infected.
The next part is removing old subdomains, domains, anything that isn’t being used. You’ve had a server for a few years, you’ve probably had a few websites on it over time. You aren’t using one of those sites, remove it. If it’s outdated and you still are using it, you should update it. Then the next thing is you don’t want to use a production server as a development or staging server. As I mentioned when ideally optimizing your site for performance, you don’t want to do this on the production environment, the same thing goes with isolating the development and staging server from the production server. That’s just good development practice as well.
The last part here goes hand in hand with keeping backups of the site or server on the same server that your production environment is. You don’t need to store personal files or any files that aren’t needed for the production site to function. There’s a lot better ways to store backups and personal files than production server.
The next part here is talking about hosting providers. This kind of goes with building a house. If you have a bad foundation to start, generally, that house is going to run into problems right away or, if not right away, down the road. The same thing goes with hosting providers. If you have a good hosting provider, that goes a long way in ensuring that it’s a reliable site that, generally, is more secure and performs in loads faster. There’s different ways that you can go about approaching what hosting provider to go with. There’s not one size fits all and it’s just something that you have to consider for your needs.
The first, it’s not as common an example, but if you’re a technical user and you had the skills, the time, and the availability to manage your server yourself, that’s definitely something you can consider. Keep in mind of that availability part I mentioned. Your server goes down at 3AM and you’re sleeping, are you going to get up from that text or that phone call and fix a server? If it’s a personal blog, maybe it can wait until the morning. But if it’s an eCommerce site, then you most likely can’t afford that downtime and that’s something that you have to consider if you’re going to consider going that route.
The next part is if you don’t have the time or expertise to manage the server yourself, you can always pay a developer or system administrator to do that for you. The same thing goes in saying that that’s the person that you’re going to be counting on if your site or server goes down, so make sure that they will be available and respond within the time limits that you need them to.
Lastly, the most common option is going with a managed hosting provider who will manage that server for you and if there are issues, the responsibility falls on them from the server aspect of that. You also have to keep in mind with managed hosting providers of the support they offer. Do they offer the type of support you prefer in terms of chat, phone support, e-mail support, ticket support, whatever it may be. Also if you need a certain SLA, your service level response time, are they offering that? Also you have to consider hours. Are they 24/7, 365 and is that you what need? Or can you manage to deal with a hosting provider that may only offer limited support on weekends, for example. For over 90% of people, managed hosting provider is the best fit but you can consider those two other options as well.
For themes, generally the best way to go about approaching a theme is going with a well coded framework and then hiring a developer to customize that for your design needs. The reason that this is best is because you have a solid foundation, it’s kind of the same thing with the hosting provider. From there you can pay a developer to customize the CSS, PHP, and any other programming language that you may need to fit it and make it unique for what you’re trying to accomplish with your business.
Some people, with a theme, try to go with a completely custom theme, but I generally don’t recommend that and it’s generally not the best approach for the large majority of sites and businesses out there. The reason being for that is it generally increases the development time and cost, it will complicate updating it as once that initial design is done, it’ll make it more complex to keep it up to date. For example, if that relationship ever ended with your developer or agency who did that theme originally, it can make it very difficult for a new developer agency to go in and keep that updated. It also, since you’re not having a dedicated person or a team like you might with framework keep that up to date, it is more likely to have performance issues or security vulnerabilities as a general rule of thumb.
If you have the time and you have the knowledge with CSS, PHP, to customize the theme yourself, that’s definitely something you can consider. Keep in mind though, if you aren’t very comfortable with PHP, you can very easily introduce vulnerabilities into your environment with insecure PHP code. That’s just something to keep in mind if you go that route.
Lastly, a common questions up of how would I find a developer to help customize that framework that I decided on for my site? What I recommend first is reaching out to the people you know, your colleagues, your friends, and seeing who they have to recommend. If multiple people are recommending the same person, it’s generally a good sign. You can reach out to those people that they recommend and those developers and engage with them to see if they fit the needs of what you’re trying to accomplish for your site and business.
The next part is plugins. Going back to the spring cleaning part I referenced earlier, if you don’t need a plugin, it’s best to delete it, not just deactivate it. The next part is plugins don’t come in one size. For example, with the WordPress repository, there are many WordPress plugins out there that can add social media buttons to your site, so Facebook, Twitter, the other major social networks, but they’re all not created equally. Some plugin authors, if you check the WordPress forum for any users who have opened up support tickets will reply very quickly, they’ll follow through to the end, if it’s a bug they’ll release a patch if it is a bug in the plugin. They’ll keep it regularly up to date, they’ll add new features, they’ll patch any security vulnerabilities that are discovered, and things like that.
Also, code comes in a lot of different shapes and sizes. If you’re not a developer, it’s often hard to evaluate a plugin’s code effectively. But if you are, I definitely recommend briefly taking a look at any plugins you’re considering’s code as well to get an idea of how secure and efficient it may be in those types of things. A lot of plugins have multiple features they offer, so for example, very popular WordPress plugin, Jetpack, has many different modules or features for it. It offers, within its settings, to go in and disable the modules that you aren’t using. If you’re only using five of the modules that Jetpack offers, I recommend going and disabling all those other modules. You’ll notice that it won’t impact your performance and the load time of your site as much if you do that. Same goes for other plugins as well.
The last part here being only use the necessary amount of plugins you do. One example is say you are trying to center the logo in the header of your site. Now, a lot of people would approach this of trying to add a plugin to accomplish while, in almost all cases, this could be very easily done with a few lines of CSS that you would add to your theme’s custom CSS file. That’s the route I would recommend going verse adding a plugin to accomplish something simple like that.
The next part is optimizing images. The first tool here is by TinyPNG. It gives a good idea of if you compressed all your images on a page, how much that would reduce the page load size of. It’s definitely something I recommend doing, just to give you an idea of how much page load size you can save by optimizing your images. Now I’ve tried a lot of the different image compression tools on the market, and there are definitely a lot. When I’ve tested them, the four tools or solutions I recommend depending on what CMS you’re using or what way you’re trying to compress the images, whether it’s through a web interface, a plugin, API, things like that, are TinyPNG image, Imagify, Kraken, and Optimus. I recommend you check out each one and pick the one that works best for you.
Continuing on with optimizing images, resizing images to scale. To give you an example of what I mean by that, say for example you have an image on your site that is 1000 by 1000 pixels. But when a visitor goes to it, the actual image size that’s displayed on your site is 500 by 500 pixels. In reality, that full image size of 1000 by 1000 pixel is still loading in the background adding unnecessary page load size to the total page load size for your site and generally being resized using HTML. The best way to go about this is resizing that image to scale and then reuploading it to be 500 by 500 pixels to save on that total page load size for your site. GTmetrix has a great section on this where it will provide any image that you can resize and the direct exact dimensions you should resize them to.
The next part here being using the correct image format. What I mean by that is there’s several different image formats out there, JPG, PNGs, and just making sure if you’re designing an image, for example in PhotoShop, that you’re using not only the best image type from a visual standpoint, but also from a standpoint of performance and that it’s the smallest and most efficient image type possible for the image that you are designing.
The next part is a newer web or image format that was actually invented by Google is WebP. It’s not supported by all major browsers yet, Safari and Internet Explorer should add support for it I imagine pretty shortly. You can still convert your PNG and JPG images to WebP image format to save on that total page load size. Optimus, which is a tool that I recommended to compress images on the previous slide, offers an option to convert your images to the WebP image format. It’s definitely something I recommend doing, especially if you have a lot of images in your site.
The last part here of compressing images is using CSS sprites. An example of this would be say you have five social media buttons in the top right hand header of your site, Twitter, Facebook, Instagram, Pinterest, things like that. Instead of those five images loading, you can use what’s called a CSS sprite with a few lines of CSS so that instead of having five images, you would have one image and the CSS would basically clarify the dimensions within that one image of the image that you need for what that social media button is. You would save four requests and just add a few lines of CSS to accomplish that. That’s definitely something that you can consider doing.
The next part here is compression. GZip compression has been around for a long time and I recommend enabling it on your site if you aren’t using GZip compression. It’s a great way to reduce the page load size and it’s something that’s generally very easy to implement. There’s a newer type of compression called Guetzli compression which was also created by Google. It’s not supported by all major browsers and, in my testing, it’s definitely better than GZip compression. But since it isn’t supported by all the major browsers yet, if you don’t implement it exactly right, it can cause some conflicts. Be aware of that if you are going to consider using it before all the major browsers have support for it.
the next part here is HTTP/2. This is a newer protocol that was supposed to help with basically from HTTP/1.1 and it will impact any request loading over HTTPS. If you aren’t sure if you’re using HTTP/2, I recommend reaching out to your hosting provider and if they do offer it, make sure you have it enabled. If they don’t, encourage them to add it as a feature because it does have many performance benefits for HTTPS.
The next part here is generally when website owners are experiencing performance issues, their first inclination or approach is to upgrade the hosting plan or add more resources being CPU and RAM to their server. Generally, that’s not the approach that I recommend starting with. Generally, what I recommend doing is optimizing your application and server as much as possible. If you’re still having hosting issues and performance issues at that point, then you might consider looking at upgrading your plan or adding more resources to your server. That’s generally not the best approach starting out with.
The next part here is upgrading PHP. If you’re using an older version of PHP such as PHP 5.3 or 5.4, you should reach out to your hosting provider and see if they offer a more recent version of PHP such as 5.6 or PHP 7. They have many performance benefits that the older versions of PHP didn’t provide and they also have other benefits as well. If your hosting provider supports those, then as long as your application and any plugins, extensions, things like that, support that newer version of PHP as well, you should definitely look into upgrading that.
The next thing is enabling Keep Alive. What Keep Alive does is that any time a request is loaded through your site, there’s what’s called a handshake that is necessary on the networking end for that request to basically go through. What Keep Alive does is instead of having that handshake for every single request, it will use the first handshake for all the subsequent requests saving on the amount of handshakes for your site. It goes back to the principle of doing the same amount of things with, basically, less time. It’s definitely something you should implement and it’s generally something that’s very easily can be done in most configurations.
The next thing is fixing or removing 404 Not Found errors. If you’re not familiar with what a 404 response code is, it simply means that that request or file was not able to be found or it’s not a valid path for that file. If that file path is referencing the wrong file path and you just need to update that, then you should update that in your code if need be. But, if that file is no longer needed for your site, you should remove that reference in the code because your page load time will basically decrease as a result of doing that.
The next part here is fixing multiple redirects. As an example for this, say you have a CSS file and its loading over WWW and you’re forcing HTTPS on the site. But in the code, you’re referencing the naked root domain and HTTP instead of HTTPS. The browser, when that visitor goes to the site, is going to have to follow that redirect twice before it gets to that end result of HTTPS and WWW. You should always put the URL in the code that it ends up being, that way the browser doesn’t have to follow multiple redirects. Just increasing that page loading time for unnecessary reason.
The next part here being lazy loading images. What that means is say, for example, you have 100 images on your site but when a visitor goes and loads your site, only 10 images are within the screen or visual view of that screen for that visitor. What lazy loading images would do is it would only load those 10 images initially and then as that user scrolls down and more images come within view visually for that visitor, it would load those images but not until then. If you had a lot of images on your site, it can be beneficial for your performance. But if you just have an average amount of images, it’s generally not something that would be necessary to implement.
The last part being here is a WordPress plugin called Query Monitor. It’s generally geared more towards technical users or developers, but it has various statistics and things such as it will give you the time to execute different database queries and it will point out the database queries that are taking longer and that way you can look into optimizing those. If you do use WordPress and you are more of a technical user, it’s definitely a plugin that you can at least check out when you’re optimizing your site for performance.
Now when talking about performance as a whole, I focused on those other areas at first because those areas aren’t often as talked about while they are still very beneficial and key parts when optimizing your site for performance. Now, the two, I would say most talked about, ways to optimizing your site for performance are caching and content delivery networks. They’re often referred to as CDMs. Basically, what caching and content delivery networks accomplish is they generally reduce the overall load on the host server and they also make the page load faster for the visitor.
There’s several different types of caching. The first one is a content delivery network. To give you an example of what a content delivery network is, say for example your site is hosted on one server in Arizona, but you have a majority of your visitors in Europe. Regardless where the visitor comes in the world, they’re still going to be routed to that one server in Arizona since that’s the only server where your site’s hosted. With a content delivery network, it will generally have what’s called multiple points of presence or servers located around the world in a lot of different continents and areas. That way a visitor in Europe would hit one of the points of presence or servers in Europe instead of the server in Arizona where your site’s hosted, thus reducing the page load time for that visitor.
The second type of caching is what I would call server caching. An example of this is something called varnish that are common setup is, for example, you have Apache but you’re running NGINX. In front of Apache is a reverse proxy and using that for caching. There’s a lot of different server configurations and caching options out there, that’s just two examples.
The last part here is instead of caching out on the server itself, you’re caching it on the application so more at the content management system. There’s a lot of plugins out there for the variety of content management systems with application caching and that’s the third type of caching.
When considering your different options out there for caching and content delivery networks, keep in mind that it’s generally always a good idea to use caching and a CDN. But there is a point in time that comes where it’s just redundant meaning that if you have too many layers of caching or if you have several content delivery networks, the benefit is really marginal at that point verse just using one caching method or two caching methods and one CDN verse using, say, all three caching methods and all two content delivery networks. It also generally complicates trouble shooting, makes the process of updating your site more difficult and things like that.
Now, the question is how does the Sucuri firewall integrate and help with the performance of your site? The first thing is we have what’s called a Global Anycast Network. Right now we have the six points of presence, three in the United States, two in Europe, and one in Japan. That operates as a content delivery network, that way the visitors request is routed to the closest server to them, helping reduce the latency and help with the performance of your site. The next part is caching. We have caching in place also with those different points of presence on our Global Anycast Network. If we have that request cached already, we can return that request directly to the visitor from our cache. That way we don’t even have to send a request to your host server, thus reducing the load on your host server as well as speeding up that page load time for your visitor.
The next two options here are compression and HTTP/2. These are both options within our interface that you can enable with just a simple click and it’s Gzip compression, HTTP/2, we talked about those earlier in the other areas that you should focus on when optimizing your site for the best performance. If you use our firewall, I definitely recommending you enable those features if you haven’t already.
Here is just a list of resources that I referenced in the webinar that you can refer back to. Again, as Val mentioned at the beginning of the webinar, you will get a copy of these slides a few days down the road here. That’s it for on my side of what I wanted to cover for optimizing your site for the best performance. Thanks for taking the time to listen and I will pass it now back over to Val so we can answer some of the questions you guys had.
See Full TranscriptExpand
In the website security community, our name is known for fast site hack cleanup and responsible vulnerability disclosure. As thought leaders in website security, we are committed to sharing what we know. Follow our concise and helpful website security guides and tutorials so you can learn how to clean and secure your website.
In our latest webinar, we'll describe action items that can improve the security state of internet-connected devices we all use every day. These devices will include common household staples such as: WiFi Routers, iOS/Android devices, and personal computers.
Join us as we delve into the minds of hackers to explain targeted attacks, random attack, and SEO attacks. Find out why bad actors target websites.
A feature benefit guide for our agencies and end users. Why use our firewall? What kind of protection does it offer? How does it affect the efficiency and speed of my site? Will it affect my server's resources? Find out the answers to these questions and more in our webinar…..
Cross-site contamination happens when one hacked site infects other sites on a shared server. This webinar is for beginners and web professionals to understand cross-site contamination and how to prevent it…..
If you're considering security for your site or are new to our services, this webinar will guide you through Sucuri's simple setup processes. Potential notifications, support options for various scenarios, and ways that you can also work to keep your site malware-free will be discussed…..
Learn how you or your agency can account for security with your client projects. Presented by Sucuri Co-Founder, Dre Armeda, this webinar shows how you can get involved and help clients who are not aware of some of the security risks involved with managing a website…..
It's a move we've seen coming since early 2017. Chrome HTTP sites are now officially being marked as 'not secure'. With Chrome dominating 62.85% of the browser market space as of last month means that even small changes can have a big impact on website owners if ignored…..
In this fire chat, we're looking to find answers to some of the questions web agencies have been asking us for years, in hopes of shedding more light into how you, as an agency, need to respond to security threats your customers face…..
Website security is challenging, especially with a large network of sites. We want to help you understand how you can create a security plan and reduce the risk of a hack or security incident. In this session Dana covers the implications of a security breach and why security should be important to your agency. Dana shows you a tiered approach to we….
In today's complex security landscape, web applications pose a significant risk to Mid-Market and Enterprise organizations. This webinar will introduce the concept of the WAF, and the benefits of web application security in the cloud…..