HEIKALINE

5 Useful Tools for Translating Your Website Content

August 10, 2018 Heikal 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-head" dir="ltr" style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Regular; font-size: 19.04px; margin: 0px; outline: 0px; padding: 0px;">
<h1 class="post-title" style="box-sizing: border-box; font-family: ProximaNova-Semibold; font-size: 42px; font-weight: 400; line-height: 1.24; margin: 0px; outline: 0px; padding: 7px 0px 10px;">
The global economy has expanded your potential market in a way that was not possible even ten years ago, leveling the playing field for small and big businesses. However, it does come with some issues. One of them is the language barrier.</h1>
</div>
<div class="post-body" dir="ltr" style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Light, sans-serif; font-size: 19.04px; margin: 0px; outline: 0px; padding: 20px 0px 0px;">
<div class="entry jpibfi_container" style="box-sizing: border-box; color: #222222; font-size: 19px; margin: 0px; outline: 0px; padding: 20px 0px;">
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span id="more-32701" style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"></span></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your website is in English, you will get your message across to about 27% of the market. Put another way, <span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">about <a href="https://www.commonsenseadvisory.com/AbstractView/tabid/74/ArticleID/8057/Title/CantReadWontBuy/Default.aspx" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">73%</a> of the global market prefers websites with content in their native language</span>. If people don’t understand the content of your website, you cannot hope to make a sale. You need to give your visitors the option of a localized experience, and for that, you need translation.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The problem is translating text from one language to another is not a simple process. Word-for-word translation does not usually work because there are nuances in language that get lost in translation. Such inaccuracies can significantly change the context of the message.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The ideal solution is a translation tool that can do the job with a fair amount of accuracy. Translation tools abound, but not all tools do the job accurately. To help you choose a good one for your website, we feature here 5 useful tools for your website content translation.</div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<a href="https://translate.google.com/" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Google Translate</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
<img alt="Google Translate" class="aligncenter size-full wp-image-32703 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot.png" data-srcset="" sizes="(max-width: 1322px) 100vw, 1322px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot.png 1322w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot-300x89.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot-768x228.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25114846/google-translate-screenshot-1024x304.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You don’t have to look very far for an easy translation tool. Google offers a free tool called Google Translate to quickly translate your site content to over 100 languages.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
All you have to do is type or copy-paste your text into the box on the right, choose the language (or let the tool detect it for you), and then choose the language you want to translate it to. Hit “Translate” and copy the generated translation.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If it sounds too good to be true for a free tool, you would be wrong. According to <a href="https://www.washingtonpost.com/news/innovations/wp/2016/10/03/google-translate-is-getting-really-really-accurate/?utm_term=.32b75479d817" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">The Washington Post</a>, the accuracy of Google Translate is comparable to human translators, thanks to its recently updated <span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Google Neural Machine Translation system</span>. It still occasionally drops words and mistranslates non-standard sentences where the object of the preposition is not clear. Overall, however, it is quite accurate. It will even append the right punctuation mark for you, and it offers a pronunciation guide in case you want to know how your translated content sounds. Not bad for a free tool, eh?</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="google translate from English to French" class="aligncenter size-full wp-image-32705 lazy-loaded" data-jpibfi-indexer="0" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french.png" data-srcset="" sizes="(max-width: 1301px) 100vw, 1301px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french.png 1301w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french-300x72.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french-768x185.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115113/google-translate-from-english-to-french-1024x247.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<a href="https://www.bablic.com/" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Bablic</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
The site positions itself as a one-stop localization shop offering the whole gamut of services, including web design, style editing, SEO, and of course, translation.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Bablic offers translation in any language for any website, and you can choose up to 30 languages for your site, depending on your plan. <span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">You can try the service without charge for one language</span>, and you will not even have to register if you just want to see what your site will look like without actually publishing it.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="Bablic" class="aligncenter size-full wp-image-32708 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic.png" data-srcset="" sizes="(max-width: 786px) 100vw, 786px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic.png 786w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic-300x56.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115316/bablic-768x145.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You just have to type in the URL and click on “Try Now For Free.” Select a language you want to translate your website content to, the selector type, and type of translation. You have a choice of Machine Translation, Professional Translation (human translators), and “I will translate myself.”</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="bablic pick the translation" class="aligncenter size-full wp-image-32709 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation.png" data-srcset="" sizes="(max-width: 946px) 100vw, 946px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation.png 946w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation-300x190.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115451/bablic-pick-the-translation-768x485.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can only choose Machine Translation or self-translation for the free trial, but the Machine Translation already looks good for the most part.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also edit each element on your site and add more languages, but you have to sign up to access those additional features. If you decide you want to integrate the translation to your website, you also have to register. Once you do, you have to add the Bablic code snippet to the <head> tag of your site.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img class="aligncenter size-full wp-image-32711 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115709/youre-almost-there.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115709/youre-almost-there.png" data-srcset="" sizes="(max-width: 742px) 100vw, 742px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115709/youre-almost-there.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115709/youre-almost-there.png 742w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115709/youre-almost-there-300x254.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This tool is intuitive and simple to use even for non-techy users, and it fully automates the translation process. If you choose, you can also include automatic updates in the translation whenever you make changes to the site. It is quite affordable for small businesses considering its many features. Paid plans (after a 14-day free trial and billed annually) are from $12/month with two languages to $159 a month for unlimited languages.</div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<a href="https://essays.scholaradvisor.com/" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Essay ScholarAdvisor</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Sometimes you just need really good English to make your site look professional for your target market. If you are a stickler for accuracy, then the human touch is indispensable for your English translation needs. This writing service employs professional writers who are native English speakers, so you will get impeccable site content every time. The rates are reasonable, starting at $6.99 for editing 275 words. You just have to put in the details of your order, pay for it, and wait for delivery.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="essay scholar advisor" class="aligncenter size-full wp-image-32713 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115852/essay-scholar-advisor.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115852/essay-scholar-advisor.png" data-srcset="" sizes="(max-width: 726px) 100vw, 726px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115852/essay-scholar-advisor.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115852/essay-scholar-advisor.png 726w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25115852/essay-scholar-advisor-300x217.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It is as easy as that!</div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<a href="https://www.smartling.com/" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Smartling</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
<img alt="meet smartling" class="aligncenter size-full wp-image-32715 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling.png" data-srcset="" sizes="(max-width: 1333px) 100vw, 1333px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling.png 1333w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling-300x106.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling-768x270.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120031/meet-smartling-1024x360.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Smartling is a manual translation service that mimics the features of a machine translator. It is fully automated, yet it uses a team of human translators to do the actual job. Its API automatically captures your site content, fields it out to professional translators or to your in-house translators, and then uploads it back to your site while you relax. You can be sure that your translations will be contextually accurate and executed in a timely manner.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The biggest problem with Smartling is the price. Designed primarily for B2B companies, the paid plans are a bit rich for most small to medium companies. They start at $200 a month (billed annually). You can get a quote for a customized plan, so you might get a more affordable proposal. To get a quote for your business, you have to sign up for an account.</div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<a href="https://www.stormdance.net/software/catscradle/overview.htm" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">CatsCradle 4</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
This translation tool does not actually translate your content. It is a web page editor for self-translation, designed specifically for professional translators. The key benefit of this tool is to capture the original text and format the translation so that it retains the original layout and HTML code.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you think this is not such a big deal, you probably haven’t tried doing a translation in a regular text editor. Common issues you will encounter using this method include:</div>
<ul style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Missing text because it was hidden and thus not copied</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Uneditable text</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Color or font changes</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Broken links</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Uneven or incorrect formatting</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Messed up page layouts</li>
</ul>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
CatsCradle looks at the back-end to ensure that everything on the web page is in the editor. Once you finish translating the text, the tool automatically integrates it into your web page. You can monitor what is happening on the web page from the app on the fly if you want to by using its real-time view feature. The tool makes it easy for you to translate it to Chinese, Japanese, Greek, Thai, or Cyrillic because it has full support for Unicode. It also supports .hhc, .hhk, and .chm files.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="catscradle 4" class="aligncenter size-full wp-image-32718 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120230/catscradle-4.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120230/catscradle-4.png" data-srcset="" sizes="(max-width: 512px) 100vw, 512px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120230/catscradle-4.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120230/catscradle-4.png 512w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/25120230/catscradle-4-277x300.png 277w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can use the free edition (Spark v4), but it has limited features. The Pro edition is free to try for 30 days, and it costs a one-time fee of £49.99 to buy. It only works in Windows-based systems, however, so Mac and Linux users are out of luck.</div>
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
The Takeaway: Resonate with your target market</h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Localization is a key factor in connecting with your target audience if you want to go global. Before you launch an international campaign, make sure you have the appropriate translations for your site. Having localized content for your website allows your customers to easily understand your message in a language they know. It can spell the difference between spectacular success and costly failure.</div>
<div style="background-color: #fffbe6; border: 2px solid rgb(255, 246, 195); box-sizing: border-box; margin: 0px 0px 15px; outline: 0px; padding: 20px;">
<h2 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
UPDATE: “The Pepsi Challenge” by <a href="https://www.crazyegg.com/blog/author/solrac/" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Carlos Augusto</a></h2>
<div style="box-sizing: border-box; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
So I decided to take the “Pepsi Challenge”; I reviewed the following three translation services by supplying some text from the Crazy Egg blog, and opting for both English to Spanish and English to Portuguese translations.</div>
<h3 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
Google Translate</h3>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For simple, straightforward text translation Google Translate is the most user-friendly and simple to use service. You merely copy and paste any text and you get instant results.</div>
<h4 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 26px; font-weight: 400; line-height: 1.38; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
English to Spanish</h4>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The accuracy of the translation is decent but very basic.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="Google Translate Crazy Egg" class="aligncenter size-full wp-image-32772 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg.png" data-srcset="" sizes="(max-width: 2502px) 100vw, 2502px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg.png 2502w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg-300x73.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg-768x186.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190001/Google-Translate-Crazy-Egg-1024x248.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<h4 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 26px; font-weight: 400; line-height: 1.38; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
English to Portuguese</h4>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The accuracy of the translation also appears good and free of errors.</div>
<h4 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 26px; font-weight: 400; line-height: 1.38; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
Caveats Noticed</h4>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The numeric string “100” does not get translated. Instead, you must type “one hundred”, and you get the proper translation.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The English tech-slang “tool”, which we understand to mean software service, is translated to the literal words herramienta and ferramenta respectively. These words seem to be too long and may be awkward in normal speaking flow.</div>
<h3 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
Bablic</h3>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Bablic is my favorite service and one that I would use for my business. They offer almost all the same features as the other services but at a more reasonable price, and the Spanish translation is quite accurate as well. Most interestingly, it allows you to choose between different Spanish dialects which may be important in special cases, so that nothing gets lost in translation. Finally, they focus on web page translation, and provide you with their visual editor, giving you a live view of your website on the left, magically translated to your target language, with fine-grained controls on the right.</div>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="Bablic translator Crazy Egg Blog" class="aligncenter size-full wp-image-32773 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="5 Useful Tools for Translating Your Website Content" data-jpibfi-post-url="https://www.crazyegg.com/blog/how-to-translate-your-website-content/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog.png" data-srcset="" sizes="(max-width: 2548px) 100vw, 2548px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog.png 2548w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog-300x179.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog-768x458.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2017/09/26190023/Bablic-translator-Crazy-Egg-Blog-1024x610.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 9px auto 29px; max-width: 100%; outline: 0px; padding: 0px; text-align: center; vertical-align: middle;" /></div>
<h3 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
Smartling</h3>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Smartling combines an automated tool with real humans, which means you get an actual person translating your content — not an app — providing a fully localized experience. Like Bablic, you also can choose between regional dialects, but since Smartling connects your wallet to real people, you can choose from a huge number of dialects.</div>
<h3 style="box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
In Conclusion</h3>
<div style="box-sizing: border-box; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
While all of these translation services get the job done, Bablic is the most robust, most accurate, and best overall for business use, while Smartling is the most expensive and most accurate because they connect you to a real human translator. And of course, for quick translations at no cost to you, nothing beats Google Translate.</div>
</div>
</div>
</div>
</div>

