Tag Archives: css

The post 10 Ways to Speed Up Your Website appeared first on HostGator Blog . There’s no doubt about it – website speed matters. As average internet connection speeds increase around the world and mobile use dominates, web users are becoming less and less tolerant of slow load times.   53% of mobile users will abandon a website that takes longer than three seconds to load, and nearly 10% of web users will bounce after 2 seconds. Clearly, every second counts. At the same time, Google has stated unequivocally that page speed is a ranking factor in search results . In short, a fast site gets better results both from visitors and Google. To take advantage of these dual benefits, you need to make site speed a priority on your site.   Any of the following ten tips will help to get you started on this important path. 1. Optimize Your Images. Every time someone visits a page on your website, their browser has to load every part of the page. On many pages, the parts that take up the most space and therefore take the longest time to load are the images. One of the best and easiest ways to get your pages loading faster is therefore to optimize your images . This quick two-step image optimization process can go a long way to speeding your website up.   Step 1: Re-size your images before uploading them. If you use a content management system (CMS) like WordPress or Joomla , you’ve probably noticed that you can upload images at full size and then adjust their display size within your website’s backend.  That’s convenient, but you may not know that doing so forces web browsers to execute multiple commands each time someone loads the page. They must pull up the initial image and then re-size it on the fly – which slows down your site. To prevent this from occurring, use an image-editing program to adjust images to the correct size yourself before adding them to your site. Most of us will have access to a simple tool like Preview (on Mac) or Microsoft Paint (on Windows). With these programs all you have to do is open up the image and re-size it in your editor of choice.   Step 2: Compress your images. Once you’ve done this you can take your image editing to the next level with a compression tool. Even after re-sizing an image the total file size could be large enough to still slow down your site’s loading speed. One of the best image compression tools available is ImageResize . All you have to do is click the link, upload your re-sized image and this tool will reduce the file size without reducing the resolution. Then, all you have to do is download the image and upload it to your site. Your images will look exactly the same, but will load much faster.     2. Do a Plugin Purge. The huge number of plugins and scripts that available for free makes it tempting for website owners to add more than they truly need. Keep in mind, every plugin you add requires resources to run – and more resources means a slower site. If you notice your site is running slowly, or you believe it could be running much more effectively, perform a plugin review. Go through the list and identify any plugins you aren’t actually using or that don’t seem to be adding anything worthwhile to your site performance. Go ahead and get rid of these. If you still feel your website isn’t loading as quickly as you’d like, do a test to find the culprit. Disable every plugin on your site, one by one. After you disable a plugin, run your site through a tool like GT Metrix to check the speed of your site with it gone. If your site speed increases after deactivating a particular plugin, then you’ve found the problem. If the plug-in in question provides a necessary functionality, experiment until you find another plugin that does the same thing without slowing your site down. To save yourself from this trouble in the future, ask yourself moving forward before adding a new plug-in if the functionality is really worth the trade-off in site speed.   3. Ensure Your Site Scripts Are Up to Date. Depending on the CMS or e-commerce platform your site uses, you may need to check back regularly to determine whether new releases of your site’s scripts are available.   If they are, upgrade your site as soon as possible (making sure that you have a current backup file in place first).  Site script developers are always working on improving their code for future releases, particularly when it comes to site speed.  Updating your scripts to the latest versions could go a long way toward eliminating coded roadblocks that prevent your site from loading quickly. If your site runs on WordPress, then you’ll find these updates within the Updates tab of your WordPress dashboard. Just one click and your site will install the latest software updates. No need for anything else on your end. Admittedly, remembering to check-in and update your website can be tough. Lucky for you this isn’t something you have to do on a daily basis. Once a month is enough to do a simple run-through of your site and install any updates that might be available. Set a recurring event on your calendar and set aside an hour every single month. Usually, it’ll take much less time than this, but it’s important to build the habit of always ensuring your site and plugins are running the latest version. Plus, having all of your software up to date will help to patch up any holes that could lead to your site being hacked .     4. Make Use of CDNs. Content Delivery Networks , or CDNs, are vast networks of servers that are housed around the world. Typically, if you’re not using a CDN, then your site will load from your web hosting server’s central location for every visitor to your site, no matter where they are geographically. This can lead to slow site speeds, especially if your visitors are located far away from the central location of your server. Additionally, if you’re just using a single server, there’s a chance it could get overloaded and cause your site to crash. CDN’s solve both of these problems by letting your users access a cached version of your site from the web host that’s closest to them. Better yet, if one of your server locations is overloaded, they can be switched to a new server location, ensuring faster speeds all around. To get started, look into the CDN services offered by SiteLock TrueSpeed , MaxCDN , or Cloudflare .   5. Enable Browser Caching. Browser caching is a technology that allows a visitor’s browser to store copies of your site’s individual pages so that when the visitor returns in the future, the content can be called up from within the cache rather than reloading the entire page. This saves the number of resources used to display your pages, resulting in faster overall load times for your visitor. If you use WordPress, you can easily enable browser caching with a plug-in like W3 Total Cache .  To install this plugin on your WordPress site, follow the steps below: Navigate to your site’s Dashboard, then Plugins > Add New , and search for W3 Total Cache. Click Install , then Activate . Once the plugin is activated, navigate to the new Performance tab at the top or lefthand side. This is where you’ll control all of the features of the plugin. There are a ton of features that you can turn on or off with this plugin. If you want to fully configure this plugin, then check out  this post by WPMU DEV . Alternatively, talk to your web developer about ways to integrate browser caching into your server-side scripting.     6. Turn On Gzip Compression. Gzip compression is a technology that minimizes the size of browser-based HTTP responses – sometimes by as much as 70%.  If that doesn’t make sense, don’t worry. You don’t need to fully understand how it works to implement it for your site. There are three ways to turn on Gzip compression on your site.  You can: 1. Add the following code to your site’s .htaccess file: # compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript   # Or, compress certain file types by extension:   SetOutputFilter DEFLATE   2. Add the following code to the top of your HTML or PHP page:     3. Install a Gzip compression plugin like the  W3 Total Cache  tool for WordPress (just keep in mind what we said earlier about installing too many unnecessary plugins!).   7. Keep CSS files at the Top and Javascript at the Bottom. Finally, keep your site’s code neat and tidy by adding CSS files to the top of your page’s code and Javascript snippets to the bottom when working with raw HTML pages.   Adding your CSS files to the top of the page prohibits progressive rendering, saving resources that web browsers would otherwise use to load and redraw elements of your pages.   Adding Javascript to the bottom prevents your pages from waiting on full code execution before loading – leading to a faster browsing experience for your visitors.   8. Reduce Http Requests. When someone new visits your website, every single element on the web page has to download for them to view it. That includes images, videos, animations, style sheets, scripts, fonts — you name it. For each element you have on the page, a different http request is made. The more different parts each page on your site is made up of, the more http requests are made each time someone visits your site, and the longer the page will take to load. That doesn’t mean you need to strip your web pages down to a minimalist web design to slow down your loading time. There are tricks you can use to identify and reduce the number and size of http requests on your page without losing out on the style you want your site to have. To start, spot how many http requests are on a page on your website by using your browser tools. The process is similar in different browsers, here are specific steps for the main two: In Chrome:       Right-click on the webpage       Choose Inspect       Click the Network tab       Reload the page In Firefox:       Right-click on the page       Choose Inspect Element       Click on the Network tab       Reload the page This will show you not only how many http requests are required for the page, but also how long each one takes to load. You may be able to spot some items on the list that aren’t worth the time they require that you can remove altogether. Even if you don’t, you have options to speed things up:   Option 1: Reduce file size. Look for opportunities in the list to reduce the file size of different elements. Our section on optimizing images includes some good tips. You can also minify the codes in your HTML, CSS, and Javascript files by removing any unnecessary coding or whitespace. Online tools like Autoptimize (for WordPress) and HTML Minifier can make this step easier.   Option 2: Combine files. If you have more than one Javascript or CSS file for your webpage, combining them will reduce the number of http requests the page has to make. Tools like JCH Optimize and Cloudflare  can help with this.   9. Minimize and Optimize Redirects. Sometimes redirects are necessary, but if they’re used any more than required they can slow down page load times. Regularly check the links on your website to make sure that all your links — internal and external — go directly to the main URL for a page. In the cases where you do need to use redirects , make sure you only use one redirect for a page. You never want a browser to have to do the work of redirecting a visitor from one page to another that redirects it to a third. And avoid having additional URLs that redirect people back to your main site. It can be tempting to buy up all the variations on your URL name and primary keywords you can think of and have them all point page to your website, but that will both slow things down and could cause confusion for your visitors.     10. Upgrade Your Web Hosting. When starting out, you probably selected the cheapest hosting option for your website. That’s normal and usually works well enough for a new website while you’re starting to build visibility and traffic. As your marketing efforts start to pay off and your traffic increases, your hosting needs change. If your website traffic has increased considerably and you haven’t upgraded your hosting plan to match, that’s likely to cause slow or spotty performance issues. Going from shared hosting to cloud hosting , or from shared to a VPS , can make a huge difference to how quickly your website loads for visitors. Check with your web hosting provider to see if it’s time to upgrade, or consider if it might be time to switch to a new provider. HostGator’s known for having a 99.9% uptime guarantee and has representatives that will answer any questions you have about selecting the right web hosting plan to keep your website fast and functional.   Conclusion Although these are only a few of the different techniques that can be used to speed up your site, they’re some of the easiest to implement.  This list is a great place to start if you notice your site slowing down. When every second counts, every step you can take for a faster website is worth it. Having said all of the above, sometimes a slow site is simply caused by inadequate hosting. With HostGator , whether you have a cloud hosting, shared hosting or VPS hosting plan, your site will be served from industry-standard technology and backed by 24/7/365 award-winning technical support via telephone and LiveChat. We make it painless to transfer and are happy to assist every step of the way. Find the post on the HostGator Blog Continue reading →