ARTICLES SITES 5 Useful Tools for Translating Your Website Content

The global economy has expanded your potential market in a way that was not possible even ten years ago, leveling the playing field for s...

Character traits Scorpio

August 08, 2018 Heikal 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://usercontent2.hubstatic.com/6293223.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://usercontent2.hubstatic.com/6293223.jpg" width="256" /></a><br />
<div class="full module moduleText" id="mod_18105918" style="clear: left; color: #4b4949; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; margin-bottom: 12px; word-break: break-word; word-wrap: break-word;">
<div class="txtd" id="txtd_18105918">
<div style="margin-bottom: 0.75em;">
What is the first expression you gave when someone told you that he was a Scorpio? Whether you believe in astrology or not, you may already have preconceived notions about a Scorpio, especially a Scorpio male. Are weird, passionate, sexual and vindictive some of the words that come to your mind? I am sure you would have heard about these<strong> Scorpio male personality</strong> traits from either someone else or from the internet.</div>
<div style="margin-bottom: 0.75em;">
There are undoubtedly thousands of blogs and articles out there which talk about a Scorpio man’s personality and most of them give you a decent picture of a Scorpio male. However it probably won’t get better than to understand a Scorpio male personality from a Scorpio himself. So let us see what a Scorpio man is all about.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Mysterious and Charming</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
Every blog you may have read will talk about how mysterious a Scorpio male is. This is indeed true. A Scorpio man is probably the most mysterious of all the people in the zodiac other than his female counterpart. The reason for this is that he is very secretive. Added to that is a Scorpio’s famous (or infamous) all penetrating gaze that can make almost anyone feel naked. While a Scorpio male can read most people like an open book, he is one person you can never ever read completely. He is so deep that it may take a lifetime for you to understand him.</div>
<div style="margin-bottom: 0.75em;">
A Scorpio man is also sometimes referred to as the James Bond of the zodiac. This is because of the mysterious and confident aura he emits around him which draws the opposite sex to him.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Secretive</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
Talking about being secretive, Scorpio men are the ones who are most commonly accused of being highly secretive (at least I get it all the time from people around me). They do not open up easily to people around them since they don’t trust people easily. A Scorpio man may know you for a lifetime, but still won’t reveal all his secrets to you. Even the most socially active and talkative Scorpio man has his secrets and will never talk about it. He is willing to die for his secrets than revealing it to even his closest people. Giving up his secret is like taking out a part of his body.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Passionate</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
There is no other sign in the zodiac which can come close to a Scorpio male when it comes to being passionate. A Scorpio male is considered the most passionate and the best lover you can find. Unfortunately, most people limit their thoughts to sex and romance. A Scorpio male is passionate not only in the department of love, but in everything he does. If he is doing something he really loves, he will put his heart and soul into it which is immediately evident to a person. If you see someone talk very passionately about anything, he may probably be a Scorpio. He loves passionately and he hates passionately. There is no middle ground.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Tough yet soft</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
Most blogs you read mention this in a line. A Scorpio male has a very tough outer shell but is very soft inside. His emotions run very deep and he knows that. This is probably the reason why he puts up a tough facade in order to not get hurt. This tough, yet calm face is also the reason why people don’t easily approach him. This, coupled with his non-trusting nature is the reason why he has few friends in his inner circle. It is indeed very tough to get into his inner circle, but if you are lucky enough to make it there, he is one guy who is willing to sacrifice himself for you.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Emotional and Intelligent</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
Scorpios are often notorious to make decisions through their hearts. However, this is not true all the time. It is true that Scorpios are passionate and make decisions which appeal to their emotions. However, Scorpios are masters of both emotions and logic. As much as a Scorpio man tends to take an emotional decision, he is also very good at looking at the entire situation in a logical and analytical way, and if he sees it right, no one can stop him from taking that decision.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong></strong><strong>Wise and Mature</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
It is also said that Scorpios in general are wise beyond their age. This is true again. A Scorpio guy may not be a Math or economics Wiz, or a rocket scientist, but he is one of the most intelligent and wisest people you will find. You may compare a 25 year old Scorpio male’s wisdom and maturity to a 35 year old male of most other signs. It is difficult to understand why this is so. It is just that what most people have to learn through years of experience, he already knows.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Moody</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
Let me explain this. A Scorpio person is a deep thinker. When he is dealing with a challenge or facing issues, he tends to withdraw into his shell unlike others who voice their problems. Once he withdraws into his shell, he tries solving problems in his own way in a focused manner. He doesn't like anyone interrupting in any way when he is thinking deep, as he likes to be left alone. So, when someone tries to interfere his problem solving process, he tends to get agitated and irritated. When his "problem solving" cap is not on, he is generally a warm and a happy person. This frequent change in his behavior is generally perceived as his mood swings.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Ambitious</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
One of the personality traits of a Scorpio man is that he is highly ambitious. He may never tell you what his goals in life are, but he does have certain goals he wants to achieve at any cost. However, though Scorpios love to lead a good life surrounded by luxuries, the end goal necessarily need not be money oriented. A Scorpio is more oriented towards achieving something that gives him an emotional and more importantly, a spiritual satisfaction. Most Scorpios in general also have high standards about themselves and people around them. They demand high quality from themselves and people around them.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Powerful</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
A Scorpio easily attracts and is attracted to power. This does not necessarily mean that a Scorpio wants to be in the limelight. In fact, unlike certain other zodiac signs who like to be in the limelight while wielding power, a Scorpio man rarely craves to be at the forefront. A Scorpio man is ruled by Pluto, lord of the underworld. As such, he prefers to stay away from the limelight. He is one person who prefers to be at the back end of the stage while he pulls the strings.</div>
<ul style="margin: 0px 0px 0.75em 2em; padding: 0px;">
<li style="margin: 0px 0px 0.5em;"><strong>Vindictive</strong></li>
</ul>
<div style="margin-bottom: 0.75em;">
This is one negative trait for which he is most famous for. But before describing it, here is a clarification. A Scorpio is a very warm and friendly person… as long as you do not cross him. He is willing to give his life for you if you prove your trustworthiness. However, never ever make a mistake of stepping on the wrong foot of a Scorpio man. Unlike his female counterpart who may forgive you for your foolishness of crossing her, a male Scorpio rarely forgives you and even if he does, he will never forget it. Some Scorpio men go to any extent to have their revenge. You may never be able to gain a Scorpio man's trust again in your lifetime. As the cliché goes, he can be your best friend or your worst enemy.</div>
</div>
</div>
<div class="full module moduleImage" id="mod_18106001" style="background-color: white; clear: both; color: #4b4949; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; margin-bottom: 12px; word-break: break-word; word-wrap: break-word;">
<figure style="margin: 0px 0px 10px;"><div class="image_wrapper" data-image-id="8536602" data-mdi-id="4721454" id="slide_img_4721454_8536602" style="position: relative;">
<img alt="He is your best friend. He is your worst nightmare." class="lazy" data-original="https://usercontent1.hubstatic.com/8536602.jpg" data-ratio="1" src="https://usercontent1.hubstatic.com/8536602.jpg" style="display: block; height: auto; margin: 0px auto; max-width: 100%; width: auto;" title="He is your best friend. He is your worst nightmare." /></div>
<figcaption class="caption" id="img_desc_8536602" style="color: #999999; margin-top: 0.4em; text-align: center;"><span class="caption_text" style="color: #888888; font-size: 0.92em; font-style: italic; line-height: 1.4em; margin: 0.4em 0px; padding: 0px; text-align: left; word-wrap: break-word;">He is your best friend. He is your worst nightmare.</span></figcaption></figure></div>
<div class="full module moduleText" id="mod_18105998" style="clear: left; color: #4b4949; font-family: Arial, Helvetica, sans-serif; font-size: 13.8px; margin-bottom: 12px; word-break: break-word; word-wrap: break-word;">
<h2 class="subtitle" style="color: #6ea6af; font-family: arial, helvetica, sans-serif; font-size: 1.7em; line-height: 1.3em; margin-bottom: 0.6em;">
Few more things you may want to know</h2>
<div class="txtd" id="txtd_18105998">
<div style="margin-bottom: 0.75em;">
1) Scorpio men usually have a <strong>sarcastic</strong> and a caustic sense of humor. They also sometimes have a deep sense of humor most people cannot fathom.</div>
<div style="margin-bottom: 0.75em;">
2) A Scorpio man usually does not fall in love easily. This does not mean that he does not get attracted to beauty. But he is not a person who is superficial. To know more about a Scorpio man in love, </div>
<div style="margin-bottom: 0.75em;">
3) Scorpio men are generally accused of being overbearing, having a short temper and being vindictive.</div>
<div style="margin-bottom: 0.75em;">
4) Scorpios are often seen as some of the <strong>most serious</strong> people in the zodiac.</div>
<div style="margin-bottom: 0.75em;">
5) A Scorpio guy rarely pretends and is very bad at telling a lie. He may tell you occasional white lies, but he can never pretend or fake. They also hate lies and pretenses given by others. So girls, please refrain from asking an honest opinion from a Scorpio man about your looks.</div>
<div style="margin-bottom: 0.75em;">
6) He is one of the<strong> most loyal </strong>persons you will get. He may flirt with other women, but he will always be loyal to one person.</div>
<div style="margin-bottom: 0.75em;">
7) Scorpios usually don’t like following rules laid out by someone else. They prefer following their own rules. They also love to bend and break rules to their liking. You may see them as the rebellious types.</div>
<div style="margin-bottom: 0.75em;">
8) Most Scorpios like orderliness and discipline in one form or the other.</div>
<div style="margin-bottom: 0.75em;">
9) Scorpio men are sometimes perceived as selfish.</div>
<div style="margin-bottom: 0.75em;">
10) A Scorpio man need not physically be attractive like Brad Pitt or George Clooney. However, his confidence and mysterious aura makes him very attractive to the opposite sex.</div>
<div style="margin-bottom: 0.75em;">
<strong>Best match for a Scorpio man</strong></div>
<div style="margin-bottom: 0.75em;">
Most astrology blogs claim that the ideal mate for a Scorpio man is either a water sign such as Cancer and Pisces or an earth sign such as Capricorn or Virgo. However, I would refrain from saying that. Honestly speaking, a match can never be made from sun sign compatibility alone. For example, some of my best friends are Scorpios, Libras, Leos and Sagittarius. I have also seen Scorpios marry air or fire signs and living happily. If you need to do a compatibility check, it needs to be done at a whole different level. It ultimately also depends upon the environment in which a person is brought up, and his/her belief and value systems among so many other things.</div>
<div style="margin-bottom: 0.75em;">
So these are the most common <strong>Scorpio male personality</strong> traits. Having said that, each person is unique in his/her own way. A sun sign can only give you the strong traits of a person and not the entire personality. Hope this little (or rather long) article helps you in understanding a Scorpio man better. Now you don’t have a reason to call him weird. Is a Scorpio woman similar to her male counterpart? Well… To be honest, both are entirely different species. But yes, both are similar in many ways too.</div>
</div>
</div>
</div>

ENTERTAINMENT Character traits Scorpio

What is the first expression you gave when someone told you that he was a Scorpio? Whether you believe in astrology or not, you may alr...

20 Ways to Speed Up Your Website and Improve Conversion

August 07, 2018 Heikal 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
A few extra seconds could have a <span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">huge </span>impact on your ability to engage visitors and make sales.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that having a fast site is essential — not just for <a href="https://www.crazyegg.com/blog/rankings-you-see-on-google/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">ranking well with Google</a>, but for keeping your bottom-line profits high.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span id="more-13140" style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"></span></div>
<h2 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
How website speed optimization influences conversions</h2>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Slow speeds <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.crazyegg.com/blog/website-speed-conversions/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">kill conversions</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In fact, 47% of consumers expect websites to load in <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://blog.kissmetrics.com/loading-time/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">two seconds or less</a></u> — and 40% will abandon a page that takes three or more seconds.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that if your site takes more than three seconds to load, you lose almost half of your visitors before they even arrive on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
That alone is a <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">huge </em>blow to your potential conversions.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And for the visitors that decide to stick around, your slow load times can deter them from returning in the future. In one survey, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://blog.kissmetrics.com/speed-is-a-killer/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">79% of customers</a></u> said they would not return to a site with poor performance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website" class="alignnone wp-image-36328" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231252/Pasted_Image_2_9_18__3_10_PM.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231252/Pasted_Image_2_9_18__3_10_PM.png" data-srcset="" height="433" sizes="(max-width: 281px) 100vw, 281px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231252/Pasted_Image_2_9_18__3_10_PM.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231252/Pasted_Image_2_9_18__3_10_PM.png 281w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231252/Pasted_Image_2_9_18__3_10_PM-195x300.png 195w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" title="speed up your website" width="281" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In that same survey, 52% of shoppers said that quick page loading is important to their site loyalty and 44% said they tell their friends about poor site experiences.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This survey also discovered that a one-second delay can decrease customer satisfaction by about 16%.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It should come as no surprise, then that <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.crazyegg.com/blog/site-speed-matters-cro/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">improving site speed improves performance</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
One of the best examples of this is Walmart’s improvement in conversions and revenue after increasing their site speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
During their initial analysis, they found that visitors who converted had received pages that loaded two times as fast as the visitors who did not convert.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website wallmart" class="alignnone wp-image-36312" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231225/pasted-image-0-10.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231225/pasted-image-0-10.png" data-srcset="" height="451" sizes="(max-width: 574px) 100vw, 574px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231225/pasted-image-0-10.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231225/pasted-image-0-10.png 574w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231225/pasted-image-0-10-300x236.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="574" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This showed that the faster a page, the more likely a visitor was to make a purchase.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
At the end of their optimization, Walmart reported the following results:</div>
<ul style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">For every one second of improvement they experienced up to a 2% increase in conversions.</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">For every 100 ms of improvement, they grew incremental revenue by up to 1%.</li>
</ul>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In another study, the relationship between load times and conversion rates showed a <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://conversionxl.com/blog/testing-tools-site-speed/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">25% decrease in conversion rates</a></u> with just one extra second of load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="loading time conversions" class="wp-image-36306" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions.png" data-srcset="" sizes="(max-width: 1024px) 100vw, 1024px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions.png 1024w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions-300x146.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231212/loading-time-conversions-768x375.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s clear that putting in the effort to increase your site speed — even by one second — could have a major impact on conversions</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Still not convinced?</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Consider that Google once experienced a <span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">20% drop in traffic</span> because of <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://goboomfactor.com/more-evidence-that-speed-is-key-to-user-experience/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">an extra .5 seconds</a></u> in load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Along the same lines, Amazon once ran A/B tests in which they delayed pages in increments of 100 milliseconds. They found that <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://goboomfactor.com/more-evidence-that-speed-is-key-to-user-experience/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">even small delays</a></u> resulted in “substantial and costly” decreases in revenue.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
These are two of the most well-known and reputable sites in existence — so if users aren’t willing to wait an extra second for <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">them </em>to load, they probably won’t wait for you.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px; text-align: center;">
<a href="https://www.crazyegg.com/snapshots?utm_source=google&utm_campaign=blog" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">How to find out what’s killing your conversions</a></div>
<h2 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
How your website speed influences visibility</h2>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Now that Google takes speed into consideration when ranking sites, your load times can also influence how easily users can find you in the first place.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is especially true now that it is rolling out its <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.crazyegg.com/blog/optimize-your-website-for-googles-mobile-first-index/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">mobile-first index</a></u>. As of December 2017, the search engine has started ranking all search results based on the mobile versions of pages.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Mobile searches <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.thinkwithgoogle.com/data-gallery/detail/mobile-vs-desktop-search-trends/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">outnumbered desktop searches</a></u> for the first time in 2015, and its share of overall search only continues to grow.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that it’s in Google’s best interest to cater its search results to mobile users. They don’t want to direct their users to sites that won’t load or function well on their devices.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As a result, mobile user experience will now play a major role in search rankings — even in desktop search results.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is a <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://searchengineland.com/finally-going-mobile-friendly-collision-course-googles-mobile-first-index-case-study-265227" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">the exact opposite</a></u> of how the index used to work.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
User experience has long been a factor in rankings, but prior to this shift, it only took desktop experience into consideration. So even if a site provided a poor mobile experience, it still had a shot at ranking on page one.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is no longer the case.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Now, pages are indexed and ranked based on the experience they provide mobile users.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website mobile" class="alignnone wp-image-36288 lazy-loaded" data-jpibfi-indexer="0" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180.jpg" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180.jpg" data-srcset="" height="400" sizes="(max-width: 761px) 100vw, 761px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180.jpg" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180.jpg 761w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180-300x158.jpg 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231137/mobile-first-180-600x315.jpg 600w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="761" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
So if you want to maintain (or improve) your rankings and visibility, it’s essential to know how to reduce loading time of website. You must have a site that provides a quick, easy user experience — on any browser or screen size.</div>
<h2 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
What is a good load time?</h2>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Before you start working on your site’s speed, it’s a good idea to set a goal for where you want it to be.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
That can be difficult if you aren’t sure what an acceptable page speed is.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
According to Google, best practice is three seconds. Unfortunately, according to its recent <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">benchmark report findings</a></u>, most sites are nowhere near that.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In an analysis of 900,000 mobile ad landing pages spanning 126 countries, Google found that 70% of the pages analyzed took nearly seven seconds for the visual content above the fold to display.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Of all the industries they included, none had an average even close to their recommended best practice of three seconds.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="industry average speed" class="wp-image-36291 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed.png" data-srcset="" sizes="(max-width: 743px) 100vw, 743px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed.png 743w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed-300x157.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231143/industry-average-speed-600x315.png 600w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The average time it takes to fully load a mobile landing page is 22 seconds, but 53% of visits are abandoned if a mobile site takes longer than three seconds to load.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, as page load time goes from one to ten seconds, the probability of a mobile user bouncing increases by 123%</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="bounce probability" class="wp-image-36286 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability.png" data-srcset="" sizes="(max-width: 1000px) 100vw, 1000px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability.png 1000w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability-300x209.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231133/bounce-probability-768x536.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that site owners in general have a <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">lot </em>of work to do to get their sites up to par in Google’s eyes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But on the upside, it also means that if you put in the work to get your site speed to an acceptable level, you’re well ahead of the pack in terms of user experience.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As you improve your site, you can use Google’s recommendations and benchmarks to set your goals and measure your performance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
After all — as the largest search engine in the world, Google can have a major impact on your success. So using their standards as <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">your </em>standards is never a bad idea.</div>
<h2 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
How to speed up your website in 2018</h2>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
There are tons of factors that influence how long each page on your site takes to load, so there are many different steps you can take to increase your speed and improve user experience.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In this post, we’ll go over 20 tips and best practices you can use to decrease your load times and improve your site’s performance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And if that number sounds overwhelming — don’t worry.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
While all of these tips can help you improve your site speed, you don’t need to do all of them today.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In fact, if you’ve worked on your site speed in the past, your site may already be in line with some of these best practices.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With that in mind, let’s get started.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">1. Minimize HTTP requests</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
According to Yahoo, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developer.yahoo.com/performance/rules.html#num_http" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">80% of a Web page’s load time</a></u> is spent downloading the different parts of the page, like images, stylesheets, and scripts.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
An HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The first step to minimizing your requests is to figure out how many your site currently makes, to use as a benchmark.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you use Google Chrome, you can use the browser’s Developer Tools to see how many HTTP requests your site makes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Right-click on the page you want to analyze, and click “Inspect,” then click the “Network” tab. (If you don’t see the “Network” tab, you may need to expand the Developer Tools sidebar by dragging the left border to the left.)</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website" class="alignnone wp-image-36345" data-jpibfi-indexer="1" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network.png" data-srcset="" height="418" sizes="(max-width: 983px) 100vw, 983px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network.png 983w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network-300x128.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231324/chrome-dev-network-768x327.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="983" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The “Name” column shows all of the files on the page, the “Size” column shows the size of each file, and the “Time” column shows how long it takes to load each file.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In the bottom left corner, you’ll also see the number of total requests the site makes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Reducing this number of requests will speed up your site, look through your files and see if any are unnecessary.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You may not notice anything immediately, but some of them are likely prime candidates for combining — which we’ll get to in the next steps.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">2. Minify and combine files</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Now that you know how many requests your site makes, you can get to work on reducing that number. The best place to get started is with your HTML, CSS, and JavaScript files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
These are extremely important files, as they determine your site’s appearance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
They also add to the number of requests your site makes every time a user visits it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can reduce this number by minifying and combining your files. This reduces the size of each file, as well as the total number of files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is especially important if you use a templated website builder. These make it easy to build a website, but they sometimes create messy code that can slow your site considerably.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Minifying a file involves removing unnecessary formatting, whitespace, and code.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Since every unnecessary piece of code adds to the size of your page, it’s important that you eliminate extra spaces, line breaks, and indentation. This ensures that your pages are as lean as possible.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Combining files is exactly what it sounds like. If your site runs multiple CSS and JavaScript files, you can combine them into one.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There are several ways to minify and combine files, and if your site runs on WordPress, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wp-rocket.me/blog/reduce-http-requests-speed-wordpress-site/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">plugins like WP Rocket</a></u> make the process fairly simple.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have this plugin installed, go the “Static Files” tab and check the files you want to minify and combine.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website minify" class="alignnone wp-image-36337 lazy-loaded" data-jpibfi-indexer="2" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12.png" data-srcset="" height="496" sizes="(max-width: 800px) 100vw, 800px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12.png 800w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12-300x186.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231308/pasted-image-0-12-768x476.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="800" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This can include HTML, CSS, and JavaScript files, as well as Google Fonts.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, hit “Save Changes” to complete the process. You can reload your page and look at Developer Tools again to see the impact that your changes made.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When it comes to your website, leaner is better. The fewer elements on a page, the fewer HTTP requests a browser will need to make the page render — and the faster it will load.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">3. Use asynchronous loading for CSS and JavaScript files</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve minified and combined some of your files, you can also optimize the way that they load on your pages.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Scripts like CSS and JavaScript can be loaded in two different ways: Synchronously or Asynchronously.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your scripts load synchronously, they load one at a time, in the order they appear on the page. If your scripts load asynchronously, on the other hand, some of them will load simultaneously.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Loading files asynchronously can speed up your pages because when a browser loads a page, it moves from top to bottom.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If it gets to a CSS or JavaScript file that is not asynchronous, it will stop loading until it has fully loaded that particular file. If that same file were asynchronous, the browser could continue loading other elements on the page at the same time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Using the same “Static Files” tab of the WP Rocket plugin, check the options next to “Render-blocking CSS/JS.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website render blocking" class="alignnone wp-image-36272 lazy-loaded" data-jpibfi-indexer="3" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0.png" data-srcset="" height="479" sizes="(max-width: 800px) 100vw, 800px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0.png 800w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0-300x180.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231105/pasted-image-0-768x460.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="800" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Click “Save Changes,” then test your site to make sure that everything loads correctly.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">4. Defer JavaScript loading</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Deferring a file means preventing it from loading until after other elements have loaded. If you defer larger files, like JavaScript, you ensure that the rest of your content can load without a delay.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a WordPress site, you can the WP Rocket plugin mentioned above to easily enable deferred JavaScript loading. Simply check the box next to “Load JS files deferred,” and you’re good to go.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have an HTML site, you’ll need to place a call an external JavaScript file just before the </body> tag, which looks something like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website js" class="alignnone wp-image-36330 lazy-loaded" data-jpibfi-indexer="4" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231255/defer-js.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231255/defer-js.png" data-srcset="" height="442" sizes="(max-width: 419px) 100vw, 419px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231255/defer-js.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231255/defer-js.png 419w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231255/defer-js-284x300.png 284w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="419" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For more information, check out this <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/defer-loading-javascript.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">tutorial on defer loading JavaScript</a></u>.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">5. Minimize time to first byte</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In addition to the amount of time it takes for your page to fully load, you’ll also want to take a look at the amount of time it takes to <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">start </em>loading.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://kinsta.com/blog/ttfb/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Time to first byte</a></u>, or TTFB, is the amount of time a browser has to wait before getting its first byte of data from the server. Google recommends a TTFB of <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developers.google.com/speed/docs/insights/Server" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">less than 200 ms</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Unlike a lot of the front-end performance factors most site owners focus on, this is a server-side concern.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When a user visits your site, their browser sends an HTTP request to the server that hosts it. There are three steps that need to happen between that initial request and the first byte of data:</div>
<ol style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">DNS lookup</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Server processing</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Response</li>
</ol>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can see how long this process takes for your site using either Chrome’s Developer Tools or a third-party tool.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you use Developer Tools, it’s important to remember that response time can be affected by your Internet connection. So the slower your own connection, the slower your server response will appear.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
To access this information in Developer Tools, click the “Network” tab and mouse over the top item in the “Waterfall” column.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website ttfb chrome" class="alignnone wp-image-36300 lazy-loaded" data-jpibfi-indexer="5" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231201/ttfb-chrome.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231201/ttfb-chrome.png" data-srcset="" height="535" sizes="(max-width: 592px) 100vw, 592px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231201/ttfb-chrome.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231201/ttfb-chrome.png 592w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231201/ttfb-chrome-300x271.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="592" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also use any number of free third-party tools like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.webpagetest.org/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">WebPageTest</a></u> test your site from a data center.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website test" class="alignnone wp-image-36313 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231226/webpagetest.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231226/webpagetest.png" data-srcset="" height="360" sizes="(max-width: 615px) 100vw, 615px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231226/webpagetest.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231226/webpagetest.png 615w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231226/webpagetest-300x176.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="615" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your TTFB is under 200ms, you’re in good shape.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If not, there could be a few different issues at the root.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In general, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/ttfb.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">most issues with slow TTFB</a></u> are caused by either network issues, dynamic content creation, web server configuration, and traffic.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="ttfb causes" class="wp-image-36325 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes.png" data-srcset="" sizes="(max-width: 900px) 100vw, 900px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes.png 900w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes-300x200.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231247/ttfb-causes-768x512.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Of these four factors, you have control over two: Dynamic content creation and server configuration.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Unlike with static pages, a server needs to “build” a dynamic file before responding.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="static dynamic" class="wp-image-36302 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic.png" data-srcset="" sizes="(max-width: 900px) 100vw, 900px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic.png 900w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic-300x200.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231204/static-dynamic-768x512.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a WordPress site, your pages are most likely dynamic. This means that they need to interact with a database to be “built” with PHP before they are delivered.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can reduce the time that this takes by enabling caching — which we’ll get to in a minute.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">6. Reduce server response time</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
One of the biggest factors in how quickly your page loads is the amount of time your DNS lookup takes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
A DNS, or domain name system, is a server with a database of IP addresses and their associated hostnames. When a user types a URL into their browser, a DNS server is what translates that URL into the IP address that indicates its location online.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
A DNS lookup, then, is the process of a finding a specific DNS record. You can think of it as your computer looking up a number in a phone book.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, let’s say you wanted to visit the URL ubnt.com. You’d type this into your browser — but that means very little to your computer.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Your ISP will perform a DNS lookup to find the IP address associated with that URL.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website dns" class="lazy-hidden alignnone wp-image-36347" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14.png" data-srcset="" height="685" sizes="(max-width: 1600px) 100vw, 1600px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14.png 1600w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14-300x128.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14-768x329.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231328/pasted-image-0-14-1024x438.png 1024w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="1600" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It will get an IP address like 52.40.57.158.443, which tells it where to find the site you’re looking for. This step prevents users from needing to memorize long strings of numbers to access information online.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The amount of time this step takes depends on how fast your DNS provider is. If not, it may be time to switch to a faster DNS provider.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can check out <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://www.solvedns.com/dns-comparison/2017/02" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">this DNS speed comparison report</a></u>, which is updated monthly, to get an idea of where your provider stacks up, and see which providers offer higher speeds.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website provider" class="alignnone wp-image-36289 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6.png" data-srcset="" height="500" sizes="(max-width: 500px) 100vw, 500px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6.png 500w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6-150x150.png 150w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231139/pasted-image-0-6-300x300.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="500" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re using a slow DNS, this increases the time it takes for browsers to locate your site. Switching to a faster DNS provider can speed up the process.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">7. Choose the right hosting option for your needs</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Most new site owners choose the cheapest possible option for hosting. While this is often enough in the beginning, you’ll likely need to upgrade once you <a href="https://www.crazyegg.com/blog/how-get-traffic-website/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">start getting more traffic</a>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When looking at hosting, you have three different options:</div>
<ul style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Shared hosting</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">VPS hosting</li>
<li style="box-sizing: border-box; margin: 0px 0px 0px 40px; outline: 0px; padding: 0px 0px 0px 7px;">Dedicated server</li>
</ul>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Shared hosting is the cheapest option and you can often get it for about five dollars per month.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With shared hosting, you share certain resources like CPU, disk space, and RAM with other sites hosted on the same server.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With VPS hosting, you still share a server with other sites, but you have your own dedicated portions of the server’s resources.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website shared vs vps hosting" class="alignnone wp-image-36275 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231111/shared-vs-vps-hosting.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231111/shared-vs-vps-hosting.png" data-srcset="" height="247" sizes="(max-width: 685px) 100vw, 685px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231111/shared-vs-vps-hosting.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231111/shared-vs-vps-hosting.png 685w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231111/shared-vs-vps-hosting-300x108.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="685" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
KeyCDN explains this using the analogy of <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.keycdn.com/support/what-is-a-virtual-private-server/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">living in an apartment vs. living in a condo</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you live in an apartment, you share certain facilities like laundry rooms and parking lots and have access to the building’s maintenance team.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you live in a condo, on the other hand, you don’t use common spaces, and you’re responsible for certain repairs and maintenance. There are also fewer residents in the building.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can look at dedicated hosting, then, as owning a home. You don’t share resources with anyone else, and you’re responsible for all maintenance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With a dedicated server, you have much more space — but you also have more work to do with configuration and technical setup.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="vps dedicated" class="lazy-hidden wp-image-36309" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231219/vps-dedicated.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231219/vps-dedicated.png" data-srcset="" sizes="(max-width: 635px) 100vw, 635px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231219/vps-dedicated.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231219/vps-dedicated.png 635w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231219/vps-dedicated-300x107.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you need tons of space and want complete control over your hosting, this is your best bet.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As you may have guessed, though, it’s the most expensive option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re at a point where your traffic levels are slowing down your server response times, it may be time to switch from shared hosting to a VPS, or from a VPS to a dedicated server.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">8. Run a compression audit</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s in your best interest to get your files to the smallest they can be, without sacrificing quality. The smaller your files, the faster they’ll load — and the lower your overall load times will be.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Pages with lots of images and other content can often end up being over 100KB in size.  As a result, they’re bulky and slow to download.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can speed up download times by compressing them.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
To get a sense of how compression could speed up your site, you can use <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://www.gidnetwork.com/tools/gzip-test.php" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">GIDNetwork</a></u> to run a compression audit.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Just enter your URL and click “Check.” If the page you enter isn’t compressed, you’ll see something like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="gid test" class="lazy-hidden wp-image-36284" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231129/gid-test.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231129/gid-test.png" data-srcset="" sizes="(max-width: 361px) 100vw, 361px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231129/gid-test.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231129/gid-test.png 361w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231129/gid-test-300x202.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This tells you the uncompressed size of your page, which you can later use as a benchmark to measure the results of compression.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Below that, you’ll see an analysis of how much you could potentially reduce the page’s size in terms of both size and percentage using a tool like Gzip (which we’ll get to in the next step).</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="gid scenario" class="lazy-hidden wp-image-36296" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231152/gid-scenario.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231152/gid-scenario.png" data-srcset="" sizes="(max-width: 655px) 100vw, 655px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231152/gid-scenario.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231152/gid-scenario.png 655w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231152/gid-scenario-300x138.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This compression involves HTML, CSS, JavaScript, plain text, and XML files.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">9. Enable compression</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The smaller your files, the faster your pages will load. Compression files is one of the easiest ways to reduce load times, and today, enabling compression with <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.gnu.org/software/gzip/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Gzip</a></u> is considered standard practice.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Gzip is a file format and software application that essentially locates strings of similar code in your text files, then temporarily replaces them to make the files smaller.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This works well with CSS and HTML, because these files typically have repeated code and whitespace.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. According to Yahoo, this can reduce download time <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developer.yahoo.com/performance/rules.html#num_http" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">by about 70%</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And since 90% of today’s Internet traffic travels through browsers that support Gzip, it’s a great option for speeding up your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re not sure if your site has Gzip enabled, you can use <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://checkgzipcompression.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">checkgzipcompression.com</a></u> to see. Just enter your site’s URL, and if you have Gzip enabled, you’ll see something like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="check gzip" class="lazy-hidden wp-image-36287" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip.png" data-srcset="" sizes="(max-width: 958px) 100vw, 958px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip.png 958w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip-300x111.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231135/check-gzip-768x283.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">don’t </em>have Gzip enabled, however, you’ll want to fix this as soon as possible.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your site runs on WordPress, both WP Rocket and W3 Total Cache plugins support enabling Gzip.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In W3 Total Cache, all you need to do is check the box next to “Enable HTTP (gzip) compression.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="w3 gzip" class="lazy-hidden wp-image-36327" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231250/w3-gzip.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231250/w3-gzip.png" data-srcset="" sizes="(max-width: 348px) 100vw, 348px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231250/w3-gzip.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231250/w3-gzip.png 348w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231250/w3-gzip-300x80.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a static HTML site, however, you’ll need to enable Gzip in your .htaccess file. The exact code you need depends on your server but if your site runs on Apache, for example, it looks like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="gzip apache" class="lazy-hidden wp-image-36320" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231238/gzip-apache.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231238/gzip-apache.png" data-srcset="" sizes="(max-width: 730px) 100vw, 730px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231238/gzip-apache.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231238/gzip-apache.png 730w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231238/gzip-apache-300x127.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There is also a <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/enable-compression.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">similar version of the necessary code</a></u> for NGINX servers.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">10. Enable browser caching</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Here’s how <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://yuiblog.com/blog/2007/01/04/performance-research-part-2/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Tenni Theurer</a></u>, formerly of Yahoo, explains it:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page. That may be as many as 30 components and 2.4 seconds.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 3" class="lazy-hidden wp-image-36276" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231113/pasted-image-0-3.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231113/pasted-image-0-3.png" data-srcset="" sizes="(max-width: 500px) 100vw, 500px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231113/pasted-image-0-3.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231113/pasted-image-0-3.png 500w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231113/pasted-image-0-3-300x213.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once the page has been loaded and the different components stored in the user’s cache, only a few components needs to be downloaded for subsequent visits.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In Theurer’s test, that was just three components and .9 seconds, which shaved nearly 2 seconds off the load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 13" class="wp-image-36339 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231311/pasted-image-0-13.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231311/pasted-image-0-13.png" data-srcset="" sizes="(max-width: 500px) 100vw, 500px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231311/pasted-image-0-13.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231311/pasted-image-0-13.png 500w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231311/pasted-image-0-13-300x54.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Theurer says that 40-60% of daily visitors to your site come in with an empty cache, so it’s critical that you make your page fast for these first-time visitors. But enabling caching can shave off a significant amount of time of returning visitors and provide a better user experience.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The way you set up caching depends on whether you run your site with WordPress or static HTML.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Increase your website speed in WordPress with W3 Total Cache</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you run a WordPress site, you can use a plugin like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/w3-total-cache/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">W3 Total Cache</a></u> to easily enable caching.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve installed it, navigate to “Page Cache” under “General Settings” and check the box next to “Enable.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="w3 page cache" class="lazy-hidden wp-image-36270" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231101/w3-page-cache.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231101/w3-page-cache.png" data-srcset="" sizes="(max-width: 670px) 100vw, 670px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231101/w3-page-cache.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231101/w3-page-cache.png 670w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231101/w3-page-cache-300x125.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This simple step on its own should give you a boost in site performance — but there’s more you can do to improve your results with the plugin.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Enabling browser caching lets you store a cached version of your site in a visitor’s browser. This means that when a user returns to your site, it will load faster.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can enable this option by navigating to General Settings > Browser Cache and checking the box next to “Enable.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="browser cache" class="lazy-hidden wp-image-36336" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231306/browser-cache.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231306/browser-cache.png" data-srcset="" sizes="(max-width: 670px) 100vw, 670px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231306/browser-cache.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231306/browser-cache.png 670w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231306/browser-cache-300x101.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you use a VPS or dedicated server, you can also enable object caching to speed up dynamic elements on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This feature is also under your General Settings.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="object cache" class="lazy-hidden wp-image-36301" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231203/object-cache.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231203/object-cache.png" data-srcset="" sizes="(max-width: 671px) 100vw, 671px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231203/object-cache.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231203/object-cache.png 671w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231203/object-cache-300x126.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re using a shared server, however, it is best to leave this option disabled. Object caching is a resource-intensive process and can end up slowing down your site — the exact <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">opposite </em>of what you want to accomplish with the plugin.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve configured your settings, you should see improvements in your load times immediately. W3 Total Cache claims that its users have seen 10x improvements in Google PageSpeed results, and up to 80% in bandwidth savings after fully configuring the plugin.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">For static HTML: .htaccess</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a static HTML site, you can enable caching by in your .htaccess file.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can add lines of code that tell browsers what to cache and how long to store it, which will look <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/leverage-browser-caching.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">something like this</a></u>:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website caching htaccess" class="lazy-hidden alignnone wp-image-36303" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231206/caching-htaccess.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231206/caching-htaccess.png" data-srcset="" height="468" sizes="(max-width: 756px) 100vw, 756px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231206/caching-htaccess.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231206/caching-htaccess.png 756w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231206/caching-htaccess-300x186.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="756" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This lets you set the amount of time you want each type of file to be stored in a visitor’s cache.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In general, static resources should have a cache lifetime of at least a week. Third-party resources like ads or widgets should have a cache lifetime of at least one day.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For all cacheable resources like JavaScript and CSS files, image files, media files, and PDFs, set caching between a minimum of one week and one year.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">11. Reduce image sizes</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Images can play a major role in your site speed. They’re often very large files, which can slow down page load times.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But removing them altogether is not an option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Consider this: Average eCommerce website conversions hover around 1-3%</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But that number can rise as high as 5 percent for some sites, like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.bigcommerce.com/case-study/natomounts/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">NatoMounts</a></u> — which sees an average conversion rate around five percent, with roughly 85% of those conversions on mobile.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
One of the best ways to get your conversion rate to this level is including lots of helpful product images. In one survey, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">66% of consumers</u> said they wanted to see at least three product photos before buying.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that if you want to run a successful eCommerce site, images are absolutely necessary.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And yet, according to Radware, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.slideshare.net/Radware/radware-web-performanceecommerceinfographic" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">45% of the top 100 eCommerce sites</a></u> don’t compress images!</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s clear that site owners everywhere have a lot of work to do when it comes to image compression — and this is important whether your site includes an eCommerce store or not.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can see how big of an impact images make on any of your pages with a tool like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.pingdom.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Pingdom</a></u>. Run a page speed test, then look at the “Requests by content type.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In this example, you can see that images make up over <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://buckeyeinteractive.com/blog/optimize-website-load-time-maintaining-image-sizes/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">40% of the content on the page</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="image percentage" class="lazy-hidden wp-image-36331" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage.png" data-srcset="" sizes="(max-width: 1005px) 100vw, 1005px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage.png 1005w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage-300x111.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231257/image-percentage-768x285.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that reducing their size could likely have a big impact on how long the page takes to load.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In fact, in one study, resizing 22MB of images down to 300KB resulted in a <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://www.yottaa.com/the-impact-of-image-compression-on-page-load-time/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">70% reduction in time to interact</a></u>, or the amount of time a user needs to wait before they can interact with a site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="impact image compression" class="lazy-hidden wp-image-36323" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231243/impact-image-compression.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231243/impact-image-compression.png" data-srcset="" sizes="(max-width: 690px) 100vw, 690px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231243/impact-image-compression.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231243/impact-image-compression.png 690w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231243/impact-image-compression-300x152.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
One of the easiest ways to reduce image file sizes is cropping your images to the correct size. For example, if you want an image to appear as 570px wide, resize the image to that width.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Don’t just upload an image that is 2000px wide and set the width parameter the size you want. This requires your page to load the full image, then adjust it to the appropriate size, slowing your page.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you use the width parameter to make images appear smaller on your site, resizing those images should be a priority. It’s an easy way to reduce the total size of each page and can have a major impact on your site’s speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Next, you can compress your image files with a few different tools.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your site runs on WordPress, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/wp-smushit/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">WP Smush</a></u> is a great option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Check the box next to “Automatically smush my images on upload,” and all of your new images will be compressed without an extra second of work.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also use this plugin to automatically resize all of the new files you upload. Set a maximum width and height, and any images that exceed them will be “smushed.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website wp smush" class="lazy-hidden alignnone wp-image-36281" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush.png" data-srcset="" height="709" sizes="(max-width: 1191px) 100vw, 1191px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush.png 1191w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush-300x179.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush-768x457.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231123/wp-smush-1024x610.png 1024w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="1191" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you don’t use WordPress, you can use a tool like A non-WordPress tool like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://compressor.io/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Compressor.io</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Before adding an image to your site, upload it into this tool and select whether you want lossy or lossless compression.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="compressor io" class="lazy-hidden wp-image-36271" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io.png" data-srcset="" sizes="(max-width: 818px) 100vw, 818px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io.png 818w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io-300x165.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231103/compressor-io-768x422.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
(If you’re not sure which is best, keep reading — we’ll get to that in just a minute.)</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, you’ll be able to see information about how much the file was reduced, and be able to download the new, smaller file.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="compressor io results" class="lazy-hidden wp-image-36318" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231235/compressor-io-results.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231235/compressor-io-results.png" data-srcset="" sizes="(max-width: 674px) 100vw, 674px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231235/compressor-io-results.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231235/compressor-io-results.png 674w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231235/compressor-io-results-300x97.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
After you’ve saved the new image file, you can upload it to your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Next, you’ll also want to make sure you’re using the appropriate file types for each image. This may seem like a minor concern, but the file types you use can affect each file’s size.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You have a few different options and the most common are <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://searchengineland.com/images-easiest-page-speed-win-269742" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">JPG, PNG, and GIF</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="image file types" class="lazy-hidden wp-image-36317" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231233/image-file-types.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231233/image-file-types.png" data-srcset="" sizes="(max-width: 548px) 100vw, 548px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231233/image-file-types.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231233/image-file-types.png 548w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231233/image-file-types-300x93.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
JPG is generally your best option for photos. It uses lossy compression, which means that some of an image’s data is lost when saved in this format.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This data loss is undetectable to viewers in photos, but results in a smaller file size than most image file types.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
So if you’re uploading pages with lots of photos, making sure that they’re all JPGs can significantly decreasing load times, without impacting their appearance at all.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
PNGs, on the other hand, use lossless compression. This means that when you save an image as a PNG, you don’t lose any data, and the resulting file size is larger than a JPG.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you need to have clear lines and crisp detail, PNG is the way to go. This is the best option for logos, screenshots, line art, and other detailed graphics.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Finally, GIFs should only be used for small or simple graphics of less than 10×10 pixels, a color palette of 3 or fewer colors, and for animated images.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Do not use BMPs or TIFFs.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve got your image sizes and formats right, you can make sure that the code you use to implement them is right, too. In particular, make sure to avoid empty image src codes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In HTML, the code for an image includes this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img src=””></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When there’s no source in the quotation marks, the browser makes a request to the directory of the page or to the actual page itself. This can add unnecessary traffic to your servers and even corrupt user data.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Fortunately, this is an easy fix to make. Either add the file path of the image you want to include, or remove the extra tags altogether.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">12. Use a CDN</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Beyond the server that hosts your site, you can also use other networks of servers to decrease load times for your visitors.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When your site is hosted on one server, each user who visits it sends requests to that same server.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means that when your site experiences high levels of traffic, the time it takes to process each request increases, slowing down load times for all of them.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you consider that high-traffic times typically present a ton of growth potential for your business, this is far from ideal.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, for users who are physically farther away from your server, load times are higher because the information has a farther distance to travel — even when you <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">aren’t</em>experiencing lots of traffic.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
A CDN, or Content Delivery Network, can help you eliminate these issues.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With a CDN, you cache your site on a global network of servers. When a user’s browser requests files from your site, that request is routed to the closest server.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, let’s say your origin server is in California, but uses a CDN to host files globally. Your network <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://www.wpbeginner.com/beginners-guide/why-you-need-a-cdn-for-your-wordpress-blog-infographic/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">might look something like this</a></u>:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="cdn map" class="lazy-hidden wp-image-36338" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map.png" data-srcset="" sizes="(max-width: 862px) 100vw, 862px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map.png 862w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map-300x181.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231310/cdn-map-768x464.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If a user from South Africa visits your site, thir browser could download files from a nearby server.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The content that user receives is identical, but can load much faster than it would if their browser were making requests to a server that was geographically far away. This eliminates loading lags and latency issues that users located far from hosting servers sometimes experience.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In one experiment, VentureHarbor reported decreases in load time <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.ventureharbour.com/content-delivery-network/#comparison" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">ranging from 20-51%</a></u> — for 20 minutes of work.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="ventureharbor cdn" class="wp-image-36321 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231240/ventureharbor-cdn.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231240/ventureharbor-cdn.png" data-srcset="" sizes="(max-width: 656px) 100vw, 656px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231240/ventureharbor-cdn.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231240/ventureharbor-cdn.png 656w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231240/ventureharbor-cdn-300x259.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The exact improvements vary between page, with pages that have lots of large images benefitting the most from a CDN.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you want to start using a CDN, your best options are <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.maxcdn.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">MaxCDN</a></u> and <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.cloudflare.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Cloudflare</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
MaxCDN is a full CDN, meaning that it <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">only </em> offers CDN services. They have more data centers and focus solely on improving load times.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Cloudflare, on the other hand, combines CDN service with security and optimization features.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The one you choose depends on whether you want those extra features, or just want to focus on improving speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And either way, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://crunchify.com/step-by-step-guide-to-setup-maxcdn-content-delivery-network-correctly-on-wordpress-with-wp-super-cache-plugin/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">getting set up</a></u> is a fairly quick process.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you go with MaxCDN, you’ll start by creating a “pull zone.” Click “Zones” in the admin panel.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 2" class="wp-image-36274 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231109/pasted-image-0-2.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231109/pasted-image-0-2.png" data-srcset="" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231109/pasted-image-0-2.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231109/pasted-image-0-2.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231109/pasted-image-0-2-300x65.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, click “Create Pull Zone.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website pull zones" class="alignnone wp-image-36283 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231127/pasted-image-0-5.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231127/pasted-image-0-5.png" data-srcset="" height="418" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231127/pasted-image-0-5.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231127/pasted-image-0-5.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231127/pasted-image-0-5-300x163.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="768" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Here, you’ll need to enter your original server URL, as well as a name and label for your pull zone.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 4" class="lazy-hidden wp-image-36280" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231121/pasted-image-0-4.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231121/pasted-image-0-4.png" data-srcset="" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231121/pasted-image-0-4.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231121/pasted-image-0-4.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231121/pasted-image-0-4-300x136.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
After you click create, you’ll see a URL for your CDN, like cdn.yourdomain.netdna-cdn.com. Copy this into notepad, or somewhere else that it’s easily accessible. (You’ll need it in a few minutes.)</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Next, you’ll need to create a “content zone” by clicking the “manage” button next to your pull zone. Click “Settings” and enter multiple subdomains into the “Custom Domains” fields.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
These should typically be cdn.yourdomain.com, cdn1.yourdomain.com, cdn1.yourdomain.com, cdn3.yourdomain.com, and so on.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 11" class="lazy-hidden wp-image-36314" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231228/pasted-image-0-11.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231228/pasted-image-0-11.png" data-srcset="" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231228/pasted-image-0-11.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231228/pasted-image-0-11.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231228/pasted-image-0-11-300x163.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
(This naming format is standard practice and will be easiest to remember if you ever run into issues or need to consult a developer.)</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can add up to seven custom domains, then click “Update.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, you’ll need to add your new CDN to your site through your hosting provider’s DNS editor. The exact location varies by provider, but in most cases, you can find the DNS editor under your “Domains” menu.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In Bluehost, this menu is called “Zone Editor.” If you use Bluehost, the fields you need will look like this.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website bluehost cname" class="lazy-hidden alignnone wp-image-36316" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231232/bluehost-cname.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231232/bluehost-cname.png" data-srcset="" height="227" sizes="(max-width: 330px) 100vw, 330px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231232/bluehost-cname.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231232/bluehost-cname.png 330w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231232/bluehost-cname-300x206.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="330" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Enter the URL that MaxCDN provided (copied and pasted from notepad), set the Type to “CNAME,” and one of the custom CDN domains you created (like cdn.yourdomain.com).</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, repeat this process for all of your subdomains.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You’re done!</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And if you want to use Cloudflare, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://support.cloudflare.com/hc/en-us/articles/201720164-Step-2-Create-a-Cloudflare-account-and-add-a-website" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">the process is even simpler</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Click the <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.cloudflare.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">“Sign Up” button on their homepage</a></u>, then create an account. Enter your domain and click “Begin Scan.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 8" class="lazy-hidden wp-image-36298" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8.png" data-srcset="" sizes="(max-width: 1007px) 100vw, 1007px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8.png 1007w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8-300x186.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231157/pasted-image-0-8-768x475.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This take about one minute, and will how all of your DNS records, including any subdomains. You can decide which ones you want to enable.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website dns records" class="lazy-hidden alignnone wp-image-36293" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7.png" data-srcset="" height="605" sizes="(max-width: 958px) 100vw, 958px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7.png 958w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7-300x189.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231147/pasted-image-0-7-768x485.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="958" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Select the plan you want, then click “Process and continue.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, you’ll see the Cloudflare nameservers for your domain. Next, you’ll need to update the nameservers for your domain.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You’ll need to do this through your domain registrar. Log into your registrar and navigate to your nameserver records.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is different for each registrar. With Bluehost, for example, you can find it by going to “Domain Manager,” then clicking the “Name Server” tab.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="bluehost name" class="lazy-hidden wp-image-36278" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231117/bluehost-name.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231117/bluehost-name.png" data-srcset="" sizes="(max-width: 604px) 100vw, 604px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231117/bluehost-name.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231117/bluehost-name.png 604w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231117/bluehost-name-300x217.png 300w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, switch your preferences to “Use Custom Nameservers” and copy and paste the nameserver that Cloudflare provided.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Save your changes, then return to the Cloudflare dashboard to verify that you’ve installed your CDN correctly. Click the “Overview” tab, and if your CDN is running, you’ll see an “Active” status code.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pasted image 0 9" class="lazy-hidden wp-image-36307" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9.png" data-srcset="" sizes="(max-width: 1600px) 100vw, 1600px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9.png 1600w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9-300x134.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9-768x344.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231215/pasted-image-0-9-1024x459.png 1024w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If so, your CDN is up and running!</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The final step you’ll want to take is to verify that your SSL records are in place. Click the “Crypto” tab to verify that the SSL records are in place. You should see one for your root domain, and one wildcard subdomain record.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you don’t yet see these records, it may take 24 hours for them to appear.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But once they do, your CDN is serving the secure version of your site — exactly like your origin server.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">13. Use external hosting platforms</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In addition to hosting your site’s files on a CDN, you can also use external hosting platforms for some of your larger files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is particularly valuable for videos.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, let’s say you want to add a video tutorial to your site. You create, edit, and export the video file.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Now what?</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Your first thought might be to upload the video directly to your site via your FTP or WordPress editor.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Don’t do this.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you host videos on your own server, they take up a <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">ton </em>of space. Video files can easily take up over 100MB.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you use a shared server, you have a limited amount of space. Videos can make you quickly exceed this limit.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In some cases, large video files may even violate your terms of Acceptable Use, which can end up getting your hosting account shut down altogether.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And even if you <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">can </em>upload large videos to your hosting provider, it will likely provide a poor user experience.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If multiple users attempt to watch a video on your site at the same time, your server will need to deliver that huge file to all of them. If your server has a limited amount of bandwidth, this can result in lags and pauses in playback.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’ve ever attempted to watch a video and had it pause every few seconds to load, you know how frustrating it can be.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Don’t do that to your visitors.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Instead, host your video on a third-party service like <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.youtube.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">YouTube</a></u>, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://vimeo.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Vimeo</a></u>, or <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://wistia.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Wistia</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, embed the video on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This process saves space, results in faster load times, and is extremely easy to do.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The most difficult part is just choosing which one you want to use.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">YouTube</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When most people think of online video, they think of YouTube. It’s one of the most well-known sites in the world, with a user base of <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://techcrunch.com/2017/06/27/facebook-2-billion-users/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">over 1.5 million people</a></u> that watch almost 5 billion videos per day.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means it has more monthly users than every major social media platform but facebook.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="youtube monthly users" class="wp-image-36305 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231210/youtube-monthly-users.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231210/youtube-monthly-users.png" data-srcset="" sizes="(max-width: 738px) 100vw, 738px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231210/youtube-monthly-users.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231210/youtube-monthly-users.png 738w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231210/youtube-monthly-users-300x169.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s also completely free to use.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The biggest potential advantage to YouTube is that it can help you reach a larger audience. If you want to use video grow awareness of your brand and send traffic to your site, it’s a great option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you just want to embed videos on your site, though, and don’t care about having them be discovered on another platform, this may not matter.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The one notable downside to YouTube is that it has a 15-minute limit for most videos. If you want to upload lengthier content, you’ll need to submit a request to increase your limit — so if this is something you’ll be doing on a regular basis, it may not be the best option for you.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Vimeo</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
After YouTube, Vimeo is the second-largest video hosting platform with <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://www.weidert.com/whole_brain_marketing_blog/bid/111519/youtube-vs-vimeo-what-s-best-for-video-content-marketing" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">715 million views per month</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
So while it still has the potential to get your videos in front of a new audience, your potential audience smaller than it would be with YouTube.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
On the upside, its standard video player looks a bit nicer than YouTube’s.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="vimeo player" class="wp-image-36299 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231159/vimeo-player.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231159/vimeo-player.png" data-srcset="" sizes="(max-width: 664px) 100vw, 664px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231159/vimeo-player.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231159/vimeo-player.png 664w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231159/vimeo-player-300x149.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s important to note, though, that Vimeo has upload limits for content.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
While a basic membership will allow you 500MB in uploads per week, and up to 5GB total, their three paid plans range from $7 to $50 per month, with storage from 250GB to 5TB.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Wistia</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Wistia is a bit different from YouTube and Vimeo in that it’s designed with marketing in mind.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Users don’t generally browse Wista’s site for content — so if having your videos searched and found, this is not the option for you.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But if you’re focused on using video as a marketing tool, it could be exactly what you need.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The platform offers comprehensive analytics, including where your visitors come from, where they click, and how far into a video they stop watching.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It also lets you include calls to action directly in your videos, and even require them to sign up for your email list before watching.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, Wistia’s video player is <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wistia.com/doc/customizing-your-video" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">customizable</a></u>, so you can give your videos a branded feel by changing the play button and other controls to your brand’s colors.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="wistia" class="wp-image-36324 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231245/wistia.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231245/wistia.png" data-srcset="" sizes="(max-width: 744px) 100vw, 744px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231245/wistia.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231245/wistia.png 744w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231245/wistia-300x194.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also customize your autoplay settings load settings, captions, and share options, and make it easy for users to skip to certain points in the video by adding chapters.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And if you use HubSpot or Marketo, it can be fully integrated with both of those platforms.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The biggest downside to Wistia is that its free plan only includes three videos.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Beyond that, paid plans are $99+ per month.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve chosen your video platform and uploaded a video, adding it to your site is easy regardless of the platform you use.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Select “Embed,” and copy the HTML code that your platform provides.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="youtube embed" class="wp-image-36308 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed.png" data-srcset="" sizes="(max-width: 1075px) 100vw, 1075px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed.png 1075w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed-300x104.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed-768x266.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231218/youtube-embed-1024x354.png 1024w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, copy and paste the code into the page where you want it to appear.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For HTML sites, simply add it to your code in the location you want it to show up on the page.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For WordPress, switch to the text editor and do the same.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">14. Optimize CSS delivery</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
CSS holds the style requirements for your page. Generally, your website accesses this information in one of two ways: In an external file, which loads before your page renders, or inline, meaning it is in the HTML document itself.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The external CSS is loaded in the head of your HTML with code that looks something like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<!—Your styles –></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<link rel=”stylesheet” type=”text/css” media=”all” href=http://yourURL/style.css /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Inline CSS is nested in your page’s HTML and looks like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website css" class="alignnone wp-image-36273 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231107/pasted-image-0-1.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231107/pasted-image-0-1.png" data-srcset="" height="325" sizes="(max-width: 547px) 100vw, 547px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231107/pasted-image-0-1.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231107/pasted-image-0-1.png 547w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231107/pasted-image-0-1-300x178.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="547" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As a general rule, avoid including CSS in HTML code (like in divs or your headings) like in the inline CSS pictured above. You’ll get cleaner code if you put all of your CSS in your external stylesheet.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This reduces the size of your code and creates fewer code duplications.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When setting up your styles, it’s also best to only use one external CSS stylesheet, since additional stylesheets increase HTTP requests.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re not sure how your CSS is currently set up, you can use <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/tools/css-delivery/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">this CSS delivery tool</a></u> to find out. Enter your URL, and you’ll see a report with all of external your CSS files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="css delivery" class="wp-image-36285 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery.png" data-srcset="" sizes="(max-width: 965px) 100vw, 965px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery.png 965w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery-300x125.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231131/css-delivery-768x321.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Scroll down, and you’ll also see where that external file is located, as well as any inline CSS on the page and the total size of your CSS files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website css delivery 2" class="alignnone wp-image-36304 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2.png" data-srcset="" height="678" sizes="(max-width: 970px) 100vw, 970px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2.png 970w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2-300x210.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231209/css-delivery-2-768x537.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="970" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have more than one external CSS file, each one adds to your page load time. In some cases, this is unavoidable — but in most, it’s best to combine them.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Fortunately, this is a simple process, and one that can usually be accomplished with nothing more than copy and paste.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Simply copy the contents of each CSS file you have, and <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/combine-external-css.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">paste it into one main CSS file</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="css combine" class="wp-image-36295 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231150/css-combine.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231150/css-combine.png" data-srcset="" sizes="(max-width: 590px) 100vw, 590px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231150/css-combine.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231150/css-combine.png 590w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231150/css-combine-300x153.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, update your HTML to reference this new file, and remove all references for the old files.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Now, your visitors’ browsers only need to download one CSS file instead of multiple, which reduces the overall number of requests and decreases page load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="combine css before after" class="wp-image-36332 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after.png" data-srcset="" sizes="(max-width: 1200px) 100vw, 1200px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after.png 1200w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after-300x158.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after-768x403.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after-1024x538.png 1024w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231259/combine-css-before-after-600x315.png 600w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve done this, you can use <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developers.google.com/speed/pagespeed/insights/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">PageSpeed Insights</a></u> to make sure that you do not have any issues with render-blocking CSS.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have any blocking script resources, you’ll see them under “Optimization Suggestions.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pagespeed render" class="wp-image-36292 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231145/pagespeed-render.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231145/pagespeed-render.png" data-srcset="" sizes="(max-width: 676px) 100vw, 676px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231145/pagespeed-render.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231145/pagespeed-render.png 676w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231145/pagespeed-render-300x172.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re already using a plugin like WP Rocket or W3 Total Cache, this should not be an issue. If you still have render-blocking issues, double-check your plugin settings or follow <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Google’s recommendations</a></u> for optimizing CSS delivery.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">15. Prioritize above-the-fold content (lazy loading)</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Having just recommended that you use only one CSS stylesheet and no inline CSS, there is one caveat you need to consider.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can improve user experience by having your above the fold (top of the page) load faster — even if the rest of the page takes a few seconds to load.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This is called lazy loading and is particularly helpful for pages with lots of content below the fold.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, let’s say you write a blog post that includes 20 photos. Normally, a user’s browser would need to download all of those images before displaying anything on the page.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
With lazy loading, it can load the content within view first, then load all of those photos after.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This way, the user doesn’t have to wait to access the page, and the images will load as they come into view.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This can significantly reduce load times on posts with tons of images (like this one).</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And if you run your site on WordPress, enabling it is as easy as installing a plugin. There are <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">plenty of options you can use</u> to start using lazy loading on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Lazy Load</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/lazy-load/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Lazy Load</a></u> is an extremely simple plugin that uses jQuery.sonar to only load images when they are visible in a user’s browser.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
All you need to do is install and activate it Then, the plugin will automatically detect when an image is visible for a user, and load it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website lazy load" class="alignnone wp-image-36329 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231254/lazy-load.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231254/lazy-load.png" data-srcset="" height="333" sizes="(max-width: 660px) 100vw, 660px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231254/lazy-load.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231254/lazy-load.png 660w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231254/lazy-load-300x151.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="660" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There are no settings or customization options to mess with — which, depending on your preferences, could either be a good thing or a bad one.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Either way: If you’re looking for a fast, simple solution, this is it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">BJ Lazy Load</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/bj-lazy-load/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">BJ Lazy Load</a></u> is another relatively simple plugin, but offers a few more options for customization.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
First, you can determine which content on your site you want to lazy load. This can include content, thumbnails, gravatars, images, and iframes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="bj lazy load" class="wp-image-36346 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231326/bj-lazy-load.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231326/bj-lazy-load.png" data-srcset="" sizes="(max-width: 352px) 100vw, 352px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231326/bj-lazy-load.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231326/bj-lazy-load.png 352w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231326/bj-lazy-load-300x291.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also set a standard placeholder image for content that hasn’t yet loaded, and skip images with certain classes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
So, for example, if you don’t want a specific image to lazy load, you could code it with something like:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img src=”image.jpg” class=”no-lazy”></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This way, the plugin knows to load that image as normal.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also set a threshold for how close to a viewer’s screen an element should be before loading. This gives you more control over the speed and function of how your page loads.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="bj lazy load 2" class="wp-image-36319 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2.png" data-srcset="" sizes="(max-width: 807px) 100vw, 807px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2.png 807w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2-300x116.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231236/bj-lazy-load-2-768x298.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The plugin is also compatible with infinite scroll.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you’re looking for a plugin that’s easy to use, but gives a bit more control than Lazy Load, this is a great option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">WP Rocket</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you already use WP Rocket, you can also use the plugin to <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wp-rocket.me/blog/lazy-load-images-wordpress-site/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">enable lazy loading</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Open your WP Rocket settings, then click the “Basic” tab. In the LazyLoad section, check the box next to “Enable for images.”</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="wprocket lazyload" class="wp-image-36290 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload.png" data-srcset="" sizes="(max-width: 800px) 100vw, 800px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload.png 800w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload-300x124.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231141/wprocket-lazyload-768x317.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve enabled this feature, there are a few customization options you can use.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, if you don’t want to use lazy loading on a specific post or page, you can simply disable it for that page.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Just open the page, then scroll down to the “Cache Options” box in the right sidebar. Then, uncheck the box next to “LazyLoad for Images,” and save your changes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="disabling lazy load specific page post" class="lazy-hidden wp-image-36310" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post.png" data-srcset="" sizes="(max-width: 800px) 100vw, 800px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post.png 800w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post-300x183.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231221/disabling-lazy-load-specific-page-post-768x468.png 768w" style="background-image: url("//www.crazyegg.com/blog/wp-content/plugins/a3-lazy-load/assets/css/loading.gif"); background-position: 50% 50%; background-repeat: no-repeat; border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also use snippets of code to disable lazy loading for specific types of pages, like your home page or blog page.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, disabling lazy load for your home page would look like this:</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="disable lazy home" class="wp-image-36322 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231241/disable-lazy-home.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231241/disable-lazy-home.png" data-srcset="" sizes="(max-width: 715px) 100vw, 715px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231241/disable-lazy-home.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231241/disable-lazy-home.png 715w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231241/disable-lazy-home-300x83.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can copy and paste these snippets from WP Rocket’s <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wp-rocket.me/blog/lazy-load-images-wordpress-site/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">tutorial on lazy load settings</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you want to disable lazy load for specific images, you can do that using the “data-no-lazy” attribute.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Just add it into your image’s code, and that image will load normally.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="data no lazy" class="wp-image-36342 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy.png" data-srcset="" sizes="(max-width: 605px) 100vw, 605px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy.png 605w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy-300x58.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231319/data-no-lazy-600x117.png 600w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Finally, you can enable a fade in effect to make your images load more smoothly.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When images appear all at once, they can provide a jarring experience for visitors. You can make them appear more gradually by adding a snippet to your CSS file.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="fade effect wp" class="wp-image-36333 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231301/fade-effect-wp.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231301/fade-effect-wp.png" data-srcset="" sizes="(max-width: 692px) 100vw, 692px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231301/fade-effect-wp.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231301/fade-effect-wp.png 692w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231301/fade-effect-wp-300x183.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also find this snippet in WP Rocket’s <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wp-rocket.me/blog/lazy-load-images-wordpress-site/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">lazy load tutorial</a></u>.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">16. Reduce the number of plugins you use on your site</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As you’ve likely gathered from this post so far, plugins can do a lot to improve your WordPress site. You can use them to add custom functionality, clean up your code, improve user experience, and more.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
They also eliminate the need to mess with a lot of code, which makes for an extremely user-friendly experience when working on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, they’re extremely easy to install.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This makes it easy to continue adding and installing plugins, without considering the potential downside.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Unfortunately, having too many plugins installed can cause some issues.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
They can slow your site, create security issues, and even cause crashes and other technical difficulties.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, keeping up with maintenance and updates can be tedious when you have a lot.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And even if you <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">don’t </em>have a ton of plugins, it’s a good idea to evaluate the ones you have installed on a regular basis. Any that are outdated, inefficient, or incorrectly configured can have a negative impact on your site speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Deactivating and deleting any that are unnecessary can both improve your overall speed and make maintenance easier in the long run.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There are a few different ways you can evaluate the plugins on your site and weed out any that slow your site speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Test your plugins</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
When you’re looking to improve site speed, there are two different ways to determine which plugins are impacting it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The first is to selectively disable plugins, then measure your site’s performance. This can be a tedious process if you have a lot of plugins, but will show you the difference each one makes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
First, run a speed test with all of your plugins enabled. You can do this with tools like GTmetrix, Pingdom, or any other site speed tool you prefer.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="gtmetrix" class="wp-image-36315 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix.png" data-srcset="" sizes="(max-width: 934px) 100vw, 934px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix.png 934w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix-300x45.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231230/gtmetrix-768x115.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, experiment by deactivating your plugins one at a time and re-testing your speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Make a note of your page load times after each test, and which plugins you deactivated to achieve faster speeds.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a lot of plugins, this process could take a while.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Fortunately, there’s an alternative: Installing another plugin.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
… yes, I see the irony here.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/p3-profiler/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Plugin Performance Profiler</a></u> is a solid option for identifying plugins that are causing issues on your site. Plus, it’s much faster and easier than manually deactivating plugins individually and running site speed tests (and you can always deactivate it as soon as you’re done using it).</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Once you’ve installed the plugin, go to your settings page a run a site scan.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This will take a few minutes, then show you a report with a detailed breakdown of how each plugin on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website plugin performance profiler" class="alignnone wp-image-36334 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler.png" data-srcset="" height="638" sizes="(max-width: 1006px) 100vw, 1006px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler.png 1006w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler-300x190.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231303/plugin-performance-profiler-768x487.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="1006" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The plugin load time at the top of the report tells you the cumulative load time for all of the plugins on your site, as well as the percentage of your total load time they make up.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also see a detailed timeline with information about every plugin, your theme, and the core for each page. This will help you identify exactly what the issue is on slow-loading pages.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="performance timeline" class="wp-image-36282 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline.png" data-srcset="" sizes="(max-width: 837px) 100vw, 837px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline.png 837w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline-300x135.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231125/performance-timeline-768x347.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Finally, you can keep a history of your performance scans directly in the plugin. This way, if you run into issues in the future, you’ll have a benchmark and a good starting point for identifying issues.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="plugin record" class="wp-image-36279 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record.png" data-srcset="" sizes="(max-width: 974px) 100vw, 974px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record.png 974w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record-300x109.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231119/plugin-record-768x278.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you find any plugins during your evaluation that are slowing your site and aren’t necessary, simply deactivate and delete them.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
One easy win to look for here is your contact form plugin, if you have one. Many site owners install a contact form plugin because they think it’s the only way to add a form their site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But today, many themes come with built-in contact form functionality.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you notice that your contact form plugin is slowing your site, double-check to see if this feature comes with your theme. If so, update your forms and delete the plugin.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Identify overlaps in functionality</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In most cases, the plugins you’ve installed on your site serve a clear purpose. So even if the sheer volume is slowing your site, deleting them may not be an option.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Fortunately, there are many plugins that can accomplish more than one goal, and finding them can help you eliminate plugins that only serve one purpose.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, the WP Rocket and WP Total Cache plugins on this page are both extremely useful for improving site speed and they’re both great options.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But considering that they serve many of the same purposes, you most likely don’t need both. If you had both of them installed on your site, you could evaluate the features you use on each and see if either could do everything you need.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, enable all of those features in the plugin you choose to stick with, and deactivate the other.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have a lot of plugins installed, you may be surprised at how many of the simpler ones can easily be eliminated by enabling a feature in a more robust one.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">Eliminate plugins for tasks you can do manually</span></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Depending on your level of experience, you can also cut down on your amount of plugins by doing certain tasks manually.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, many site owners use a plugin to add their Google Analytics tracking code to their header. And while this makes the process extremely easy for users who aren’t comfortable editing code, it’s not necessary.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you have the <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://wordpress.org/plugins/insert-headers-and-footers/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Insert Headers and Footers</a></u> plugin (or a similar one) installed to edit other parts of your header tag, you can copy your Google Analytics code from your admin dashboard, then paste it here.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Save your changes, and your tracking code is installed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">don’t </em>have a plugin for editing headers and footers installed, you can manually add it to your header through your site’s FTP.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Of course, this is a more advanced option, and only a good idea if you’re comfortable with basic code edits. But once you paste your code and re-upload the file, you’re all set to use Google Analytics — with absolutely no plugin required.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Another basic plugin you may have installed is a font plugin. These plugins are designed to make it easy to change your site’s fonts — but if you have one installed, you can eliminate it with a few lines of code.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Go to <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://fonts.google.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Google Fonts</a></u> and select the font you want to use on your site. Under “Embed,” you’ll see the HTML and CSS codes for that font.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website google fonts" class="alignnone wp-image-36343 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231320/google-fonts.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231320/google-fonts.png" data-srcset="" height="285" sizes="(max-width: 638px) 100vw, 638px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231320/google-fonts.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231320/google-fonts.png 638w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231320/google-fonts-300x134.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="638" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Add the HTML code to your header, and the CSS to your site’s CSS stylesheet wherever you want to use your chosen font.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can do this with as many fonts as you want, too. So you can fully customize how all of the text on your site appears, without a single plugin.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">17. Reduce redirects</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Redirects are often necessary when you move and delete pages, and are the best way to eliminate issues with broken links.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But having too many of them can create additional HTTP requests, which can negatively impact speed, particularly on mobile devices.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This means it’s best to keep them to a minimum. In fact, <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://developers.google.com/speed/docs/insights/mobile" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Google says</a></u> that ideally, site owners would eliminate them entirely.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Unfortunately, this is not realistic for most site owners who’ve ever eliminated or restructured their content.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Still, in most cases, there’s room for improvement.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can start by using <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="http://www.screamingfrog.co.uk/seo-spider/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Screaming Frog</a></u> to quickly identify all of the redirects currently on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Run a site scan, then sort by the “Status Code” column to see all of the 301 redirects on your site.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website screaming frog" class="alignnone wp-image-36326 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231249/screaming-frog.jpg" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231249/screaming-frog.jpg" data-srcset="" height="433" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231249/screaming-frog.jpg" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231249/screaming-frog.jpg 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231249/screaming-frog-300x169.jpg 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="768" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can look through these redirects to see what they’re accomplishing, and make sure that they serve a necessary purpose.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can also use this opportunity to identify redirects chains, or redirects that point to other redirected pages. This creates unnecessary extra requests, which can slow down your load times.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If you find any redirect chains, you can <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://varvy.com/pagespeed/minimize-redirects.html" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">edit your .htaccess file</a></u> to point all of your redirected pages directly to the most recent versions of that page.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">18. Reduce external scripts</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As we mentioned above, the fewer requests your site makes to your server, the faster a page will load.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Though CSS and JavaScript files are often the main culprits of extra external scripts, they’re not the only ones — and eliminating any others can also have an impact on your speed.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There are many common third-party integrations you may have running on your site that you don’t really think about.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can identify all of the external scripts that are adding requests by reopening the network tab in Chrome’s Developer Tools.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="external scripts" class="wp-image-36277 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231115/external-scripts.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231115/external-scripts.png" data-srcset="" sizes="(max-width: 333px) 100vw, 333px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231115/external-scripts.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231115/external-scripts.png 333w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231115/external-scripts-300x232.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
For example, if you use Gravatar for blog comments, you might notice that loading user images adds a significant amount to your load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Or, if your site is integrated with Twitter for easily sharing posts, this might also increase the number of HTTP requests your site makes.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Of course, some of these extra features are worth the milliseconds they add to your load times. In this case, you can leave them as-is.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
But if they <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">aren’t </em>worth slowing your page speed, uninstall or remove them.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Knowing which features are adding to your load times will help you better understand your site’s speed. It can also help you make more informed decisions about the features you choose to add to your site in the future.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">19. Monitor your speed over time</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As you work to improve your site speed, it’s a good idea to monitor how it changes over time. This is important even after you’ve achieved an acceptable page load time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As you can see from this post, there are <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">tons </em>of factors that affect your site’s speed — so it can change at almost any time.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Monitoring your load times on a regular basis can help you catch any issues early on, and keep your site in good shape.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
There are many tools you can do to accomplish this. One of the best for monitoring overall site performance is Pingdom’s <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://tools.pingdom.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Website Speed Test</a></u>.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Simply enter your URL, then select where you want to test your site from. If you don’t have a location preference, you can leave this at the default — but if you’re worried about users who are geographically far from your servers, this lets you test your site from various locations.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website pingdom" class="alignnone wp-image-36340 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom.png" data-srcset="" height="494" sizes="(max-width: 985px) 100vw, 985px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom.png 985w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom-300x150.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231315/pingdom-768x385.png 768w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="985" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Then, you’ll see a summary of your page’s load time and performance, including the page size, number of requests, and how it stacks up against other tested sites.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pingdom summary" class="wp-image-36311 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231223/pingdom-summary.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231223/pingdom-summary.png" data-srcset="" sizes="(max-width: 648px) 100vw, 648px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231223/pingdom-summary.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231223/pingdom-summary.png 648w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231223/pingdom-summary-300x125.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This information gives you an at-a-glance look at your site speed’s health, and tracking it over time is an easy way to monitor improvements or decreases in performance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Below that, you’ll see a list of suggestions for improving your site’s performance. If you’re unhappy with your load time, this will help you identify the issues that are causing it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website pingdom performance insights" class="alignnone wp-image-36297 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231154/pingdom-performance-insights.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231154/pingdom-performance-insights.png" data-srcset="" height="563" sizes="(max-width: 721px) 100vw, 721px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231154/pingdom-performance-insights.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231154/pingdom-performance-insights.png 721w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231154/pingdom-performance-insights-300x234.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="721" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This information is all included in the free version of the tool.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The paid version also provides <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://winningwp.com/pingdom/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">page speed reports</a></u>, which show your site’s speed over time. This can help you identify trends, and the precise time your site begins having issues.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This makes it easy to get to the root of any problems.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="pingdom page speed report" class="wp-image-36294 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231149/pingdom-page-speed-report.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231149/pingdom-page-speed-report.png" data-srcset="" sizes="(max-width: 768px) 100vw, 768px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231149/pingdom-page-speed-report.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231149/pingdom-page-speed-report.png 768w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231149/pingdom-page-speed-report-300x136.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
The paid version also includes alerts and uptime monitoring, which monitor your site and automatically alert you of issues.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
This includes a mobile app, which will notify you of server errors, downtime, and other critical problems. These features make it easy to catch issues as they happen and make sure your site is always loading quickly and functioning well.</div>
<h3 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 30px; font-weight: 400; line-height: 1.4; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
<span style="box-sizing: border-box; font-family: ProximaNova-Semibold, sans-serif; margin: 0px; outline: 0px; padding: 0px;">20. Monitor mobile page speed</span></h3>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
In addition to monitoring your load times on desktop, you’ll want to pay particular attention to how well your site loads on mobile devices.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
As we mentioned above, mobile user experience now impacts <em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">all </em>of your site’s rankings.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Plus, it’s in your best interest to provide a fast, user-friendly site to mobile users.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
You can start by using Google’s <u style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;"><a href="https://testmysite.thinkwithgoogle.com/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank">Test My Site</a></u> to audit your own page speed. To get started, just enter your URL.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website test mobile speed" class="alignnone wp-image-36344 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231322/test-mobile-speed.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231322/test-mobile-speed.png" data-srcset="" height="374" sizes="(max-width: 689px) 100vw, 689px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231322/test-mobile-speed.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231322/test-mobile-speed.png 689w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231322/test-mobile-speed-300x163.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="689" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
First, your results will show you your site’s average load time on 3G, as well as how that stacks up to recommended best practices.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It also shows your estimated visitor lost due to load times. If you have slow load times, this can be a startling number.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="google mobile test" class="wp-image-36341 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231317/google-mobile-test.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231317/google-mobile-test.png" data-srcset="" sizes="(max-width: 473px) 100vw, 473px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231317/google-mobile-test.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231317/google-mobile-test.png 473w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231317/google-mobile-test-300x260.png 300w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; height: auto !important; margin: 0px auto; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Next, Google provides an industry comparison to show where you stack up against other sites in your industry.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Given that many of these sites are your competitors’, you’ll want to work towards being a top performer within your industry.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<img alt="speed up your website mobile industry comparison" class="alignnone wp-image-36335 lazy-loaded" data-jpibfi-post-excerpt="" data-jpibfi-post-title="20 Ways to Speed Up Your Website and Improve Conversion" data-jpibfi-post-url="https://www.crazyegg.com/blog/speed-up-your-website/" data-jpibfi-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison.png" data-lazy-type="image" data-src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison.png" data-srcset="" height="348" sizes="(max-width: 663px) 100vw, 663px" src="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison.png" srcset="https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison.png 663w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison-300x157.png 300w, https://s3.amazonaws.com/ceblog/wp-content/uploads/2018/02/14231305/mobile-industry-comparison-600x315.png 600w" style="border: 0px; box-shadow: rgba(204, 204, 204, 0.3) 0px 2px 10px 1px; box-sizing: border-box; display: block; float: none; height: auto !important; margin: 0px auto 10px; max-width: 100%; outline: 0px; padding: 0px; vertical-align: middle;" width="663" /></div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
If your site’s speed isn’t yet close to where you want it to be, this can feel like a lofty goal. But as you make the changes listed in this post, you can continue testing your site and moving towards the top of your industry.</div>
<h2 style="background-color: white; box-sizing: border-box; color: #2d2d2d; font-family: ProximaNova-Semibold; font-size: 35px; font-weight: 400; line-height: 1.33; margin: 0px; outline: 0px; padding: 0px 0px 20px;">
Conclusion</h2>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; margin-top: -4px; outline: 0px; padding: 0px 0px 20px;">
Getting your page load times to where you want them to be is a challenging undertaking, but will have a significant positive impact on your overall site performance.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
It’s also important to remember that while all of the tips on this page can help you achieve your<a href="https://www.crazyegg.com/blog/site-speed-matters-cro/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank"> site speed goals</a>, you don’t need to implement all of them today.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
Spend some time looking through your site’s speed test results and look for the issues that have the greatest impact on your load times. Focus on those high-impact factors and take the necessary steps to get them into shape.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
From there, you can work your way through this list and look for other easy wins. While some of the tips here may require help from a developer, some of them can be done in under an hour.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
And though some of them may seem minor, even small steps toward reducing load time can make a difference and when you consider the impact that even one second can<a href="https://www.crazyegg.com/blog/conversion-optimization-rules/" rel="noopener" style="box-sizing: border-box; color: #419df3; margin: 0px; outline: 0px; padding: 0px; text-decoration-line: none;" target="_blank"> have on your conversions</a> and success, they’re entirely worth it.</div>
<div style="background-color: white; box-sizing: border-box; color: #222222; font-family: ProximaNova-Light, sans-serif; font-size: 19px; line-height: 1.64; outline: 0px; padding: 0px 0px 20px;">
<em style="box-sizing: border-box; margin: 0px; outline: 0px; padding: 0px;">What are the biggest wins you’ve found for improving your site speed?</em></div>
</div>

ARTICLES SITES 20 Ways to Speed Up Your Website and Improve Conversion

A few extra seconds could have a huge impact on your ability to engage visitors and make sales. This means that having a fast site is...

HEIKALINE

Labels

5 Useful Tools for Translating Your Website Content

Character traits Scorpio

20 Ways to Speed Up Your Website and Improve Conversion

Labels

Posts FAQ

latest news

Blog Archive