KeyCDN Blog KeyCDN Blog https://www.keycdn.com/blog https://www.keycdn.com/img/rss-icon.png https://www.keycdn.com/img/rss-icon.svg https://www.keycdn.com/img/rss-logo.svg 047aed https://www.keycdn.com/blog Insights and advice for improving web performance. en-us Copyright 2024 proinity LLC Tue, 30 Jan 2024 14:51:26 +0000 10 Proven Ways to Improve Your Ecommerce Conversion Rate https://www.keycdn.com/blog/ecommerce-conversion-rate Fri, 12 Jan 2024 06:00:00 +0000 Martin Williams https://www.keycdn.com/blog/ecommerce-conversion-rate <img src="https://www.keycdn.com/img/blog/ecommerce-conversion-rate.png" alt="10 Proven Ways to Improve Your Ecommerce Conversion Rate"><p>The world of ecommerce continues to grow year by year. As consumers want to purchase items from the comfort of their own home and have them delivered in a timely manner, the opportunities in ecommerce are ever-expanding. The expectation for a good user experience is now higher than ever. Customer want to know they can trust the website they are buying from, they want to access the website fast, and they want a great offer.</p><p>All of these things come into play when discussing the conversion rate of any ecommerce store. As an ecommerce store owner, your ultimate goal is to convert as many visitors as possible into paying customers. However, this can be a challenging task, especially in today's competitive ecommerce landscape. The good news is that there are proven strategies you can implement to improve your ecommerce conversion rate and boost your sales. In this article, we will explore ten of these strategies.</p><h2 id="ecommerce-conversion-rate-benchmarks">Ecommerce conversion rate benchmarks</h2><p>First off, we'll start with some benchmarks. Conversion rates will vary based on industry, location, and device used. According to <a href="https://monetate.com/resources/" target="_blank" rel="nofollow noopener">Monetate</a>, the following conversion rate results were gathered for Q3 of 2021 until Q3 of 2022.</p><figure><img src="https://www.keycdn.com/img/blog/conversion-rate-benchmark.png" alt="conversion rate benchmark"></figure><p>As we can see, the UK has an average conversion rate that is significantly higher than the US, at 3.7 compared to 2.3%. The global conversion rate for Q3 of 2022 was 2.5% down from 2.6% in Q2.</p><p>As mentioned above, the device used to access an ecommerce store also has an effect on the conversion rate. Below we see that traditional devices like a desktop have the highest conversion rate at 3.1%. Tablets come in at a close second with 2.8% and smartphones have a 2.2% conversion rate respectively.</p><figure><img src="https://www.keycdn.com/img/blog/conversion-rate-by-device.png" alt="conversion rate by device"></figure><p>The lower conversion rate on mobile could be due to a variety of reasons:</p><ol><li><p><strong>Screen size</strong>: The smaller screen size of mobile phones can make it more challenging for visitors to browse and view products. This can result in a less engaging user experience, leading to lower conversion rates.</p></li><li><p><strong>Navigation</strong>: The navigation of a mobile website can be different from that of a desktop or tablet website. Visitors may have difficulty finding what they are looking for, leading to frustration and a higher likelihood of abandonment.</p></li><li><p><strong>Checkout process</strong>: The checkout process on a mobile website may not be as optimized as that of a desktop or tablet website, making it more difficult for visitors to complete their purchase.</p></li><li><p><strong>Security concerns</strong>: Visitors may have concerns about the security of making a purchase on a mobile device, especially if they are using public Wi-Fi or are unsure of the security of the mobile website.</p></li><li><p><strong>Technical issues</strong>: Technical issues such as slow loading times or errors may be more prevalent on mobile websites, leading to a less positive user experience and lower conversion rates.</p></li></ol><p>To address these challenges and improve mobile conversion rates, it's essential to optimize your website for mobile devices. This can involve using responsive design to ensure that your website is optimized for different screen sizes, simplifying navigation, and streamlining the checkout process. Additionally, it's essential to prioritize website security and ensure that technical issues are addressed promptly to provide the best possible user experience on mobile devices.</p><h2 id="10-ways-to-optimize-your-ecommerce-conversion-rate">10 ways to optimize your ecommerce conversion rate</h2><p>Below we've outlined 10 methods you should implement to increase your ecommerce conversion rate. Go through each suggestion and work on implementing it into your store if you haven't already. These methods have been proven time and time again to increase conversion rates and give your customers a better experience overall so that they will keep coming back.</p><h3 id="1-optimize-your-website-design">1. Optimize your website design</h3><p>The first impression your website gives to visitors is critical in determining whether they will stay on your site or leave immediately. A poorly designed website can significantly impact your conversion rate. Your website design should be visually appealing, easy to navigate, and user-friendly.</p><p>One of the critical elements of your website design is the layout. Ensure that your website is organized and has a clear hierarchy of information. Your navigation menu should be easy to use and intuitive. The layout should be responsive and work well on all devices, including desktops, tablets, and mobile phones.</p><p>Another important design element is the color scheme. Colors can affect emotions and influence buying decisions. Choose colors that are in line with your brand and that appeal to your target audience. For instance, if you're selling products for kids, you might want to use bright and cheerful colors.</p><h3 id="2-optimize-your-product-pages">2. Optimize your product pages</h3><p>Your product pages are where visitors will decide whether to purchase your products or not. Therefore, it's essential to optimize your product pages for maximum conversion. Here are some tips:</p><ul><li>Write clear and concise product descriptions: Your product descriptions should be easy to read, informative, and highlight the benefits of your products.</li><li>Include customer reviews and ratings: Customer reviews and ratings provide social proof and can increase trust in your brand.</li><li>Display pricing clearly: Visitors should be able to see the price of your products clearly without having to search for them.</li></ul><h3 id="3-better-product-images">3. Better product images</h3><p>Product images play a major role in both building trust as well as branding. Nowadays, all ecommerce operators need to ensure that their images are high quality and optimized. <a href="https://twitter.com/peeplaja" target="_blank" rel="nofollow noopener">Peep Laja</a>, Founder of ConversionXL, <a href="https://cxl.com/blog/how-images-can-boost-your-conversion-rate/" target="_blank" rel="nofollow noopener">is sure</a>:</p><blockquote><p>Using quality images in your blog posts makes you sell more of your stuff.</p></blockquote><p>When taking product photos, ensure you're using a high quality camera so that your images can be zoomed in on while a potential buyer is browsing your website.</p><p>Having high quality images on your site can however slow down the performance of your site overall as the image size grows. Therefore, taking advantage of things like <a href="https://www.keycdn.com/blog/smart-image-compression">smart image compression</a> and converting your images to a newer format such as <a href="https://www.keycdn.com/blog/convert-to-webp-the-successor-of-jpeg">WebP</a> are great ways to optimize image size while at the same time ensuring the quality of your images doesn't degrade.</p><h3 id="4-create-an-attractive-offer">4. Create an attractive offer</h3><p>The next conversion optimization tip is to creative an attractive offer. Consumer like to feel as though they're getting a great deal on something and as an ecommerce store owner its your responsibility to create an offer that your buyers will love. Here are a few common offers you can use:</p><ul><li>On sale (e.g. 15% off)</li><li>Free shipping</li><li>Buy 1 get 1</li><li>Free, just pay shipping</li><li>Free bonus included with every purchase</li></ul><p>Scarcity tactics can also be employed if you're running a promotion for a limited time or you only have a certain amount of stock available for a specific item. For example, you can say things like:</p><ul><li>Only X left in stock</li><li>Sale ends in X Days</li><li>Due to low stock, there is a limit of X per customer</li></ul><p>Big ecommerce brands like Etsy use similar tactics to let their customers know when other people are buying a particular item or when the stock is running out on a particular product. Here are a couple of examples from Etsy's website:</p><figure><img src="https://www.keycdn.com/img/blog/etsy-scarcity-1.png" alt="etsy scarcity"><figcaption class="figure-caption">Limited quantities available</figcaption></figure><figure><img src="https://www.keycdn.com/img/blog/etsy-scarcity-2.png" alt="etsy scarcity"><figcaption class="figure-caption">Product added to customer carts</figcaption></figure><h3 id="5-simplify-the-checkout-process">5. Simplify the checkout process</h3><p>The checkout process is one of the critical stages in the ecommerce conversion funnel. A complicated and time-consuming checkout process can lead to cart abandonment and reduce your conversion rate. Here are some tips to simplify the checkout process:</p><ul><li>Use a progress indicator: A progress indicator shows visitors how far they are in the checkout process and gives them an idea of how much more time it will take to complete the purchase.</li><li>Offer guest checkout: Not all visitors will want to create an account to make a purchase. Offer a guest checkout option to make the process faster and more convenient.</li><li>Allow multiple payment options: Offer multiple payment options, including credit cards, PayPal, and other online payment systems, to cater to different preferences.</li><li>Reduce the number of form fields: The more form fields a visitor has to fill, the more likely they are to abandon the checkout process. Reduce the number of form fields to the bare minimum required to complete the purchase.</li></ul><h3 id="6-implement-live-chat-support">6. Implement live chat support</h3><p>Live chat support can be a powerful tool in boosting your ecommerce conversion rate. It allows visitors to ask questions and get immediate answers, which can help to remove any doubts they may have about making a purchase. Live chat support can also help to improve customer satisfaction and loyalty.</p><p>When implementing live chat support, ensure that it's easily accessible and visible on your website. Train your support agents to be friendly, helpful, and knowledgeable about your products and services.</p><h3 id="7-improve-site-speed">7. Improve site speed</h3><p>Having fast site speed is imperative. Online users are becoming less and less patient meaning you as an ecommerce store owner need to implement methods for reducing latency and speeding up your website. There are many ways to speed up a slow website. We've written a comprehensive guide which gives <a href="https://www.keycdn.com/blog/website-performance-optimization">18 tips for website performance optimization</a>.</p><p>One thing any ecommerce store owner can do to instantly improve their global page speed is to implement a <a href="https://www.keycdn.com/what-is-a-cdn">CDN</a>. With a CDN, you can offload your static assets such as product images, videos, GIFs, CSS files, and much more to the CDN's edge servers. Then, when someone makes a request for one of your store's webpages they will be delivered content from the CDN's nearest edge server instead of your origin server. This reduces latency and speeds up your website.</p><p>We've also written multiple articles on ways to speed up your website if you're using certain CMS platforms. Check them out below:</p><ul><li><a href="https://www.keycdn.com/blog/speed-up-drupal">Speed up Drupal</a></li><li><a href="https://www.keycdn.com/blog/speed-up-joomla">Speed up Joomla</a></li><li><a href="https://www.keycdn.com/blog/speed-up-magento">Speed up Magento</a></li><li><a href="https://www.keycdn.com/blog/speed-up-prestashop">Speed up PrestaShop</a></li><li><a href="https://www.keycdn.com/blog/speed-up-wordpress">Speed up WordPress</a></li></ul><h3 id="8-optimize-for-mobile">8. Optimize for mobile</h3><p>Initially, desktop computers were the primary means of accessing the Internet, with mobile devices being a secondary option. However, with the rise of smartphones and tablets, mobile Internet usage has surpassed desktop usage, and it continues to grow.</p><p>According to a report by Statcounter, mobile devices accounted for approximately 59% of global internet traffic in 2023, with desktops accounting for approximately 39%. This represents a significant shift in the way people access the Internet and interact with online content.</p><figure><img src="https://www.keycdn.com/img/blog/mobile-vs-desktop.jpg" alt="A generic alt title."><figcaption class="figure-caption">Source: <a href="https://www.comscore.com" target="_blank" rel="nofollow noopener" class="text-muted">Comscore</a></figcaption></figure><p>The increased use of mobile devices for Internet browsing and online shopping has led to a shift in website design and optimization. Websites must now be designed to be responsive and optimized for mobile devices, to provide an optimal user experience on smaller screens. This includes simplified navigation, mobile-friendly content, and streamlined checkout processes.</p><p>As many visitors to your ecommerce store will be using a mobile device, it's essential that your site is <a href="https://www.keycdn.com/blog/benefits-of-responsive-web-design">responsive</a> and optimized for mobile just as well as it is for desktop. Google's PageSpeed Insights tool is a great way to check your speed score for both mobile and desktop devices.</p><figure><img src="https://www.keycdn.com/img/blog/pagespeed-insights-mobile.png" alt="pagespeed insights mobile"></figure><p>It will also give you suggestions on areas that can be improved for both mobile and desktop visitors. To learn more about what other site speed test tools are available, check out our complete guide on the <a href="https://www.keycdn.com/blog/website-speed-test-tools">top 15 free speed test tools</a>.</p><h3 id="9-use-videos-gifs">9. Use videos/GIFs</h3><p>Images are great to show a product however depending on the type of product you're selling it may also be beneficial to use videos and of GIFs to display your product. If you're selling a product that solves a problem than you are most likely going to benefit by having a video on your product page which shows how the product works. This allows the customer to visualize how the product does what you say it does. Otherwise, the consumer needs to visualize the functionality of the product themselves which isn't as persuasive.</p><p>You can also use videos for products which don't solve a problem per-se (i.e. a clothing brand). In this case, you could have a video which displays the lifestyle of the product and the feeling you want to portray to your potential customer. Videos will hit home much harder with your website visitors and although they take more time and effort to produce, they do pay off.</p><p>However, similar to images, it's important to your videos/GIFs remain optimized. Videos are one of the biggest contributors to <a href="https://www.keycdn.com/support/the-growth-of-web-page-size">web page size growth</a> and although they are very valuable, can be detrimental to page speed if used improperly. That's why we've written articles on how to optimize the delivery of both your <a href="https://www.keycdn.com/blog/video-optimization">videos</a> and <a href="https://www.keycdn.com/blog/speed-up-gif">GIFs</a> so that you can implement both of them into your product pages without suffering the consequences of poor page speed.</p><h3 id="10-implement-abandon-cart-emails-and-retargeting">10. Implement abandon cart emails and retargeting</h3><p>One of the best ways to increase conversion rates with people who are familiar with your site however haven't made a purchase yet is through abandoned cart emails and retargeting. Abandoned cart emails are fairly straightforward. Basically you can use a service like <a href="https://mailchimp.com" target="_blank" rel="nofollow noopener">MailChimp</a> or <a href="https://www.klaviyo.com" target="_blank" rel="nofollow noopener">Klaviyo</a> to automatically send emails to users who abandoned their cart. These emails can be spaced out throughout the day or across several days to remind your potential customers that they left something in their cart. A great way to bring customers back is to offer them a coupon code in the email so that they can get an even better deal if they complete their purchase.</p><p>A typical abandoned cart email sequence is usually 3-4 emails long. Any more could cause the visitor to get annoyed and any less could be a missed opportunity.</p><p>Additionally, you can retarget people who have visited your site if you're using paid advertising like Google AdWords or Facebook Ads. These advertising platforms allow you to define who you want to send retargeting ads to based on their browsing events and then show them ads that will entice the visitor to come back. Similar to abandon cart emails, retargeting ads typically include a discount code of some sort to further entice the visitor to come back.</p><h2 id="summary">Summary</h2><p>Ecommerce is an ever-changing landscape and to keep up with the fast pace, store owners must be quick to implement best practices and be innovative so that their store doesn't fall behind the competition. Improving your ecommerce conversion rate requires a strategic approach that focuses on optimizing various elements of your website and ecommerce funnel.</p><p>By implementing the ten strategies discussed in this article, you can increase your conversion rate, boost your sales, and improve customer satisfaction and loyalty. Remember to continuously test and optimize your website and ecommerce funnel to ensure that you're providing the best possible experience to your visitors and customers.</p> https://www.keycdn.com/blog/ecommerce-conversion-rate#comments HTTP Cache Headers - A Complete Guide https://www.keycdn.com/blog/http-cache-headers Thu, 16 Nov 2023 06:00:00 +0000 Cody Arsenault https://www.keycdn.com/blog/http-cache-headers <img src="https://www.keycdn.com/img/blog/http-cache-headers.png" alt="HTTP Cache Headers - A Complete Guide"><p>As a website owner, you want your website to be fast, efficient, and accessible to as many users as possible. One of the best ways to achieve this is by using HTTP caching headers. These headers tell web browsers and other HTTP clients how to cache and serve content from your website.</p><p>This article highlights important information on HTTP caching headers and associated CDN behavior. In case you are looking for in-depth information on the role of HTTP cache headers in the modern web, here's everything you need to know.</p><h2 id="how-caching-works">How caching works</h2><p>When a browser requests a file from a server, the server responds with the file and some cache headers. The browser then caches the file based on these headers. The next time the browser requests the same file, it checks its cache to see if it already has a copy. If it does, and the file hasn't expired, the browser serves the cached version of the file. If the file has expired or if the browser has been told not to cache it, the browser requests a fresh copy of the file from the server.</p><p>Caching works differently depending on the type of cache being used. There are two main types of caches: browser caches and CDN caches.</p><h3 id="browser-caches">Browser caches</h3><p>Browser caches are local caches that are used by web browsers to store copies of files. When a browser requests a file, it first checks its local cache to see if it already has a copy. If it does, and the file hasn't expired, the browser serves the cached version of the file. If the file has expired, or if the browser has been told not to cache it, the browser requests a fresh copy of the file from the server.</p><h3 id="cdn-caches">CDN caches</h3><p><a href="https://www.keycdn.com/what-is-a-cdn">CDN</a> caches are distributed caches that are used by Content Delivery Networks (CDNs) to store copies of files. When a browser requests a file from a website that is using a CDN, the request is sent to the CDN instead of the origin server. If the CDN has a cached copy of the file, it serves it directly to the browser. This can greatly reduce the amount of time and resources needed to load the file, as the request doesn't need to travel all the way to the origin server.</p><p>CDN caches can be configured in a number of different ways, depending on the needs of the website. Some CDNs use a &quot;pull&quot; model, where the CDN only caches files when they are requested by a browser. Other CDNs use a &quot;push&quot; model, where the origin server sends files to the CDN proactively before they are requested by a browser.</p><h2 id="what-are-http-cache-headers">What are HTTP cache headers?</h2><p>HTTP cache headers are instructions that web servers send to web browsers, telling them how to cache and serve content. These headers are sent with every HTTP request and response. They can be used to control how frequently a browser caches a file, how long the cache should keep the file, and what should be done when the file is expired.</p><p>HTTP cache headers are important because they help reduce the amount of time and resources needed to load a web page. By caching content, a browser can serve it more quickly without having to request it from the server every time a user visits the page. This can improve website performance, reduce server load, and improve the overall user experience.</p><h2 id="types-of-http-cache-headers">Types of HTTP cache headers</h2><p>Caches work with content mainly through freshness and validation. A fresh representation is available instantly from a cache while a validated representation rarely sends the entire representation again if it hasn't changed. In cases where there is no validator present (e.g. <code>ETag</code> or <code>Last-Modified</code> header), and a lack of explicit freshness info, it will usually (but not always) be considered uncacheable. Let's shift our focus to the kind of headers you should be concerned about.</p><h3 id="1-cache-control">1. <code>Cache-Control</code></h3><p>Every resource can define its own caching policy via the <code>Cache-Control</code> HTTP header. <code>Cache-Control</code> directives control who caches the response, under what conditions and for how long.</p><figure><img src="https://www.keycdn.com/img/blog/cache-control-header.png" alt="cache control header"></figure><p>Requests that don't need server communication are considered the best requests: local copies of the responses allow the elimination of network latency as well as data charges resulting from data transfers. The HTTP specification enables the server to send several different <code>Cache-Control</code> directives which control how and for how long individual responses are cached by browsers among other intermediate caches such as a CDN.</p><pre><code class="language-none">Cache-Control: private, max-age=0, no-cache</code></pre><p>These settings are referred to as response directives. They are as follows:</p><h4 id="public-vs-private"><code>public</code> vs <code>private</code></h4><p>A response that is marked <code>public</code> can be cached even in cases where it is associated with an HTTP authentication or the HTTP response status code is not cacheable normally. In most cases, a response marked <code>public</code> isn't necessary, since explicit caching information (e.g. <code>max-age</code>) shows that a response is cacheable anyway.</p><p>On the contrary, a response marked <code>private</code> can be cached (by the browser) but such responses are typically intended for single users hence they aren't cacheable by intermediate caches (e.g. HTML pages with private user info can be cached by a user's browser but not by a CDN).</p><h4 id="no-cache-and-no-store"><code>no-cache</code> and <code>no-store</code></h4><figure><img src="https://www.keycdn.com/img/blog/no-cache-header.png" alt="no-cache header"></figure><p><code>no-cache</code> shows that returned responses can't be used for subsequent requests to the same URL before checking if server responses have changed. If a proper <code>ETag</code> (validation token) is present as a result, <code>no-cache</code> incurs a roundtrip in an effort to validate cached responses. Caches can however eliminate downloads if the resources haven't changed. In other words, web browsers might cache the assets but they have to check on every request if the assets have changed (304 response if nothing has changed).</p><p>On the contrary, <code>no-store</code> is simpler. This is the case because it disallows browsers and all intermediate caches from storing any versions of returned responses, such as responses containing private/personal information or banking data. Every time users request this asset, requests are sent to the server. The assets are downloaded every time.</p><h4 id="max-age"><code>max-age</code></h4><p>The <code>max-age</code> directive states the maximum amount of time in seconds that fetched responses are allowed to be used again (from the time when a request is made). For instance, <code>max-age=90</code> indicates that an asset can be reused (remains in the browser cache) for the next 90 seconds.</p><h4 id="s-maxage"><code>s-maxage</code></h4><p>The &quot;s-&quot; stands for shared as in shared cache. This directive is explicitly for CDNs among other intermediary caches. This directive overrides the <code>max-age</code> directive and expires header field when present. KeyCDN also obeys this directive.</p><h4 id="must-revalidate"><code>must-revalidate</code></h4><p>The <code>must-revalidate</code> directive is used to tell a cache that it must first revalidate an asset with the origin after it becomes stale. The asset must not be delivered to the client without doing an end-to-end revalidation. In short, stale assets must first be verified and expired assets should not be used.</p><h4 id="proxy-revalidate"><code>proxy-revalidate</code></h4><p>The <code>proxy-revalidate</code> directive is the same as the <code>must-revalidate</code> directive, however, it only applies to shared caches such as proxies. It is useful in the event that a proxy services many users that need to be authenticated one by one. A response to an authenticated request can be stored in the user's cache without needing to revalidate it each time as they are known and have already been authenticated. However, <code>proxy-revalidate</code> allows proxies to still revalidate for new users that have not been authenticated yet.</p><h4 id="no-transform"><code>no-transform</code></h4><p>The <code>no-transform</code> directive tells any intermediary such as a proxy or cache server to not make any modifications whatsoever to the original asset. The <code>Content-Encoding</code>, <code>Content-Range</code>, and <code>Content-Type</code> headers must remain unchanged. This can occur if a non-transparent proxy decides to make modifications to assets in order to save space. However, this can cause serious problems in the event that the asset must remain identical to the original entity-body although it must also pass through the proxy.</p><p>According to <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching" target="_blank" rel="nofollow noopener">Google</a>, the <code>Cache-Control</code> header is all that's needed in terms of specifying caching policies. Other methods are available, which we'll go over in this article, however, are <strong>not required</strong> for optimal performance.</p><p>The <code>Cache-Control</code> header is defined as part of HTTP/1.1 specifications and supersedes previous headers (e.g. <code>Expires</code>) used to specify response caching policies. <code>Cache-Control</code> is supported by all modern browsers so that's all we need.</p><h3 id="2-pragma">2. <code>Pragma</code></h3><p>The old <code>Pragma</code> header accomplishes many things most of them characterized by newer implementations. We are however most concerned with the <code>Pragma: no-cache</code> directive which is interpreted by newer implementations as <code>Cache-Control: no-cache</code>. You don't need to be concerned about this directive because it's a request header that will be ignored by KeyCDN's edge servers. It is however important to be aware of the directive for the overall understanding. Going forward, there won't be new HTTP directives defined for <code>Pragma</code>.</p><h3 id="3-expires">3. <code>Expires</code></h3><figure><img src="https://www.keycdn.com/img/blog/expires-header.png" alt="expires header"></figure><p>A couple of years back, this was the main way of specifying when assets expire. <code>Expires</code> is simply a basic date-time stamp. It's fairly useful for old user agents which still roam unchartered territories. It is, however, important to note that <code>Cache-Control</code> headers, <code>max-age</code> and <code>s-maxage</code> still take precedence on most modern systems. It's however good practice to set matching values here for the sake of compatibility. It's also important to ensure you format the date properly or it might be considered as expired.</p><pre><code class="language-none">Expires: Sun, 03 May 2015 23:02:37 GMT</code></pre><p>To avoid breaking the specification, avoid setting the date value to more than a year.</p><h3 id="4-validators">4. Validators</h3><h4 id="etag"><code>ETag</code></h4><figure><img src="https://www.keycdn.com/img/blog/etag-header.png" alt="etag header"></figure><p>This type of validation token (the standard in HTTP/1.1):</p><ul><li>Is communicated via the <code>ETag</code> HTTP header (by the server).</li><li>Enables efficient resource updates where no data is transfered if the resource doesn't change.</li></ul><p>The following example will illustrate this. 90 seconds after the initial fetch of an asset, initiates the browser a new request (the exact same asset). The browser looks up the local cache and finds the previously cached response but cannot use it because it's expired. This is the point where the browser requests the full content from the server. The problem with it this is that if the resource hasn't changed, there is absolutely no reason for downloading the same asset that is already in the CDN cache.</p><p>Validation tokens are solving this problem. The edge server creates and returns arbitrary tokens, that are stored in the <code>ETag</code> header field, which are typically a hash or other fingerprints of content of existing files. Clients don't need to know how the tokens are generated but need to send them to the server on subsequent requests. If the tokens are the same then resources haven't changed thus downloads can be skipped.</p><p>The web browser provides the <code>ETag</code> token automatically within the <code>If-None-Match</code> HTTP request header. The server then checks tokens against current assets in the cache. A <code>304 Not Modified</code> response will tell the browser if an asset in the cache hasn't been changed and therefore allowing a renewal for another 90 seconds. It's important to note that these assets don't need to be downloaded again which <strong>saves bandwidth and time</strong>.</p><h4 id="how-do-web-developers-benefit-from-efficient-revalidation">How do web developers benefit from efficient revalidation?</h4><p>Browsers do most (if not) all the work for web developers. For instance, they automatically detect if validation tokens have been previously specified and appending them to outgoing requests and updating cache timestamps as required based on responses from servers. Web developers are therefore left with one job only which is ensuring servers provide the required <code>ETag</code> tokens. KeyCDN's edge servers fully support the <code>ETag</code> header.</p><h4 id="last-modified"><code>Last-Modified</code></h4><figure><img src="https://www.keycdn.com/img/blog/last-modified-header.png" alt="last modified header"></figure><p>The <code>Last-Modified</code> header indicates the time a document last changed which is the most common validator. It can be seen as a legacy validator from the time of HTTP/1.0. When a cache stores an asset including a <code>Last-Modified</code> header, it can utilize it to query the server if that representation has changed over time (since it was last seen). This can be done using an <code>If-Modified-Since</code> request header field.</p><p>An HTTP/1.1 origin server should send both, the <code>ETag</code> and the <code>Last-Modified</code> value. More details can be found in section 13.3.4 in the <a href="https://www.ietf.org/rfc/rfc2616.txt" target="_blank" rel="nofollow noopener">RFC2616</a>.</p><p>KeyCDN example response header:</p><pre><code class="language-html">HTTP/1.1 200 OK Server: keycdn-engine Date: Mon, 27 Apr 2015 18:54:37 GMT Content-Type: text/css Content-Length: 44660 Connection: keep-alive Vary: Accept-Encoding **Last-Modified: Mon, 08 Dec 2014 19:23:51 GMT** **ETag: &quot;5485fac7-ae74&quot;** **Cache-Control: max-age=533280** **Expires: Sun, 03 May 2015 23:02:37 GMT** X-Cache: HIT X-Edge-Location: defr Access-Control-Allow-Origin: * Accept-Ranges: bytes</code></pre><p>You can check your HTTP Cache Headers using KeyCDN's <a href="https://tools.keycdn.com/curl">HTTP Header Checker</a> tool.</p><h3 id="5-extension-cache-control-directives">5. Extension <code>Cache-Control</code> directives</h3><p>Apart from the well-known <code>Cache-Control</code> directives outlined in the first section of this article, there also exists other directives which can be used as extensions to <code>Cache-Control</code> resulting in a better user experience for your visitors.</p><h4 id="immutable"><code>immutable</code></h4><p>No conditional revalidation will be triggered even if the user explicitly refreshes a page. The immutable directive tells the client that the response body will not change over time, therefore, there is no need to check for updates as long as it is unexpired.</p><h4 id="stale-while-revalidate"><code>stale-while-revalidate</code></h4><p>The <code>stale-while-revalidate</code> directive allows for a stale asset to be served while it is revalidated in the background.</p><figure><img src="https://www.keycdn.com/img/blog/stale-while-revalidate-explained-1.png" alt="stale while revalidate explained"></figure><p>A <code>stale-while-revalidate</code> value is defined to tell the cache that it has a certain amount of time to validate the asset in the background while continuing to deliver the stale one. An example of this would look like the following:</p><pre><code class="language-none">Cache-Control: max-age=2592000, stale-while-revalidate=86400</code></pre><p>Learn more about the <code>stale-while-revalidate</code> directive in our <a href="https://www.keycdn.com/blog/keycdn-supports-stale-while-revalidate"><code>stale-while-revalidate</code> and <code>stale-if-error guide</code></a>.</p><h4 id="stale-if-error"><code>stale-if-error</code></h4><p>The <code>stale-if-error</code> directive is very similar to the <code>stale-while-revalidate</code> directive in that it serves stale content when the <code>max-age</code> expires. However, the <code>stale-if-error</code> only returns stale content if the origin server returns an error code (e.g. <code>500</code>, <code>502</code>, <code>503</code>, or <code>504</code>) when the cache attempts to revalidate the asset.</p><figure><img src="https://www.keycdn.com/img/blog/stale-if-error-explained.png" alt="stale if error explained"></figure><p>Therefore, instead of showing visitors an error page, stale content is delivered to them for a predefined period of time. During this time it is the goal that the error has been resolved and that the asset can be revalidated.</p><p>Learn more about the <code>stale-if-error</code> directive in our <a href="https://www.keycdn.com/blog/keycdn-supports-stale-while-revalidate"><code>stale-while-revalidate</code> and <code>stale-if-error guide</code></a>.</p><h2 id="keycdn-and-http-cache-headers">KeyCDN and HTTP cache headers</h2><p>At KeyCDN, we understand the importance of HTTP cache headers and their role in optimizing website performance. KeyCDN allows you define your HTTP cache headers as you see fit. The ability to set the Expire and Max Expire values directly within the dashboard makes it very easy to configure things on the CDN side.</p><p>Furthermore, if you rather have even more control over your HTTP cache headers you can disable the Ignore Cache Control feature in your Zone settings and have KeyCDN honor all of your cache headers from the origin. This is very useful in the event that you need to <a href="https://www.keycdn.com/support/http-caching-headers">exclude a certain asset or group of assets from the CDN</a>.</p><h2 id="tl-dr">TL;DR</h2><p>The <code>Cache-Control</code> (in particular), along with the <code>ETag</code> header field are modern mechanisms to control freshness and validity of your assets. The other values are only used for backward compatibility.</p><h2 id="conclusion">Conclusion</h2><p>HTTP cache headers are an important tool for improving website performance and reducing server load. By properly configuring cache headers, you can ensure that your files are cached and served efficiently, without sacrificing freshness or reliability. Remember to set appropriate cache control and expiration headers, consider using ETag headers, and test your headers to ensure that they are working correctly. By following these best practices, you can create a fast, reliable, and efficient website that delivers a great user experience.</p><p>Do you have any thoughts on using HTTP cache headers? If so we would love to hear them below in the comments.</p> https://www.keycdn.com/blog/http-cache-headers#comments Top 7 WordPress Security Threats and How to Fix Them https://www.keycdn.com/blog/wordpress-security-threats Thu, 24 Aug 2023 12:00:00 +0000 Ben Eaton https://www.keycdn.com/blog/wordpress-security-threats <img src="https://www.keycdn.com/img/blog/wordpress-security-threats.png" alt="Top 7 WordPress Security Threats and How to Fix Them"><p>As a content delivery network (CDN) provider, we understand the importance of website security. One of the most popular content management systems (CMS) out there is WordPress, and unfortunately, it is also one of the most targeted platforms for cyber attacks. In this blog, we will be discussing the different security threats that WordPress websites face and how to fix them.</p><p>WordPress is the most popular content management system (CMS) on the Internet today. There are around <a href="https://colorlib.com/wp/wordpress-statistics/" target="_blank" rel="nofollow noopener">810 million sites running on WordPress</a>, and around half of those are hosted on the free WordPress.com site. The rest are hosted on private servers.</p><figure><img src="https://www.keycdn.com/img/blog/wordpress-usage-1.png" alt="wordpress usage"></figure><p>There is a reason so many CMS-based sites use WP. WordPress is a smart and intuitive platform that nearly anyone can learn to use. There are numerous plugins and themes available to help website owners customize the look and features of a site. Plus, those who understand coding can easily customize their sites even further.</p><p>However, WP is also susceptible to a few security threats. Hackers love to go in through the backdoor of your WP site and attempt to set up residence there. Fortunately, if you are aware of the most common security threats, then you can easily fix them and prevent hackers from taking over your site.</p><p>Below are the top 7 WordPress security threats and how to fix them.</p><h2 id="1-password-hacking">1. Password hacking</h2><p>You've probably noticed that most sites requiring a password now require you to create a strong password with capitals, lower case, numbers and special characters. The more complicated you can make the password (but still remember what it is), the less chance hackers have of breaking into your site.</p><p>Understand that hackers often use bots and can try dozens of passwords in seconds. If your password is easy to crack, you can be certain they can and will crack your password. Creating a strong password includes tips such as:</p><ul><li>Not using the same password for everything</li><li>Making the password at least 12 characters long</li><li>Making sure all your devices used to sign in are secure (two-factor authentication helps)</li></ul><h2 id="2-sql-injections">2. SQL injections</h2><p>Because WordPress runs on a database, it also uses PHP server side scripts. While this works well to deliver content quickly and create a WYSIWYG environment, it also makes your WP site open to URL insertions.</p><p>SQL injection attacks occur when an attacker inserts malicious SQL code into a website's database. The malicious code can be used to access sensitive information or even take control of the website. SQL injection attacks can occur when websites use outdated software, poorly written code, or if user input is not validated properly.</p><p>A few methods to help prevent SQL injections include:</p><ul><li>Update to the latest version of WordPress. Any versions below the most current may be vulnerable to SQL injections.</li><li>Use a site such as <a href="https://hackertarget.com/wordpress-security-scan/" target="_blank" rel="nofollow noopener">WordPress Security Scan</a> to find vulnerabilities in your site and then fix them. The basic scan is free and will identify common errors, but you can also upgrade to a premium scan to check for lesser-known vulnerabilities.</li><li>Update to the latest version of PHP that your web hosting server allows. The more up to date the PHP, the less vulnerable your WordPress site will be to hacking.</li><li>Update plugins. Many vulnerabilities are found in plugins and themes, so make sure you update to the latest version. Also, pay attention to the last time the creator updated the plugin or theme. If they no longer offer updates, switch to a different plugin that does.</li></ul><h2 id="3-database-attacks">3. Database attacks</h2><p>Because MySQL is the most common database used, it is also a target for hackers. When you use your server's one-click or easy install features, the default database prefix is <code>wp_</code>. Using this prefix means that the hacker knows the prefix of your database.</p><p>If you are just setting up your WP site, it is simply a matter of changing the database prefix. However, if you already have an established WP site, you'll need to go in and make some changes to use a different prefix. You can change the prefix to your database fairly easily, though, by following these steps.</p><ul><li>Backup your database in case there is an issue when making changes. This allows you to easily restore the site if there is an error.</li><li>Go to your root directory for your WordPress installation (you can use PHP or some servers allow access to files via the control panel) and open the <code>wp-config.php</code> file. Look for a line that reads: $table_prefix = 'wp_';<figure><img src="https://www.keycdn.com/img/blog/table-prefix-config.jpg" alt="webm support"></figure></li><li>Replace <code>wp_</code> with <code>wp_78398</code> (Use numbers of your choice and make them random. You can also use letters). Save and close the file.</li><li>Open your database through phpMyAdmin or similar program. If your server uses cPanel, then look for the phpMyAdmin button.<figure><img src="https://www.keycdn.com/img/blog/phpmyadmin.jpg" alt="webm support"></figure></li><li>Click on the tab that says SQL and use the following query (see below). You also can simply change each prefix manually, but if you have a lot of tables this is time-consuming. Note that you need to change <code>78398</code> to the numbers or letters or combination of that you personally used.<figure><img src="https://www.keycdn.com/img/blog/phpmyadmin-database.jpg" alt="phpmyadmin database"></figure></li></ul><pre><code class="language-none">RENAME table `wp_commentmeta` TO `wp_78398_commentmeta`;RENAME table `wp_comments` TO `wp_78398_comments`;RENAME table `wp_links` TO `wp_78398_links`;RENAME table `wp_options` TO `wp_78398_options`;RENAME table `wp_postmeta` TO `wp_78398_postmeta`;RENAME table `wp_posts` TO `wp_78398_posts`;RENAME table `wp_terms` TO `wp_78398_terms`;RENAME table `wp_termmeta` TO `wp_78398_termmeta`;RENAME table `wp_term_relationships` TO `wp_78398_term_relationships`;RENAME table `wp_term_taxonomy` TO `wp_78398_term_taxonomy`;RENAME table `wp_usermeta` TO `wp_78398_usermeta`;RENAME table `wp_users` TO `wp_78398_users`;</code></pre><p>You now need to fix any options. Use this query and fix any lines that pop up by changing to the new prefix you've chosen:</p><pre><code class="language-none">SELECT * FROM `wp_78398_options` WHERE `option_name` LIKE '%wp_%'</code></pre><p>Finally, search usermeta for wp_ prefixes. Use this query:</p><pre><code class="language-none">SELECT * FROM `wp_78398_usermeta` WHERE `meta_key` LIKE '%wp_%'</code></pre><p>Remember that you need to plug in what numbers or letters you chose in place of 78398.</p><p>Save the changes and check to make sure everything is working. You should create a second backup of the site with the new prefixes in place, but don't discard the original in case something breaks. It's always a good idea to keep a backup anytime you make any type of major change to your site.</p><h2 id="4-brute-force-attacks">4. Brute force attacks</h2><p>A brute force attack is when an attacker uses automated tools to try to guess the correct username and password combination to gain access to a website. Hackers use dictionaries of commonly used passwords or try every possible combination of characters until they get the right one. Brute force attacks can cause a website to crash, allow attackers to steal sensitive information, or even take control of the website.</p><p>Fortunately, this is a pretty easy security threat to stop.</p><ul><li>Install the plugin <a href="https://wordpress.org/plugins/limit-login-attempts-reloaded/" target="_blank" rel="nofollow noopener">Limit Login Attempts Reloaded</a>. This plugin not only stops someone from a brute force attack, which can also slow down your website and eat up bandwidth, but it will completely lock an IP out of your site for attempting too many passwords in a short amount of time.<figure><img src="https://www.keycdn.com/img/blog/limit-login-attempt-plugin.png" alt="limit login attempt plugin"></figure><figure><img src="https://www.keycdn.com/img/blog/wordpress-login-attempts.png" alt="wordpress login attempts"></figure></li><li>Install a security plugin. Many of today's security plugins come with a firewall that blocks anyone attempting suspicious activity on your site. One good one is All in One WordPress Security and another is Wordfence. However, there are a number of options, so choose the one that works best for you and is affordable.</li><li>There are some more advanced tactics you can use, such as <code>.htaccess</code> password protection, but start with the plugins and if that doesn't stop the attacks you can get more in-depth with your protection levels. You can also change the default admin name to better protect your site.</li><li>You can also <a href="https://www.hostinger.com/tutorials/change-wordpress-username/" target="_blank" rel="nofollow noopener">change your username</a> using the tutorial at Hostinger.</li></ul><h2 id="5-hijacking-an-open-user">5. Hijacking an open user</h2><p>If multiple people work on your site, there is a security risk for each one. If the person logs in and then walks away from their computer, it is vulnerable to anyone in the vicinity. This could be a problem in a shared workspace, for example. If that person's computer gets hijacked, your site could be vulnerable as well.</p><ul><li>Install the Inactive Logout plugin.<figure><img src="https://www.keycdn.com/img/blog/inactive-logout.png" alt="inactive logout"></figure></li><li>Choose the settings that make sense for your site. You can set the length of time the person is inactive before you log them out and even the message they receive when being logged out.<figure><img src="https://www.keycdn.com/img/blog/inactive-logout-settings.png" alt="inactive logout settings"></figure></li></ul><h2 id="6-cross-site-scripting-xss">6. Cross-site scripting (XSS)</h2><p><a href="https://www.keycdn.com/blog/x-xss-protection">Cross-Site Scripting (XSS)</a> attacks occur when an attacker injects malicious code into a website, which is then executed in a user's browser. The malicious code can be used to steal sensitive information or take control of the website. XSS attacks can occur when websites use outdated software, poorly written code, or if user input is not validated properly.</p><p>To fix this issue, you should always use the latest version of WordPress and all plugins, and ensure that all code used on the website is properly written and validated. Additionally, you can use plugins like Anti-Malware Security and Brute-Force Firewall to scan your website for any vulnerabilities.</p><h2 id="7-ddos-attacks">7. DDoS Attacks</h2><p>A <a href="https://www.keycdn.com/blog/ddos-protection">Distributed Denial of Service (DDoS)</a> attack is when an attacker floods a website with traffic, causing it to crash or become unavailable. DDoS attacks can be carried out by using a network of infected computers, also known as a botnet. These botnets can be used to overwhelm a website with traffic, making it inaccessible to users.</p><p>You can protect yourself from this type of attack by using CDN services like ours to mitigate DDoS attacks. We have a global network of servers that can absorb and distribute traffic, ensuring that your website remains online even during an attack. Additionally, website owners can use plugins like Wordfence Security to block malicious traffic and reduce the risk of DDoS attacks.</p><h2 id="keeping-your-site-secure">Keeping your site secure</h2><p>Now that we have discussed the most common security threats to WordPress websites let's highlight the most important measures on how to fix them.</p><h3 id="keep-your-wordpress-website-up-to-date">Keep your WordPress website up to date</h3><p>Currently, almost 61% of WordPress users use the latest version. The statistics also show, for example, that over 3% (this corresponds to about 26,730,000 users!) use a version that has been outdated for about five years.</p><figure><img src="https://www.keycdn.com/img/blog/wordpress-version.png" alt="wordpress version"></figure><p>As we mentioned earlier, one of the most common reasons for WordPress websites to be hacked is the use of outdated software.</p><p>To prevent this, it is essential to keep your WordPress website and all plugins up to date. WordPress updates often contain security patches, and plugin updates often fix security vulnerabilities. By keeping everything up to date, you reduce the risk of your website being hacked.</p><h3 id="use-strong-passwords">Use strong passwords</h3><p>Using strong passwords is essential to protect your WordPress website from brute force attacks. Strong passwords should be at least 12 characters long, and should include a combination of letters, numbers, and symbols. Avoid using easy-to-guess passwords like &quot;password&quot; or &quot;123456&quot;. You can use password managers like LastPass or Dashlane to generate and store strong passwords.</p><h3 id="install-security-plugins">Install security plugins</h3><p>There are many security plugins available for WordPress that can help you protect your website from various types of attacks. Some of the most popular security plugins include Wordfence Security, iThemes Security, Sucuri Security, and Anti-Malware Security and Brute-Force Firewall. These plugins can scan your website for malware, block malicious traffic, and enforce strong passwords.</p><h3 id="use-a-content-delivery-network-cdn">Use a content delivery network (CDN)</h3><p>Using a <a href="https://www.keycdn.com/what-is-a-cdn">CDN</a> can help protect your WordPress website from DDoS attacks. The global network of servers can absorb and distribute traffic, ensuring that your website remains online even during an attack. Additionally, using a CDN can improve your website's performance, as it caches content and serves it from a server closer to the user.</p><h3 id="backup-your-website-regularly">Backup your website regularly</h3><p>Backing up your website regularly is essential in case of a security breach or other catastrophic event. If your website is hacked, you can restore it from a backup to minimize downtime. Most hosting providers offer backup services, but you can also use plugins like UpdraftPlus or BackupBuddy to back up your website to a cloud storage service like Google Drive or Dropbox.</p><h2 id="conclusion">Conclusion</h2><p>WordPress websites are vulnerable to various types of security threats, including brute force attacks, SQL injection attacks, Hijacking, XSS attacks, Database attacks, and DDoS attacks. To protect your WordPress website, you should keep everything up to date, use strong passwords, install security plugins, use a CDN, and backup your website regularly.</p><p>By following these best practices, you can reduce the risk of your website being hacked and ensure that your users' data remains secure. As a CDN provider, we are committed to helping you protect your website and provide a fast, secure, and reliable user experience.</p> https://www.keycdn.com/blog/wordpress-security-threats#comments Icon Fonts vs SVGs - Which One Should You Use? https://www.keycdn.com/blog/icon-fonts-vs-svgs Thu, 06 Jul 2023 14:00:00 +0000 Ben Eaton https://www.keycdn.com/blog/icon-fonts-vs-svgs <img src="https://www.keycdn.com/img/blog/icon-fonts-vs-svgs.png" alt="Icon Fonts vs SVGs - Which One Should You Use?"><p>If you are building a website or application and wondering whether to use icon fonts or SVGs, you have come to the right place. In this article, we will explore the pros and cons of each option and help you decide which one is the best fit for your project.</p><p>Graphical icons are a crucial component of almost every website or app. Although icons are typically small in size by nature, selecting a format for your web icons is not a trivial decision. Aside from the standard image formats, web developers have two main options: SVGs or icon fonts. Which one should you use? Let's see how the two formats compare in terms of performance, flexibility, and accessibility.</p><h2 id="the-evolution-of-web-icons">The evolution of web icons</h2><p>Web icons have come a long way since the early days of the internet. In the time before CSS, web icons had to be images. Because image files are large, web developers have always tried to find alternative methods to display small icons.</p><p>In the early 2000s, icons were often simple, pixelated graphics that were used primarily for navigation and to indicate links. As web design evolved, so did the use and design of icons.</p><p>One of the first major changes in the evolution of web icons was the introduction of icon fonts. Icon fonts were first introduced in 2010 and quickly gained popularity as a way to easily incorporate icons into web design. They offered a lightweight and scalable alternative to using images for icons.</p><p>As web design continued to evolve, the use of SVGs (Scalable Vector Graphics) became more prevalent. SVGs allowed for more design flexibility and could be easily scaled without losing quality. This made them a popular choice for creating custom icons and graphics.</p><p>The introduction of flat design in the mid-2010s also had a significant impact on the evolution of web icons. The flat design emphasized simplicity and minimalism, with a focus on using simple shapes and bold colors. This led to the widespread use of simple, minimalist icons that were easy to recognize and visually appealing.</p><p>More recently, the trend towards using animated icons has become more prevalent. Animated icons can add an element of interactivity and engagement to web design, making them a popular choice for websites and applications.Another recent development in the evolution of web icons is the use of 3D graphics and isometric design. These styles add depth and dimension to icons, making them more visually interesting and engaging.</p><h2 id="what-are-icon-fonts">What are icon fonts?</h2><p>Icon fonts are text files that can be modified using CSS. Consequently, they scale much better than raster images, so changing the size of an icon font doesn't degrade its visual quality. Changing the color or adding a shadow is just as simple as editing text. You can easily find free icon fonts to use on your website, or you can design your own. One downside of using icon fonts is that most font sets contain icons that you probably won't use, so they will just be <strong>taking up space</strong>.</p><p>Like CSS sprites before them, icon fonts are starting to fall out of favor with developers. Properly displaying icon fonts often requires the browser to make additional requests to the server, which can lead to FOIT, or flash of invisible text, on icons while the font libraries are still loading. If the browser cannot interpret the fonts, then the user will just see empty characters. Since such scenarios are unacceptable for professional websites, more developers are now turning to SVGs.</p><h2 id="what-are-svgs">What are SVGs?</h2><p>SVGs (Scalable Vector Graphics) allow vector graphics to be displayed in the browser. SVGs are quickly becoming the new standard for web icons and animations. They not only offer superior scaling, but they often render more quickly and reliably than icon fonts. Since vector graphics are composed entirely of code, they don't have to be imported from large external files. They are also much smaller in size than your typical JPG or PNG as well as most icon font libraries.</p><p>Making the most of your SVGs may necessitate overcoming a bit of a learning curve, but the rewards are well worth the effort.</p><h2 id="how-svgs-work">How SVGs work</h2><p>It's possible to use SVGs like within a regular <code>&lt;img&gt;</code> element in your HTML utilizing the width and height attributes to adjust the dimensions. However, this method somewhat limits your ability to customize your SVGs.</p><p>If you want the ability to further customize your SVG icons directly from within the HTML, you'll need to inline your SVG by simply pasting the code directly into your HTML document. Then, you can change the color or apply filters by targeting it with CSS. Here is what an example SVG icon looks like:</p><pre><code class="language-html">&lt;svg version=&quot;1.1&quot; baseProfile=&quot;full&quot; width=&quot;300&quot; height=&quot;200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt; &lt;rect width=&quot;100%&quot; height=&quot;100%&quot; fill=&quot;#3686be&quot; /&gt; &lt;circle cx=&quot;150&quot; cy=&quot;100&quot; r=&quot;80&quot; fill=&quot;white&quot; /&gt; &lt;text x=&quot;150&quot; y=&quot;115&quot; font-size=&quot;35&quot; text-anchor=&quot;middle&quot; fill=&quot;#3a3a3a&quot;&gt;KeyCDN&lt;/text&gt; &lt;/svg&gt;</code></pre><p>The code above, inspired by <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started" target="_blank" rel="nofollow noopener">Mozilla</a>, displays a graphic like this in a browser:</p><figure><img src="https://www.keycdn.com/img/blog/keycdn-svg-example.png" alt="keycdn svg example"></figure><p>Although SVG code can seem intimidating at first glance, designing and controlling SVG icons is deceptively easy. In fact, you can just use a program like Adobe Illustrator to create your own vector graphics to use as icons. Just save them as SVG files, or you can generate the code within the Illustrator interface. You can also export drawings from Google Docs as SVG files.</p><h2 id="are-icon-fonts-still-useful">Are icon fonts still useful?</h2><p>Icon fonts are far from obsolete. While they are not always the most efficient nor the most reliable option, icon fonts are still relatively simple and easy to implement therefore many developers continue to use them. Depending on the number of icons used, It may not be worth the effort to switch out icon fonts for SVGs on your older projects; however, SVGs are the definitive way of the future, so you might as well get comfortable using them going forward.</p><h2 id="comparing-svgs-vs-icon-fonts">Comparing SVGs vs icon fonts</h2><p>To help you decide which icon format to choose, let's see how the two options compare in various departments.</p><h3 id="advantages-of-icon-fonts">Advantages of icon fonts</h3><p>Icon fonts have been around for a while and have been a popular choice for displaying icons on websites and applications. Here are some of their advantages:</p><ol><li><p><strong>Easy to use</strong>: Icon fonts are easy to use and require minimal setup. All you need to do is include the font files in your project and use CSS to display the icons. You can even customize the icons using CSS, such as changing the color, size, and other properties.</p></li><li><p><strong>Lightweight</strong>: Icon fonts are lightweight and do not add much to your website's page load time. Since the icons are encoded as font glyphs, they are essentially text and do not require separate image files to be loaded.</p></li><li><p><strong>Widely supported</strong>: Icon fonts are widely supported by browsers and can be used on virtually any device or platform. They are also compatible with screen readers and other assistive technologies, making them accessible to users with disabilities.</p></li></ol><h3 id="disadvantages-of-icon-fonts">Disadvantages of icon fonts</h3><p>However, there are some drawbacks to using icon fonts:</p><ol><li><p><strong>Limited customization</strong>: While icon fonts can be customized using CSS, they are limited in terms of design flexibility. You are limited to the predefined set of icons included in the font, and you cannot create your own custom icons.</p></li><li><p><strong>Quality issues</strong>: Some icon fonts may suffer from quality issues, such as jagged edges or pixelation, particularly at smaller sizes. This can be especially noticeable on high-resolution screens.</p></li><li><p><strong>Accessibility concerns</strong>: While icon fonts are generally accessible, there are some concerns around their use. Since they are encoded as font glyphs, screen readers may have difficulty identifying them as images, and users may not be able to access alternative text descriptions.</p></li></ol><h3 id="advantages-of-svgs">Advantages of SVGs</h3><p>SVGs have become increasingly popular in recent years and are now a common choice for displaying icons on websites and applications. Here are some of their advantages:</p><ol><li><p><strong>Design flexibility</strong>: SVGs offer more design flexibility than icon fonts, allowing you to create your own custom icons and graphics. You can also apply advanced effects and animations to SVGs using CSS or JavaScript.</p></li><li><p><strong>Scalability</strong>: SVGs are scalable and can be resized without losing quality. This makes them ideal for use on high-resolution screens or in responsive designs, where icons need to be resized depending on the device or screen size.</p></li><li><p><strong>Accessibility</strong>: SVGs are more accessible than icon fonts, as they can be easily identified by screen readers and other assistive technologies. You can also provide alternative text descriptions for SVGs, making them accessible to users with disabilities.</p></li></ol><h3 id="disadvantages-of-svgs">Disadvantages of SVGs</h3><p>However, there are also some drawbacks to using SVGs:</p><ol><li><p><strong>Complex setup</strong>: Setting up SVGs can be more complex than icon fonts, particularly if you are creating your own custom icons. You may need to use specialized software or tools to create and optimize your SVGs.</p></li><li><p><strong>Larger file sizes</strong>: SVGs can have larger file sizes than icon fonts, particularly if they include complex graphics or animations. This can impact your website's page load time and performance.</p></li><li><p><strong>Browser support</strong>: While SVGs are supported by most modern browsers, some older browsers may not support them fully. This can result in inconsistent rendering or display issues for some users.</p></li></ol><h2 id="which-one-should-you-use">Which one should you use?</h2><p>So, which option should you choose? It ultimately depends on your project's specific requirements and constraints. Here are some key factors to consider when deciding between icon fonts and SVGs:</p><h3 id="1-size">1. Size</h3><p>If you choose to inline your SVGs in order to add styles, they can quickly increase in size, and the code can become quite cumbersome. It's also worth noting that inline SVG code doesn't get cached by the user's browser. External SVG files, on the other hand, can be cached. If you have a lot of icons on a single page, then icon fonts may provide a smoother user experience than inline SVGs. Of course, if you're using a premade icon font set, then you will probably be wasting resources on unused icons.</p><p>The thing that's worth noting here is that 10 optimized SVG icons will likely be much smaller than an entire icon library. However, if you create your own custom icon library with only the icons you need, the icon library font will end up being smaller.</p><h3 id="2-performance">2. Performance</h3><p>Icon fonts can be cached therefore making them load faster directly from the browser. However, the downside to this is that they create an additional HTTP request. On the other hand, if you're inlining SVG icons there are no additional HTTP requests needed, however these cannot be cached by the browser.</p><p>You can however include your SVG files in an external file thus making them cacheable by the browser. Again, performance-wise the difference in speed will depend on how large your icon font/SVGs are. Try running <a href="https://tools.keycdn.com/performance">performance tests</a> with both to determine which one loads faster.</p><h3 id="3-flexibility">3. Flexibility</h3><p>Both formats can be styled using CSS, but inline SVGs give you far more options such as glyphs strokes and multicolored icons. You can even have animated web icons.</p><h3 id="4-browser-support">4. Browser support</h3><p>Whichever format you choose for icons, you may have to perform some extra steps to make them compatible with older browsers. Since they've been around longer, icon fonts are more widely supported. Anyone using IE 6 or higher, which likely includes everyone, should be able to see your icon fonts. If you use SVGs, then you might want to include a <a href="https://github.com/jonathantneal/svg4everybody" target="_blank" rel="nofollow noopener">JS polyfill</a> to support those using IE 8 or lower.</p><p>However, as most users have moved away from legacy browser versions, this shouldn't be much of a concern, regardless of whether you choose icon fonts or SVGs. The only lack of support in terms of SVG icons and modern browsers comes from IE, which doesn't properly scale SVG files (height and width attributes are recommended).</p><figure><img src="https://www.keycdn.com/img/blog/svg-browser-support.png" alt="svg browser support"></figure><h3 id="5-scalability">5. Scalability</h3><p>Although both SVGs and icon fonts are vector-based, browsers interpret icon fonts as text, which means they are subject to anti-aliasing. Therefore, SVGs tend to look a little sharper than icon fonts.</p><h3 id="6-positioning">6. Positioning</h3><p>Because icon fonts must be inserted via a pseudo element, positioning font icons can be tricky. You may have to consider the <code>line-height</code>, <code>vertical-align</code>, and <code>letter-spacing</code> among other factors to get the pseudo element and the actual glyph to match up perfectly. For SVGs, you just have to set the size.</p><h3 id="7-accessibility">7. Accessibility</h3><p>If accessibility is a top priority for your project, SVGs may be the better choice. Unlike icon fonts, SVGs have built-in semantically-sensible elements, so you don't have to include any workarounds to make your fonts accessible to screen readers.</p><h2 id="svg-icon-tools-and-resources">SVG icon tools and resources</h2><p>Mozilla's Developer Network has a very <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial" target="_blank" rel="nofollow noopener">thorough SVG tutorial</a> that explains how to stylize your icons with inline CSS. In addition to Adobe Illustrator, there are several tools to help you implement SVG icons. <a href="https://icomoon.io" target="_blank" rel="nofollow noopener">IcoMoon</a> is an excellent resource for premade SVGs and font icons, and the IcoMoon app allows you to create your own. If you're looking for something open source, <a href="https://inkscape.org/en/" target="_blank" rel="nofollow noopener">Inkscape</a> is a free vector drawing program that exports SVG files. Tools like <a href="https://convertio.co" target="_blank" rel="nofollow noopener">Convertio</a> allow you to convert other image formats to SVG files.</p><p>It's important to note that programs like Illustrator and Inkscape often embed <strong>extra information into exported SVG files that you don't need</strong>. Therefore, you should run your SVG icons through an optimization tool like <a href="https://github.com/svg/svgo" target="_blank" rel="nofollow noopener">SVGO</a> or the <a href="https://www.svgminify.com" target="_blank" rel="nofollow noopener">SVG Minifier</a> to trim them down before adding them to your website.</p><p>Apart from the resources mentioned above, there are also a variety of icon websites out there which provide high quality vectors as either a paid or free service. Check out our complete <a href="https://www.keycdn.com/blog/icon-library">icon library resources</a> guide as well as our post on improving the speed of your glyphicons through using a <a href="https://www.keycdn.com/support/glyphicons-cdn">glyphicon CDN</a>.</p><h2 id="summary">Summary</h2><p>There is still some debate in the community regarding whether or not icon fonts are better than SVGs or vice-versa. The truth is, what makes one or the other &quot;better&quot;, in some cases, depends on the circumstance in which it is being used.</p><p>However, more often than not, <strong>SVGs are the preferred method</strong>. They're much more scalable, offer a better user experience, and are supported by all major browsers. Even a few of the top <a href="https://www.keycdn.com/blog/web-performance-advice">web performance experts</a> say that moving away from icon fonts in favor of SVGs is essential.</p><p>Let us know your thoughts in the comments below. Are you using icon fonts, SVG icons, or a combination of both?</p> https://www.keycdn.com/blog/icon-fonts-vs-svgs#comments Improving PHP Performance for Web Applications https://www.keycdn.com/blog/php-performance Thu, 18 May 2023 06:28:45 +0000 Cody Arsenault https://www.keycdn.com/blog/php-performance <img src="https://www.keycdn.com/img/blog/php-performance.png" alt="Improving PHP Performance for Web Applications"><p>As a web developer, you must be always on the lookout for ways to improve the performance of your applications. With the increasing demand for faster and more efficient web applications, optimizing PHP performance has become a critical aspect of web development. In this blog, we will explore some of the best practices and tips for improving PHP performance for web applications. The best tool for improving PHP performance isn't any individual program; it's knowing <strong>which problems to look for and how to address them</strong>. This guide will cover everything you need to know to ensure that your PHP applications always run smoothly.</p><h2 id="a-brief-history-of-php">A brief history of PHP</h2><p><a href="https://php.net" target="_blank" rel="nofollow noopener">PHP</a> is a scripting language invented by Rasmus Lerdorf in 1995. Initially intended for the developer's personal use, &quot;PHP&quot; was originally an acronym for &quot;Personal Home Page.&quot; Lerdorf initially developed PHP as a set of Common Gateway Interface (CGI) scripts for tracking visitors to his personal website. Over time, he added more features to the language, such as dynamic generation of HTML pages, and released it as an open-source project in 1995.</p><p>In 1997, two developers, Andi Gutmans and Zeev Suraski, rewrote the core of PHP and transformed it into a more robust and efficient language. This new version of PHP, known as PHP 3, gained popularity quickly and became widely used for developing dynamic web pages.</p><p>Since then, PHP has continued to evolve and improve, with the addition of new features such as improved object-oriented programming, better security features, and improved performance. Today, PHP is one of the most widely used server-side scripting languages, powering some of the biggest websites on the internet, including Facebook, Wikipedia, and WordPress.</p><p>In recent years, PHP has also seen the introduction of new versions. In 2015, PHP 7.0 was released with updates including improvements to the Zend Engine and an overall <strong>reduction in memory use</strong>. At the time of writing this article, the newest available version is PHP 8.2, which was announced in December of 2022. The PHP Classes website contains extensive details about all of the <a href="https://www.php.net/releases/8.2/en.php" target="_blank" rel="nofollow noopener">changes made in PHP 8.2</a>.</p><h2 id="what-exactly-is-good-php-performance">What exactly is good PHP performance?</h2><p>Performance and speed are not necessarily synonymous. Achieving optimal performance is often a balancing act that requires trade-offs between speed, accuracy, and scalability. For example, while building a web application, you may have to decide between prioritizing speed by writing a script that loads everything into memory up front or prioritizing scalability with a script that loads data in chunks.</p><p>Based on a representation from <a href="https://www.phplens.com" target="_blank" rel="nofollow noopener">phplens</a>, the image below depicts the theoretical trade-off between speed and scalability:</p><figure><img src="https://www.keycdn.com/img/blog/php-speed-scalability.png" alt="php speed scalability"></figure><p>The red line represents a script optimized for speed, and the blue line is a script that prioritizes scalability. When the number of simultaneous connections is low, the red line runs faster; however, as the number of users grows, the red line becomes slower. The blue line also slows down when traffic rises; however, the decline isn't as drastic, so the script tuned for speed actually becomes slower than the script tuned for scalability after a certain threshold.</p><p>A real world analogy would be the comparison between a sprinter and a cross-country runner. Sprinters are much faster when running short races, but they tire out in longer competitions. Cross-country runners keep a slower but more consistent pace, which allows them to <strong>conserve energy and travel longer distances</strong>. The two athletes are better suited for different situations. Likewise, some scripts work better in different scenarios. Choosing the right one for your application will require careful consideration of your users. You may have to adjust scripts over time as your traffic increases.</p><h2 id="when-to-begin-optimizing-php-code">When to begin optimizing PHP code</h2><p>Experienced programmers sometimes save the fine-tuning of code for the end of a project cycle. However, this is only advisable if you are certain of your PHP application's performance parameters. A more sensible approach is to <strong>conduct tests during the development process</strong>; otherwise, you may find yourself rewriting large chunks of code to make your application function properly.</p><p>Before you start designing a PHP application, run benchmarks on your hardware and software to determine your performance parameters. This information can guide your coding by helping you weigh the risks and benefits of specific trade-offs. Be sure to use <strong>adequate test data</strong>, or else you could create code that doesn't scale.</p><h2 id="tips-for-optimizing-php-scripts">Tips for optimizing PHP scripts</h2><p>Writing good code is the essential first step to creating PHP applications that are fast and stable. Following these best practices from the beginning will save time on troubleshooting later.</p><h3 id="1-take-advantage-of-native-php-functions">1. Take advantage of native PHP functions</h3><p>Wherever possible, try to take advantage of <a href="https://php.net/manual/en/indexes.functions.php" target="_blank" rel="nofollow noopener">PHP's native functions</a> instead of writing your own functions to achieve the same outcome. Taking a little while to learn how to use PHP's native functions will not only help you write code faster, but will also make it more efficient.</p><h3 id="2-use-json-instead-of-xml">2. Use JSON instead of XML</h3><p>Speaking of which, native PHP functions such as <code><a href="https://php.net/manual/en/function.json-encode.php" target="_blank" rel="nofollow noopener">json_encode()</a></code> and <code><a href="https://php.net/manual/en/function.json-decode.php" target="_blank" rel="nofollow noopener">json_decode()</a></code> are incredibly fast, which is why using JSON is preferable to using XML. If you are committed to XML, be sure to parse it using regular expressions rather than DOM manipulation.</p><h3 id="3-cash-in-on-caching-techniques">3. Cash in on caching techniques</h3><p><a href="https://php.net/manual/en/book.memcache.php" target="_blank" rel="nofollow noopener">Memcache</a> is particularly useful for reducing your database load while bytecode caching engines like <a href="https://php.net/manual/en/book.opcache.php" target="_blank" rel="nofollow noopener">OPcache</a> are great for saving execution time when scripts get compiled.</p><h3 id="4-cut-out-unnecessary-calculations">4. Cut out unnecessary calculations</h3><p>When using the same value of a variable multiple times, calculate and assign the value at the beginning rather than performing calculations for every use.</p><h3 id="5-use-isset">5. Use <code>isset()</code></h3><p>Compared to <code>count()</code>, <code>strlen()</code>, and <code>sizeof()</code>, <code><a href="https://php.net/manual/en/function.isset.php" target="_blank" rel="nofollow noopener">isset()</a></code> is a faster and simpler way to determine if a value is greater than 0.</p><h3 id="6-cut-out-unnecessary-classes">6. Cut out unnecessary classes</h3><p>If you don't intend on using classes or methods multiple times, then you don't really need them. If you must employ classes, be sure to use <strong>derived class methods</strong> as they are faster than methods in base classes.</p><h3 id="7-turn-off-debugging-notifications">7. Turn off debugging notifications</h3><p>Alerts that draw your attention to errors come in handy during the coding process, but they become just one more process that slows you down after launch. Disable such notifications before going live.</p><h3 id="8-close-database-connections">8. Close database connections</h3><p>Unsetting variables and closing database connections in your code will save precious memory.</p><h3 id="9-limit-your-database-hits">9. Limit your database hits</h3><p>Making queries aggregate can reduce the number of hits to your database, which will make things run faster.</p><h3 id="10-use-the-strongest-str-functions">10. Use the strongest <code>str</code> functions</h3><p>While <code>str_replace</code> is faster than <code>preg_replace</code>, the <code><a href="https://php.net/manual/en/function.strtr.php" target="_blank" rel="nofollow noopener">strtr</a></code> function is four times faster than <code>str_replace</code>.</p><h3 id="11-stick-with-single-quotes">11. Stick with single quotes</h3><p>When possible, use single quotes rather than double quotes. Double quotes check for variables, which can drag down performance.</p><h3 id="12-try-three-equal-signs">12. Try three equal signs</h3><p>Since <code>===</code> only checks for a closed range, it is faster than using <code>==</code> for comparisons.</p><h2 id="types-of-bottlenecks-that-affect-php-performance">Types of bottlenecks that affect PHP performance</h2><p>Tinkering with your scripts can certainly be beneficial. However, there are also issues that have nothing to do with code which can also hinder PHP performance. This is why developers need a thorough understanding of their server's subsystems to <strong>identify and address bottlenecks</strong>. Below are areas you should check if you're having performance issues.</p><h3 id="1-the-network">1. The network</h3><p>One obvious source of bottlenecks are networks. Depending on your current network's capacity, it may lack the power to handle the amount of data being transmitted.</p><h3 id="2-the-cpu">2. The CPU</h3><p>Transmitting plain HTML pages across a network doesn't drain your CPU, but PHP applications do. Depending on your requirements, you may at least a server with multiple processors to process your PHP code efficiently.</p><h3 id="3-shared-memory">3. Shared memory</h3><p>A lack of shared memory can disrupt inter-process communication, which can lead to lagging performance.</p><h3 id="4-the-filesystem">4. The filesystem</h3><p>Your filesystem can become fragmented over time. A file cache that uses RAM can speed up disk access so long as there is enough memory.</p><h3 id="5-process-management">5. Process management</h3><p>Make sure your server isn't overburdened with unnecessary processes. Remove any unused networking protocols, antivirus scanners, mail servers and hardware drivers. Running PHP in multi-threaded mode can also result in better response times.</p><h3 id="6-other-servers">6. Other servers</h3><p>If your application depends on outside servers, a bottleneck on the other server can slow you down. There is not much you can do in such scenarios, but you can make alterations on your side to mitigate deficiencies on the other end.</p><h2 id="more-tips-for-improving-php-performance">More tips for improving PHP performance</h2><h3 id="1-take-advantage-of-opcache">1. Take advantage of OPcache</h3><p>Since PHP is interpreted into executable code extemporaneously, programmers don't have to pause to compile code every time they make a small change. Unfortunately, recompiling identical code every time it runs on your website slows performance, which is why opcode cache, or <a href="https://php.net/manual/en/book.opcache.php" target="_blank" rel="nofollow noopener">OPCache</a> is very useful.</p><p>OPcache is an extension that saves compiled code into memory. Therefore, the next time the code executes, PHP will check timestamps and file sizes to determine if the source file has been altered. If it has not, the cached code will run.</p><p>The image below shows the difference in execution time and memory usage between a PHP application running with no cache, OPcache, and eAccelerator (another PHP caching tool).</p><figure><img src="https://www.keycdn.com/img/blog/opcache.png" alt="opcache"><figcaption class="figure-caption">Source: <a href="https://www.prestashop.com/blog/en/your-prestashop-store-is-twice-as-fast-with-zend-opcache/" target="_blank" rel="nofollow noopener" class="text-muted">PrestaShop</a></figcaption></figure><h3 id="2-identify-database-delays">2. Identify database delays</h3><p>As discussed above, performance problems are not always caused by code. Most bottlenecks occur when your application must access resources. Since the data access layer of a PHP application can account for up to <strong>90 percent of execution time</strong>, one of the first steps you should take is to look at all instances of database access in your codebase.</p><p>Make sure slow SQL logs are turned on to help you identify and address slow SQL queries, and then query the queries to assess their efficiency. If you discover that too many queries are being made, or if you find that the same queries are being made several times during a single execution, you can make adjustments that boost your application's performance by cutting down on database access time.</p><h3 id="3-clean-up-your-filesystem">3. Clean up your filesystem</h3><p>Skim your filesystem for inefficiencies, and make sure the filesystem isn't being used for session storage. Most importantly, keep an eye out for code that can trigger a file stat such as <code>file_exists()</code>, <code>filesize()</code>, or <code>filetime()</code>. Leaving any of these functions in a loop can lead to performance issues.</p><h3 id="4-carefully-monitor-your-apis">4. Carefully monitor your APIs</h3><p>Most web applications that depend upon external resources leverage remote APIs. Although remote APIs are out of your control, there are actions you can take to mitigate problems stemming from API performance. For example, you can <strong>cache API output or make API calls in the background</strong>. Establish reasonable timeouts for API requests and, if possible, be prepared to display output without an API response.</p><h3 id="5-profile-your-php">5. Profile your PHP</h3><p>Using OPcache and managing your external resources should be enough to make most applications run smoothly; however, if you find your needs increasing, it might be time to profile your PHP. A full PHP code profile can be time-consuming, but it can supply you with in-depth information about your application's performance. Thankfully, there are a handful of open source programs for profiling your PHP code such as <a href="https://xdebug.org" target="_blank" rel="nofollow noopener">Xdebug</a>.</p><h2 id="the-importance-of-monitoring-php-performance">The importance of monitoring PHP performance</h2><p>Your web application may be running fine at one minute, but a sudden barrage of traffic can cause your application to crash if you're unprepared. Of course, making changes always requires time, effort and money, and it can be difficult to tell if the investment is worth it. The best way to make informed decisions is to <strong>continually collect data</strong>.</p><p>PHP performance monitoring software like <a href="https://newrelic.com/" target="_blank" rel="nofollow noopener">New Relic</a>, <a href="https://betterstack.com/logtail" target="_blank" rel="nofollow noopener">Logtail</a>, or <a href="https://www.phpservermonitor.org/" target="_blank" rel="nofollow noopener">PHP Server Monitor</a> help you immediately measure the effects of any changes you make. Of course, knowing what to measure is equally important. Speed and memory usage are considered the best indicators of performance because they impact page load times, which are critical to web applications.</p><p>While data collection is important, you should turn off your monitoring system when you don't need it because an influx of logs can slow things down. Of course, such logs give you valuable information about how to improve performance, so you should periodically monitor during peak traffic periods.</p><h2 id="the-future-of-php-performance">The future of PHP performance</h2><p>The future of PHP performance looks promising. With each new version of PHP, the language continues to evolve and improve, making it faster, more efficient, and more secure. The PHP development community is constantly working to optimize the language and make it better suited to modern web development needs.</p><p>In the future, we can expect to see continued improvements in performance, with a focus on making PHP even faster and more efficient. This could be achieved through the use of new technologies, such as Just-In-Time (JIT) compilation, and the implementation of new features and optimizations. Additionally, the PHP development community is also likely to continue to focus on improving the security of the language, to ensure that PHP-powered applications remain safe and secure.</p><p>When building web applications, remember that what works today might not work next year. You may have to make adjustments to maintain consistent PHP performance. Focusing on the big picture during the entire development process is the best strategy for building PHP apps and websites that work for the masses.</p> https://www.keycdn.com/blog/php-performance#comments Microservices vs APIs: What's the Difference https://www.keycdn.com/blog/microservices-vs-apis Thu, 27 Apr 2023 06:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/microservices-vs-apis <img src="https://www.keycdn.com/img/blog/microservices-vs-apis.png" alt="Microservices vs APIs: What's the Difference"><p>Regarding software solutions, the only two solutions that strike first in every individual's mind are Microservices and APIs. These solutions are gaining popularity in the world of software development because of the constantly growing requirement to produce scalable, flexible, and secure applications at quicker turnaround times.</p><p>Customers' demands are changing rapidly, and their expectations from software solutions are to provide them with convenience and simplify their tasks.</p><p>The traditional single-path approach implements a lot of restrictions on the developers. Hence the developers find it challenging to be much innovative in this environment. Moreover, due to cut-throat competition, implementing changes in an application could be tough.</p><p>But if you wish for your application to grow, you must constantly keep adding new, advanced functionality and features that can fulfill the customer's demand. This is where APIs and Microservices architecture come into action.</p><p>But there is great confusion between these two, and they can never be sure which solution would be best for them.</p><p>This article aims to compare API vs Microservices and end all the confusion related to these solutions. We assure you that by the time we conclude this article, you will easily be able to decide which is the best method to develop and deploy your application.</p><p>First, let's understand what these terms mean:</p><h2 id="what-is-an-api">What is an API?</h2><p>An API or Application programming interface is the solution that helps in establishing communication between applications. If we have to speak in a more technical aspect, an API is a group of methods and protocols defining how two applications exchange and modify the data.</p><p>APIs are a crucial part of our modern digital infrastructure as they are responsible for establishing efficient and standardized communication between applications with different construction and function.</p><p>An API is a tool that connects the public with the software's core component, and external developers can reach their hands to a few parts of the application's backend without the requirement to understand the functionality of the app. This is what establishes an API as a programmer's interface.</p><h2 id="usage-of-api">Usage of API</h2><p>If you use any software, whether you know it or not, you are using APIs. This is because API enables integration of the software- they enable software entities that are different to share functions and information.</p><p>Let's understand this by an example:Imagine you are shopping online and want to check out. You notice that the store you are shopping on provides you with the option to complete your payment through PayPal, a payment app, and since your account already exists on this app, you can complete your payment with one click. Convenient, isn't it?</p><p>Since PayPal is a different company from the online store you are shopping on, an API establishes communication between PayPal and the online store. First, the store utilizes PayPal's payment gateway API to request the user's required payment information. Next, PayPal's API discovers the request, validates it, grabs the information from PayPal's user database, and sends it back to the online shopping store. In the final step, the online shopping store uses your card information to make the payment and complete your transaction.</p><p>Thanks to PayPal, your favorite online store can access all the required information necessary to complete the checkout without needing to access PayPal's private data. Also allows you to complete the transaction on the same app without the requirement of navigating the transaction outside the application.</p><p>Exchange of information like the above application happens almost whenever two or more apps are required to work together simultaneously. Some of the other real-world examples include; A travel website that utilizes an airline's API to access prices and flight timings, embedded videos on YouTube, a website utilizing social media's API to allow social login, and different navigation apps that access a public transit system's API to capture real-time data of transportation.</p><h3 id="rest-apis">REST APIs</h3><p>Since an API is becoming more of a concept, programmers can build an API in whatever way they please. However, most programmers rely on Frameworks in order to create those APIs.</p><p>Representational State Transfer, or REST, is one framework that allows the development of APIs, and the API that is developed using the REST framework is called REST API. REST APIs are the most commonly used APIs for microservices and cross-platform integration.</p><p>You can assume REST as an outline or blueprint that could be used to develop APIs to make these APIs secure and efficient. REST APIs work on a model of Feilding HTTP requests and, in return, respond in JSON (<a href="https://www.keycdn.com/support/javascript">JavaScript</a> Object Notation). The standard protocol for proceeding with web-based data transfer is the Hypertext Transfer Protocol <a href="(/blog/difference-between-http-and-https)">HTTP</a>. So, if an individual has some knowledge of HTTP, he can easily learn the process of developing or interacting with a REST API.</p><h3 id="external-vs-internal-apis">External vs Internal APIs</h3><p>The APIs we have discussed have been a specific type of API known as web API. These types of APIs establish communication between two or more web servers. Also, the example we discussed earlier are open APIs, i.e., these APIs are available to be used by anyone, including the developers of third-party software.</p><p>However, it is not necessary for APIs to be available publicly. Instead, APIs are used for establishing communication within the application, and the access is mostly restricted to the organization's authorized developers, and employees only are known as Internal APIs.</p><p>Now that we know about APIs, let's start discussing Microservices.</p><h2 id="what-is-microservice">What is Microservice?</h2><p>A microservice is a type of software architecture that divides the application's different functions into smaller parts called &quot;services&quot;. When the application is developed in this manner, it is said that this application follows microservice architecture.</p><p>For instance, the microservice architecture for a payment application like PayPal could contain individual services for managing the user's account, incorporating online merchants, and authenticating users. Every service functions like its very own micro piece of software in a much larger system.</p><p>Every service that comes under the larger microservices has just a sole task, but it is up to the app's developer to decide the scope of these tasks. For example, a basic software application might rely on certain services, such as PayPal. Or, if we take an example of a big software company, an application might be required to compromise a vast number of granular services with highly particular functions.</p><h3 id="why-should-a-developer-use-microservice-architecture">Why should a developer use Microservice Architecture?</h3><p>To understand the benefits of a Microservice Architecture for a software developer, we must first understand its ancestor, the monolith.A monolith application is totally the opposite of a microservice- instead of providing different tasks to various self-contained services, in a monolith, each and every function of the software application is controlled by a single program.</p><p>It might make sense to most of you to start the application development in this specific way- why should a developer create multiple programs to look after? However, the issues start to arise once the monolith faces problems handling the complexity and capability of constantly growing applications. For example, when the developers try to stuff every aspect of a particular application into a single program, release updates, discover problems, keep a record of changes, and generally try to understand the code, it becomes difficult for a single program to handle all these applications all by itself.</p><p>In simple words, everything is so closely connected in the monolith that it is no less than a challenge to untangle them. This was the reason why the need for a new type of architecture arose, and microservice came into existence. When we compare it to the monolith, the microservice architecture helps in improving:</p><div class="steps"><ol><li><strong>Simplicity:</strong> It is not required for a developer to understand the architecture of the entire system in order to understand just a single aspect of the software.</li><li><strong>Updates:</strong> When a developer has to update a particular service in an application developed through microservice architecture, he is not required to modify the entire system. This advantage saves money, time, and debugging efforts.</li><li><strong>Team Organization:</strong> Microservices distributes responsibilities between the developers. DevOps teams could be assigned with a single or several microservices instead of certain portions of a hazy monolith.</li><li><strong>Robustness:</strong> If one service is broken down, other services do not get affected by its condition.</li><li><strong>Security:</strong> If a particular service is compromised, it would not significantly affect other services.</li><li><strong>Flexibility:</strong> Suppose a team wants to build a service in a specific way (for example, with a different framework or language). In that case, developers don't have to worry about how this action will impact other components.</li></ol></div><p>Overall, by distributing responsibilities, microservices simplify and expedite the process of software development.</p><p>Obviously, a collection of individual modules won't be of much benefit for an application, which is why all these services are linked together with APIs.</p><h2 id="microservices-vs-api">Microservices vs API</h2><p>Let's have a swift review before making the comparison:</p><ul><li><p>An API is a software solution that makes communication between two or more software applications possible. A software application's API defines a group of allowable requests to be made to the API and replies to these requests.</p></li><li><p>A microservice is a framework for developing an application that breaks down the software application's work into modular, self-contained programs. Microservice simply allows the developers to develop and maintain software.</p></li></ul><p>Although they are quite different, API and microservices are often paired together, as services contained in microservices often utilize APIs to communicate within themselves. Similar to how different applications use open public APIs to integrate with other applications, one aspect of a microservice utilizes a private API to access different parts of the same microservice.</p><p>Inside a microservice, every service has its own specific API responsible for determining what request it might receive and how it responds. The principle followed by these APIs is generally the REST principle.</p><p>It's important to understand that no two microservices are similar, and all use the API with different approaches. Some may assign multiple APIs to a single service or may utilize a single API to access multiple services.</p><p>One must also remember that APIs have usage beyond the microservices. For example, as we had already discussed, web API helps enable data-sharing between systems, which is crucial for many web applications. Also, APIs might be used internally but without any microservices implementation.</p><h2 id="similarities-and-differences">Similarities and differences</h2><p>Now that we have discussed API vs Microservices and their uses, components, and benefits, it's time for their face-off.</p><h3 id="similarities">Similarities</h3><p>First, let's take a look at the similarities between the two:</p><ul><li>Both APIs and Microservice are used in the development of softwares to accelerate testing, development, and execution without compromising on quality.</li><li>They both support cloud-based applications.</li><li>APIs and Microservices offer the ability to develop applications, functions, and modules swiftly.</li><li>Both can reduce software development costs by minimizing complexity, errors, and risks.</li><li>As they both have a distributed nature, API and Microservices provide security. Even when a single service is compromised, other services won't be affected.</li></ul><h3 id="differences">Differences</h3><p>Microservices are the stepping stone of an application, but API is the glue that keeps all the components of microservice-based applications together. So let's compare microservices vs API on different bases.</p><ul><li>Microservice architecture is a model of software development which divides an application into micro parts of services. Whereas APIs are interfaces or intermediaries between two applications that require establishing a communication. It consists of features that help consumers to utilize an application's underlying services.</li><li>The components of microservices could be compared to bricks that help build an application. On the other hand, APIs are &quot;functional blocks&quot; responsible for performing different tasks.</li><li>The components of a microservice include APIs, a <a href="https://en.wikipedia.org/wiki/Data_access_layer" target="_blank" rel="nofollow noopener">data access layer</a>, business logic, and a database. At the same time, an API contains the format, protocol, functions and procedures, and tools.</li><li>There are two types of microservices: Staefull microservices and stateless microservices. Meanwhile, APIs could be private, public, database, partner, remote, SOAP, REST, etc.</li></ul><h3 id="conclusion">Conclusion</h3><p>APIs and Microservices are utilized in software development; both offer an organization many benefits, such as flexibility, security, agility, and scalability, while producing high-quality software.</p><p>However, many individuals confuse the two as microservices services often use APIs as their communication tool. This is the reason why the battle of API vs Microservices started.</p><p>The architecture of Microservices is a software development model where the functions of an application are broken down into micro functions, each with its own data and dependencies. While APIs act as an intermediate that helps two applications in communicating.</p><p>It would be much more beneficial for an organization to use both of them together instead of comparing them. Working together can help increase the effectiveness of a microservice model while enhancing the <a href="https://www.keycdn.com/blog/web-application-security-best-practices">application's security</a>, scalability, compliance needs, and cost reduction.</p> https://www.keycdn.com/blog/microservices-vs-apis#comments Website Security Check: How to Secure Your Website https://www.keycdn.com/blog/website-security-check Thu, 23 Mar 2023 06:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/website-security-check <img src="https://www.keycdn.com/img/blog/website-security-check.png" alt="Website Security Check: How to Secure Your Website"><p>More and more website owners and businesses are affected by devastating security breaches. The tide of web attacks, and thus compromised data, continues to rise. Worldwide, <a href="https://threatmap.checkpoint.com/" target="_blank" rel="nofollow noopener">up to 120 million cyber attacks are currently recorded every day</a>. Thus, the issue of security is increasingly becoming a major concern for website owners and web developers.</p><p>Whether you are an owner of a huge multinational online store or just run a small personal blog, there is always a threat of getting hacked. Some attackers will try to deface your website and inject malware into it, steal your or your customer's data, and delete important content from your server.</p><p>This article contains some practical tips to eliminate malwares from which attackers take advantage. But, first, let's look at the importance of website security.</p><h2 id="why-a-website-security-check-is-so-important">Why a website security check is so important</h2><p>In 2019, it was found that <a href="https://sucuri.net/reports/2019-hacked-website-report/" target="_blank" rel="nofollow noopener">over 60% of websites</a> were vulnerable at the time of infection. This represents a 4% increase over 2018, with many attacks occurring mostly due to outdated software, indicating that most website owners either lack knowledge or care too little about the security of their websites.</p><p>You may think that the attackers won't target your website because it is of a small size, and no one would get much out of it. Or maybe security has never been your concern, and the threat figures don't bother you much.</p><p>But what might be the effect of the unwanted intrusion on your website? Unfortunately, it's not just some tiny irritation that could be quickly resolved by changing your password:</p><ul><li>Your website might be implemented with code injections that can cause visitors to get infected by malware, which could be very hard to find and remove.</li><li>Your crucial pages might be blanked, defaced, or stuffed with illegal website links.</li><li>It may result in deleting important content like pages and blog posts.</li><li>Sensitive information such as credit card or login information that belongs to you, your customers, or your site visitors may be illegally accessed and sold online.</li><li>Attacks could spread to other crucial websites linked to your server.</li><li>Suppose Google can detect any kind of malware on your website. In that case, it will immediately block the access and eliminate it from the search results, wasting all your SEO (Search Engine Optimization) efforts.</li><li>The username and password of the admin's account can be changed, preventing you from accessing your website.</li></ul><p>Hacked websites could cause a lot of damage, especially if you are an owner of an ecommerce store.</p><p>You might think that your website could not be the target of the attackers as your website does not matter much; you must know that not all attacks are targeted. For example, quite a several WordPress attacks are automated– a bot checks if your website is vulnerable to attacks and initiates an attack without the involvement of a human being.</p><p>That is the reason which makes it necessary for every website owner requires to take a few steps to secure their website in any condition.</p><h2 id="what-are-the-vulnerabilities-of-wordpress">What are the vulnerabilities of WordPress?</h2><p>Hacking is vast, but which are the most common vulnerabilities hackers take advantage of to break into your website?</p><p>You might think that getting inside a website is a process full of challenges and requires weeks of hard work and a great amount of knowledge about coding, computers, servers, etc. This might be true when targeted hacking attempts to crack the defenses of a huge, well-safeguarded website, but when the attack is upon a small WordPress domain, this becomes quite different.</p><p>Most attacks on WordPress succeed as the websites' owners use passwords that are easy to guess and do not update their plugins and themes. Hackers break mostly into such sites with the use of automated programs.</p><p>Password cracking is possibly the easiest way to hack a website, and this method is so common because it has a high success rate. Most site owners set their WordPress login on the default admin, who takes out half of the guesswork, and after they utilize a simple, easy-to-guess password.</p><p>If this method fails, attackers will try to leverage common vulnerabilities in outdated versions of WordPress or common plugins. This is why it is suggested to keep everything up to date.</p><p>A huge list of complex, complicated ways to break into a website exists. Still, most WordPress attackers utilize the low-hanging fruit of a not-so-secure password and outdated software, making it very easy to access the website's backend.</p><h2 id="website-security-check-this-is-how-it-works">Website security check: This is how it works</h2><p>The first step an individual must take to secure his website is determining which condition your website is already in. Are there any visible vulnerabilities in the backend of your website that you require to treat immediately, or any simple fixes you can make at the moment?</p><h3 id="1-secure-accounts-and-passwords">1. Secure accounts and passwords</h3><p>If your main account has a weak password, it makes the website easy to break into with the help of brute-forcing programs, giving the attacker's administrator access, and the attackers can make any change they want.</p><p>While a complex password can be challenging to remember, making the login process a bit inconvenient, it can be much more problematic to recover your website once it has been hacked. Hence it is recommended to use a strong password, even if you are required to keep it written down somewhere.</p><p>A secure password does not contain personal (and therefore guessable) information such as birth dates or names of family members. Instead, a password should consist of a long sequence of random characters. Excellent free password managers like <a href="https://keepass.info/" target="_blank" rel="nofollow noopener">KeePass</a> or <a href="https://www.dashlane.com/" target="_blank" rel="nofollow noopener">Dashline</a> can help you create a strong password. If you feel that your passwords have been too simple so far, now is exactly the right moment to adjust them!</p><h3 id="2-ensure-everything-is-up-to-date">2. Ensure everything is Up To Date</h3><p>As we already discussed, not up-to-date software is by far the most common reason for WordPress infections. Therefore, if there is anything that you can do to safeguard your website, it should be to keep your website up to date.</p><p>The most straightforward way to check the status of every software running on your website is to go to <em>Dashboard&gt; Updates</em>, which will inform you if your theme, core, or plugins are up to date.</p><p>WordPress performs automatic updates since the 5.5 version; everything should be up to date unless you are using anything inferior to the WordPress 5.5 version.</p><h3 id="3-scanning-with-wordpress-plugin">3. Scanning with WordPress Plugin</h3><p>We will discuss online scanners that work well later. However, it is even better to install a plugin as it can dig deep into the roots of your website code and fish out the vulnerabilities or malware that are hard to detect.</p><p>Install the plugin of your choice, and once the installation is done, it will most probably give you instructions to run a scan immediately. The advantage of these plugins is that they can eliminate malware and automate changes.</p><p>A very popular security plugin is <a href="https://wordpress.org/plugins/wordfence/" target="_blank" rel="nofollow noopener">Wordfence Security</a>: a free and easy-to-use WordPress security plugin that includes a malware scanner and an endpoint firewall (WAF).</p><h3 id="4-look-for-uncommon-changes">4. Look for uncommon changes</h3><p>Identifying the source may be challenging if you are under suspicion or are aware of your website being infected with malware. Here are a few changes that don't have an explanation that you may notice on your website, as well as the files that attract hackers the most.</p><ul><li>Sudden links to suspicious websites which were never added by you personally.</li><li>New pages or articles not created by you, or the content of the current pages changing suddenly.</li><li>Changes to settings that you did not make.</li><li>Addition of a new user, especially of an individual with privileges of high-level, who you never added.</li><li>Plugins or themes that you did not install.</li><li>Malware can infect your files with malicious codes. Check theme and plugin files, WordPress core files not located in the correct directory,wp-config.php, the wp-content/uploads folder, and .htaccess. You should always back up your website and must fully understand the code before you make any sensitive changes.</li></ul><p>You can sort unwanted code by recently modified files if you get connected to your website with FTP.</p><p>If your website is infected with malware periodically, and you cannot detect any cause in the files, the issue might be of your server or some other website present on your server.</p><h3 id="5-check-your-ssl-software">5. Check your SSL software</h3><p>If your SSL certificate is not up to date, you will usually know it immediately; browsers like Google Chrome would block access to your website with a humongous expired certificate warning. However, if you are unsure or are already facing this error, you must check your SSL certificate to check if it is up to date and whether or not you are using the current version of SSL/TLS.</p><p>When you visit a website, you will notice a lock icon in the address bar in almost every browser. If your certificate has expired, this lock may become red or will have a slash through it.</p><h3 id="6-utilization-of-an-online-tool">6. Utilization of an online tool</h3><p>A simple and quick way to check if your website contains malware and is vulnerable to web attacks. Tools like <a href="https://www.intruder.io/" target="_blank" rel="nofollow noopener">Intruder</a> or the <a href="https://sitecheck.sucuri.net/" target="_blank" rel="nofollow noopener">Sucuri SiteCheck scanner</a> remotely scan your website and check it for common problems. These tools are convenient because they don't require any plugins or software and only take a few seconds.</p><p>However, keep in mind that such online tools are not a panacea regarding your website's security needs. Use them mainly as a supplement to your existing security measures.</p><h2 id="visible-vulnerabilities">Visible Vulnerabilities</h2><p>Most WordPress sites are filled with small vectors for attacks that might not seem harmful but can share much more information than you want.</p><p>If you have a visible WordPress version on your front end, it indicates to the hackers exactly what your website's vulnerabilities are; especially if you are not using the latest version of WordPress, you must hide this information.</p><p>You will see file editor under <em>Appearance&gt; Theme Editor&gt;</em> and <em>Plugins&gt; Plugin Editor</em> in the backend of your website.</p><h2 id="tips-to-secure-your-website">Tips to secure your website</h2><p>If your website is infected with malware, a good security plugin should be enough to remove it. We have some quick tips which you can use in order to secure your website and prevent your website from getting infected. Most of these tips could be applied in minutes. Hence they are easy to set up even if you are unfamiliar with web security and WordPress.</p><h3 id="secure-hosting-as-a-top-priority">Secure hosting as a top priority</h3><p>When hackers try to make a way to your website, they mostly turn to the server to look for advantages. Unfortunately, there are many cheap hosting available in the market which generally don't invest much into security.</p><p>Shared ghosting can be most prone to infections. If one website on the server is infected with malware, it will most likely spread to other websites sharing the server. Hence, if you did everything right, a shared server might make your website prone to infections by malware.</p><p>Hence, one should be very conscious that choosing a host as an unsecured host is one of the biggest reasons websites get infected by malware and other web-related issues.</p><h3 id="backup-everyday">Backup Everyday</h3><p>Backup does not protect your website from hackers trying to get in; backing up is like insurance; if anything happens to your website, you will at least have your data and won't require starting everything from scratch.</p><p>There are plugins available that can help in backing up the data. However, choosing a service that backs up daily is recommended to eliminate the risk of data loss.</p><h3 id="two-step-authentication">Two-step authentication</h3><p>Two-step authentication adds an extra layer of security to your website. Apart from username and password, anyone trying to log in will also require another piece of information: a one-of-type additional code.</p><p>It could be a numerical code sent to your phone, or it may require email verification or a piece of information you only know.</p><p>To implement a two-step verification, you must apply a plugin to your WordPress, as there is no built-in function in WordPress to activate this functionality.</p><h3 id="use-a-web-application-firewall">Use a Web Application Firewall</h3><p>A WAF or <a href="https://www.keycdn.com/support/web-application-firewall">Web Application Firewall</a> uses rigid rules to filter the inflowing traffic, blocklisting IPs that are suspected to be associated with hacking DDoS attacks. As a result, it prevents several attacks even before they can reach the server.</p><p>While you can apply WAFs at your server's level, it is simpler to buy a cloud-based service available on many cloud-based service providers.</p><h2 id="conclusion">Conclusion</h2><p>Website security is not a simple task; if you haven't already, it's time to make it your priority now. Getting hacked is not joyful for anyone; it's not just about joy– a website with weak security may end up with damaged SEO, sensitive data loss, loss of user trust, and malware that keeps on returning.</p><p>You don't require an expert developer to make your website secure. Instead, it is just a matter of a few extra steps. The first step towards a secure website is to conduct a proper website security check. Even something as simple as setting up a strong password or switching to a host who provides better security could make a major difference.</p><p>Hence, start by taking some small steps, and you won't even realize what security you have managed to build just by those small steps.</p> https://www.keycdn.com/blog/website-security-check#comments Web Development Trends in 2023 https://www.keycdn.com/blog/web-development-trends Thu, 23 Feb 2023 06:00:00 +0000 Martin Williams https://www.keycdn.com/blog/web-development-trends <img src="https://www.keycdn.com/img/blog/web-development-trends.png" alt="Web Development Trends in 2023"><p>Smart developers are always looking ahead for ways to adapt to the ever-changing world of web development. No one could have imagined what the web would look like today 20 years ago, so who knows what the coming decades will hold. As trends emerge, new opportunities will arise. Staying on top of the latest web development trends could eventually help you land a job that doesn't exist yet. Here is a roundup of frontend web development trends to keep an eye on in 2023.</p><h2 id="1-progressive-web-apps">1. Progressive web apps</h2><p>Being responsive is no longer enough; today's websites need to be progressive. <a href="https://www.keycdn.com/blog/progressive-web-apps">Progressive web apps</a> (PWA) are web applications that look and feel like native mobile apps but can be accessed through a web browser. PWAs are designed to work offline, be fast, and provide a seamless user experience across different devices. They thus adapt to the user's browser, screen size, and device specifications. PWAs are becoming increasingly popular among businesses and developers, as they offer many of the benefits of native mobile apps without needing a separate app store.</p><figure><img src="https://www.keycdn.com/img/blog/progressive-web-app.png" alt="progressive web app"><figcaption class="figure-caption">Source: <a href="https://web.dev/what-are-pwas/" target="_blank" rel="nofollow noopener" class="text-muted">web.dev</a></figcaption></figure><h2 id="2-artificial-intelligence-and-machine-learning">2. Artificial intelligence and machine learning</h2><p>Artificial intelligence (AI) and machine learning (ML) are becoming more prevalent in web development, with many companies and developers looking to integrate these technologies into their websites and web applications. By leveraging AI and ML, businesses can provide personalized experiences for their users, improve search functionality, and automate tasks. This can help increase user engagement and ultimately drive more conversions.</p><h2 id="3-single-page-applications-spa">3. Single-page applications (SPA)</h2><p><a href="https://www.keycdn.com/blog/single-page-application">Single-page applications</a> (SPA) are web applications that load a single HTML page and update the content dynamically as the user interacts with the app. SPAs are becoming increasingly popular as they provide a fast and responsive user experience similar to a native mobile app. They are typically built with JavaScript frameworks such as Vue.js, <a href="https://www.keycdn.com/support/angular-vs-react">Angular and React</a>, making creating complex and interactive user interfaces easy.</p><h2 id="4-dark-mode-standardization">4. Dark mode standardization</h2><p>The dark mode is a feature that inverts the colors of a website or web application, making the background dark and the text light to reduce eye strain and improve readability in low-light environments. Providing a dark mode option can help to improve customer satisfaction and loyalty.Another use of dark mode standardization is energy savings. When a device displays a dark interface, the screen uses less power, which can help to extend battery life. This is especially beneficial for mobile devices and laptops, as users can save battery power and use their devices for longer periods.</p><figure><img src="https://www.keycdn.com/img/blog/dark-mode.png" alt="dark mode"></figure><p>Developers can easily implement dark mode in their websites and web applications by using CSS media queries, JavaScript, and the new prefers-color-scheme media feature. As the trend continues to grow, it will become an increasingly popular option for businesses and developers looking to build and deploy web applications.</p><h2 id="5-chatbots-and-virtual-assistants">5. Chatbots and virtual assistants</h2><p>Chatbots and virtual assistants are becoming more common on websites and web applications as they provide an efficient and convenient way for users to interact with a business. These technologies can answer questions, provide customer support, or even complete transactions. By integrating chatbots and virtual assistants into their websites and web applications, businesses can improve customer service and automate repetitive tasks.</p><h2 id="6-webassembly">6. WebAssembly</h2><figure><img src="https://www.keycdn.com/img/blog/webassembly.png" alt="webassembly"></figure><p><a href="https://www.keycdn.com/support/webassembly">WebAssembly</a> (often abbreviated as wasm) is a binary instruction format for a stack-based virtual machine, designed as a portable target for the compilation of high-level languages like C, C++, and Rust. The goal of WebAssembly is to execute at native speeds by taking advantage of common hardware features available on a variety of platforms.</p><h2 id="7-javascript-frameworks">7. JavaScript frameworks</h2><p><a href="https://www.keycdn.com/support/javascript">JavaScript</a> frameworks like React, Angular, and Vue.js remain popular among developers, as they provide a powerful set of tools for building complex and interactive web applications. These frameworks make it easy to create reusable components, manage application states, and handle routing and navigation. As a result, they are often used to build single-page applications (SPAs) and other dynamic web applications.</p><h2 id="8-responsive-design">8. Responsive design</h2><p>Responsive design is a design trend that involves creating web pages that automatically adapt to the size and resolution of the user's device. This is achieved using flexible grid layouts, images, and other elements that scale and adjust depending on the device. Responsive design is important for businesses, as it helps to ensure that their websites and web applications are accessible and user-friendly across a wide range of devices.</p><h2 id="9-cloud-based-development-and-deployment">9. Cloud-based development and deployment</h2><p>One of the main advantages of cloud-based development and deployment is scalability. With cloud-based infrastructure, organizations can easily scale their web applications to handle increased traffic or demand without the need for expensive hardware upgrades. Another benefit is cost savings associated with server and data center setup and maintenance.</p><p>Cloud-based development and deployment also enable collaboration and productivity. Developers can easily share and access code and other resources regardless of their location. There are several popular cloud-based platforms for web development and deployment, such as <a href="https://m.do.co/c/eb1e6a3d8243" target="_blank" rel="nofollow noopener">DigitalOcean</a>, <a href="https://aws.amazon.com" target="_blank" rel="nofollow noopener">AWS</a>, <a href="https://azure.microsoft.com" target="_blank" rel="nofollow noopener">Azure</a>, and <a href="https://cloud.google.com" target="_blank" rel="nofollow noopener">Google Cloud Platform</a>. Each of these platforms offers a wide range of services and tools for web application development and deployment, including storage, databases, and serverless computing.</p><h2 id="10-serverless-architecture">10. Serverless architecture</h2><p>Following the cloud-based development and deployment trend described above, we come to the serverless architecture trend. The term &quot;serverless&quot; refers to the fact that the infrastructure and servers required to run a web application are managed by a third-party provider rather than being maintained by the business or developer.</p><p>The main benefits of serverless architecture are cost savings and scalability. Because a third-party provider manages the infrastructure and servers, businesses and developers don't have to worry about the costs associated with setting up and maintaining their own servers. Furthermore, with serverless infrastructure, web applications can automatically scale to handle increased traffic or demand without needing expensive hardware upgrades. This can help to ensure that the website or web application remains available and responsive, even during periods of high traffic. Additionally, serverless architecture allows easy integration with other services and tools, such as databases and storage, which can speed up the development process.</p><h2 id="11-growing-cybersecurity-concerns">11. Growing cybersecurity concerns</h2><p>Cybercrime is at an all-time high thanks to the growing number of opportunities for hackers to exploit. Asking users to log in to your website via their Facebook account or other social media credentials is no longer recommended. Consumers are thinking harder about who they share their information with, so don't ask for data that you don't need. If you have a large database of user information stored on your servers, consider introducing multi-factor identification.</p><h2 id="12-optimized-voice-search">12. Optimized voice search</h2><p>Optimized voice search is a web development trend that is becoming increasingly important as more and more people use voice assistants and smart speakers to search for information online. Voice search optimization involves ensuring that a website or web application is easily discoverable and accessible by voice assistants and other voice-controlled devices.</p><figure><img src="https://www.keycdn.com/img/blog/voice-search-optimization.png" alt="voice search optimization"></figure><p>One of the main benefits of optimized voice search is improved <a href="https://www.keycdn.com/blog/ui-vs-ux">user experience</a>. By making sure that a website or web application is easily discoverable and accessible by voice-controlled devices, businesses can ensure that their customers can find the information they need easily and quickly. Another benefit of optimized voice search is increased traffic and conversions. Businesses that have optimized their websites and web applications for voice search will be more likely to appear in search results, which can lead to increased traffic and conversions.</p><h2 id="13-ambient-design">13. Ambient design</h2><p>People spend more time staring at screens than ever before, so developers are finding creative ways to keep their designs fresh. For example, masOS Mojave comes with desktop backgrounds that change based on the time of day, and some weather apps change their UI based on the weather. Except to see such ambient design elements increase in popularity.</p><h2 id="14-wordpress-development">14. WordPress development</h2><figure><img src="https://www.keycdn.com/img/blog/wordpress-banner.png" alt="wordpress banner"></figure><p><a href="https://wordpress.org/" target="_blank" rel="nofollow noopener">WordPress</a> turns 20 this year and will surely celebrate that it is now used by over 43% of all websites worldwide. WordPress is a content management system (CMS) used to build and manage websites and web applications. It is an open-source platform that is free to use and offers a wide range of features and capabilities. WordPress is designed to be intuitive and user-friendly, making it easy for businesses and developers to create and manage their websites and web applications.</p><p>Additionally, WordPress has a large and active community of developers who contribute to its development and maintenance, which means that new features and updates are being released regularly.It also offers a wide range of plugins and themes that can add new features and functionality to a website or web application. This makes it possible to create a unique, customized website that meets the specific needs of a business or organization.</p><p>The WordPress community is working on improving the speed and performance of the platform, as well as integrating new features like Progressive Web App (PWA) and Artificial Intelligence. Additionally, there is a trend of using WordPress as a headless CMS, which means that the front end of the website is built using modern web technologies like React, Vue, Angular, etc. This allows developers to create a website with optimal performance and user experience.</p><h2 id="summary">Summary</h2><p>Web development trends in 2023 include an emphasis on responsive design, serverless architecture, optimized voice search, dark mode standardization, and increased focus on cybersecurity. Additionally, WordPress development is expected to continue to evolve and gain popularity as an open-source, user-friendly, and versatile platform for website building and management. Progressive Web App (PWA), Artificial Intelligence, and headless CMS are other trends that are expected to grow in popularity in 2023. All these trends are expected to improve the user experience, performance, and accessibility of websites and web applications, making them more efficient, engaging, and secure.</p> https://www.keycdn.com/blog/web-development-trends#comments KeyCDN Launches New POPs in 2023 https://www.keycdn.com/blog/pops-in-2023 Thu, 26 Jan 2023 06:00:00 +0000 Ben Eaton https://www.keycdn.com/blog/pops-in-2023 <img src="https://www.keycdn.com/img/blog/pops-in-2023.png" alt="KeyCDN Launches New POPs in 2023"><p>We're excited about the newly launched points of presence (POPs) in 2023! The year is not yet a month old, and we have already launched <strong>4 new points of presence on two different continents</strong>, and more will follow this year! Namely, Copenhagen, Dublin, Lisbon, and Lima have been added. Our mission is to continuously improve web performance, and each POP contributes to it. The new POPs are in production and have been automatically added to all existing Zones.</p><h2 id="copenhagen-denmark">Copenhagen - Denmark</h2><p>Three other KeyCDN POP sites previously surrounded Copenhagen. With a dedicated POP, latency for visitors is reduced even further, resulting in better loading times.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-copenhagen.png" alt="copenhagen pop location"></figure><h2 id="dublin-ireland">Dublin - Ireland</h2><p>With the introduction of a POP in Ireland, requests no longer need to be forwarded to the POP in London. The total population of Ireland as of January 2022 was 5 million, with approximately 2 million residents in the greater Dublin area. This makes Dublin the ideal location for an edge server.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-dublin.png" alt="dublin pop location"></figure><h2 id="lisbon-portugal">Lisbon - Portugal</h2><p>The POP in Lisbon brings better performance to Portugal, with a population of over 10 million people.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-lisbon.png" alt="lisbon pop location"></figure><h2 id="lima-peru">Lima - Peru</h2><p>Lima is our 6th POP in Latin America. The total population of Peru in 2022 was about 33.5 million. Lima, with over 11 million inhabitants, is home to about one-third of all people living in Peru.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-lima.png" alt="lima pop location"></figure><p>According to the Speedtest Global Index, Peru has an average internet connection speed of just over <a href="https://www.speedtest.net/global-index" target="_blank" rel="nofollow noopener">67.5</a> Mbps. The connection speed has room to grow compared to other countries in the region.</p><h2 id="how-to-check-a-pop-location">How to check a POP location</h2><p>Each edge server adds the HTTP response header <code>X-Edge-Location</code> delivered by KeyCDN. For example, the POP in Lisbon uses <code>ptli</code>. The first two letters stand for the country <a href="https://en.wikipedia.org/wiki/Top-level_domain" target="_blank" rel="nofollow noopener">TLD</a>, while the 3rd and 4th letters are for the city. You can quickly check the response headers using <a href="https://www.keycdn.com/blog/chrome-devtools">Chrome DevTools</a> or a simple curl command like the one below:</p><pre><code class="language-none">curl -I https://www.keycdn.com/img/example.jpgHTTP/2 200server: keycdn-enginedate: Fri, 20 Jan 2023 09:05:47 GMTcontent-type: image/jpegcontent-length: 195025last-modified: Thu, 16 Jul 2022 07:06:27 GMTvary: Accept-Encodingetag: &quot;5f0ffc73-2f9d1&quot;expires: Fri, 20 Jan 2023 09:05:47 GMTcache-control: max-age=604800x-cache: HITx-edge-location: ptli</code></pre><h2 id="check-the-status-of-a-pop">Check the status of a POP</h2><p>Uptime and low latency are very important to us, and we ensure that your content is always properly delivered from the nearest POP. If you are experiencing any issues with any point of presence, check our <a href="https://status.keycdn.com">status page</a> to verify if we are performing any scheduled maintenance or open a <a href="https://www.keycdn.com/support">support request</a> with us.</p><figure><img src="https://www.keycdn.com/img/blog/keycdn-status.png" alt="pop status"></figure><h2 id="what-s-next">What's next?</h2><p>We have more sites planned for this year. More POPs in <strong>Asia</strong> will follow and further improve performance! If you want to see a POP in another location or a new feature, please let us know and stay tuned for more exciting announcements.</p><p>Happy content delivery everyone!</p> https://www.keycdn.com/blog/pops-in-2023#comments Why is Wordpress Slow? https://www.keycdn.com/blog/wordpress-slow Thu, 08 Dec 2022 08:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/wordpress-slow <img src="https://www.keycdn.com/img/blog/wordpress-slow.png" alt="Why is Wordpress Slow?"><p>It is challenging to figure out why WordPress is slow. A WordPress website comprises many parts, including web servers and their settings, different plugins, and themes. Unoptimized content could also be one of the reasons why your WordPress website is not performing as per your expectations.</p><p>But what steps could we take to determine the cause of the problem? Unfortunately, it is a bit difficult to point out the problem directly– there are many possibilities that we will explore in this article.</p><p>But this article won't just help you figure out why your WordPress website is not fast enough. We will also discuss how you can speed up your slow WordPress site.</p><h2 id="why-is-wordpress-slow">Why is WordPress slow?</h2><p>Few web developers completely dismiss WordPress, claiming it is too slow. While this was the case in the past, this won't be an accurate statement for the present WordPress. Quite a number of brands prefer WordPress to maintain their website.</p><p>But if you have not optimized your WordPress properly, your WordPress will definitely be slower than your expectations. Many factors affect the speed of your WordPress website; some of them are:</p><ul><li>Your web host</li><li>Server-side optimizations (PHP version, compression, caching, etc.)</li><li>Unoptimized content (generally images)</li><li>Slow WordPress themes</li><li>Sluggish WordPress plugins</li><li>A huge number of HTTP requests from external sources</li><li>Not utilizing a specifically dedicated resource to serve content (video hosting, CDN, etc.)</li></ul><p>One of the most important factors that affect your speed is the server optimization implemented by your web host. Apart from that, several other factors should be taken care of to ensure that the website is fast. These factors will be discussed later in the article, but first, let's discuss why your website is not fast enough.</p><h2 id="steps-to-determine-if-your-wordpress-website-is-slow">Steps to determine if your WordPress website is slow</h2><p>Keeping in mind that too many factors can impact a WordPress website's performance, we need to analyze all of them to determine if the problem is associated with the hosting provider. So let's discuss the process one step at a time.</p><h3 id="page-loading-speed-test">Page loading speed test</h3><p>Before conducting any further tests, a website owner must determine at what speed his website loads. If any website page takes more than two seconds to load, it is bad for the user experience. Ideally, a website should not take any more than a second to load. However, a site loading within two seconds is also acceptable.</p><p>Several <a href="https://www.keycdn.com/blog/website-speed-test-tools">website speed testing tools</a> available could be used for this purpose. KeyCDN Website Speed Test, GTmetrix, Google PageSpeed Insights, WebPageTest, and Pingdom Tools are some great choices.</p><p>We test the home page of a WordPress website using the <a href="https://tools.keycdn.com/speed">Website Speed Test</a>. KeyCDN's speed test tool allows you to test your site's speed from multiple locations. Select a server location closest to you and your visitors for better results.</p><p>Copy the URL of the webpage you want to test and place it in the search bar provided by the Website Speed Test tool to test its speed.</p><figure><img src="https://www.keycdn.com/img/blog/speed-test-example-1.png" alt="speed test example 1"></figure><p>After completing the test, you will get a simple overview of all the critical issues that impact your website's performance the most.</p><figure><img src="https://www.keycdn.com/img/blog/speed-test-example-2.png" alt="speed test example 2"></figure><p>The test includes a waterfall breakdown and a visual website preview at the bottom. You can quickly see how many HTTP requests were made, the full size of the page requested, and the load time.</p><figure><img src="https://www.keycdn.com/img/blog/speed-test-example-3.png" alt="speed test example 3"></figure><p>You can also access more insights through the reports Structure and Waterfalls tabs.</p><h3 id="do-your-images-need-optimization">Do your images need optimization?</h3><p>High-quality images can have enormous file sizes. Adding a few images to a page is enough to slow down your load time. There are several ways to determine if this problem is affecting your website. Again, the quickest way is to use a free tool like <a href="https://tools.keycdn.com/speed">Website Speed Test</a>. This will also analyze whether your website is using properly optimized images. If you expand the tab, it will also list any images that are not optimized, as well as suggestions on how to optimize your images.</p><figure><img src="https://www.keycdn.com/img/blog/speed-test-example-4.png" alt="speed test example 4"></figure><p>44% of the average bytes per page, whether on desktop or mobile, are solely made up of images. In our in-house <a href="https://www.keycdn.com/blog/web-performance-advice">deep dive study</a>, we found that 46% of the experts said that the number one priority should be image optimization.</p><p>In fact, image compression is one of the fastest ways to increase your pages' speed and minimize your pages' overall size.</p><p>There are two different types of image compression: lossy and lossless. While choosing high compression, you also want to ensure that you maintain the quality of your images.</p><p>With a powerful WordPress plugin like <a href="https://wordpress.org/plugins/optimus/" target="_blank" rel="noopener">Optimus</a>, a combination of both methods is used, preserving the visible quality of the images. WebP conversion is supported with a <a href="https://optimus.io" target="_blank" rel="noopener">paid license</a>. Optimus allows images to be optimized and then stored, which is helpful if you want to store optimized images instead of using a real-time image processing service.</p><p>Depending on the image and format, reductions in the size of up to 70% are possible. Optimus can be installed on any WordPress website.</p><h3 id="test-your-website-s-plugins-and-themes">Test your website's plugins and themes</h3><p>The themes and plugins you utilize on your website are huge factors that impact your website's loading time. For example, a few themes have better optimization than others, while some plugins may add a huge number of scripts to your site.</p><p>To analyze if these elements are the reason why your website is slow, you are required to do the following:</p><ul><li>Create a staging copy of your website.</li><li>Switch your theme to another similar option and run the tests mentioned in the 1st step.</li><li>Disable all your plugins individually and re-run the tests mentioned in the first step.</li></ul><p>This process can consume a lot of your time if you have implemented a lot of plugins on your website. However, no matter how much time it consumes, it is important to rule everything out.</p><p>If the themes or plugins utilized on your website are found to be the culprit, it is recommended to look for replacements. However, if your themes and plugins are not guilty, it is time to start looking for a new web hosting provider.</p><h2 id="ways-to-fix-your-slow-website">Ways to fix your slow website</h2><p>Half the battle is won once you have figured out the problem; taking action according to those details is where you will be able to see the results. Once you are done with testing, the following are the areas which you can work upon to speed up your website:</p><h3 id="update-your-website">Update your website</h3><p>One of the essential aspects of maintaining your WordPress website is to keep the website updated. This may be one of the most obvious things, but it's worth reminding you repeatedly.</p><p>The updates of WordPress also include security patches, performance fixes, and the latest features.</p><p>You can enable automatic updates for your website in its <code>wp-config.php</code> file. Updating your WordPress to the latest version is always recommended, so your website remains secure.</p><p>Also, all your themes and plugins should be updated regularly, which ensures that your website does not face any issues with the loading speed.</p><h3 id="use-plugins-cautiously">Use plugins cautiously</h3><p>Plugins are the heartbeat of WordPress and its community. However, unoptimized WordPress plugins can drastically drag down your website's performance. This increases your website's load time.</p><p>You can install WordPress plugins that can help in enhancing the performance of your website. But before installing any plugin, you must ensure that the plugin is well-coded and properly optimized for performance.</p><h3 id="choose-a-fast-wordpress-theme">Choose a fast WordPress theme</h3><p>Selecting a fast WordPress theme for your website is very crucial for user experience and website performance. A theme's features, like its navigation menus, color palette, layout, fonts, and image placement, are some of the website's features first noticed by a visitor.</p><p>If these features are not optimized properly, you might have a mesmerizing site, but its speed won't be mesmerizing enough.</p><p>In order to get a well-optimized theme, make a list of features you want to be present on your website. Then do proper research and note down themes that fit your requirement. Be careful when purchasing themes on popular marketplaces such as <a href="https://themeforest.net/" target="_blank" rel="nofollow noopener">ThemeForest</a>. While there are a lot of great themes on there, you also need to realize that developers sometimes just keep adding features to generate more sales. The <a href="https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019" target="_blank" rel="nofollow noopener">Total WordPress theme</a> from the devs over at WPExplorer is an excellent example of a multi-purpose theme that still considers performance. Even many of their demos, packed full of content, load under 800 ms.</p><p>Always look for trustworthy developers with excellent customer support and high ratings. Avoid themes that do not provide frequent updates.</p><p>We have pre-screened for you from the jungle of themes. With the themes listed below, you certainly can't go far wrong:</p><ol><li><a href="https://themeisle.com/themes/neve/" target="_blank" rel="nofollow noopener">Neve</a></li><li><a href="https://oceanwp.org/" target="_blank" rel="nofollow noopener">OceanWP</a></li><li><a href="https://generatepress.com/" target="_blank" rel="nofollow noopener">GeneratePress</a></li><li><a href="https://wpastra.com/" target="_blank" rel="nofollow noopener">Astra</a></li><li><a href="https://pcm.wordpress.org/themes/customify/" target="_blank" rel="nofollow noopener">Customify</a></li></ol><p>Each of the listed themes is actively updated and well supported. They all have a free version but offer an update to a premium version.</p><h3 id="configure-cache-to-optimize-your-website">Configure cache to optimize your website</h3><p><a href="https://www.keycdn.com/support/cache-definition-explanation">Caching</a> is a complex technology with many layers. Caching is a process of recalling and storing frequently served data to amplify the speed of your website.</p><p>WordPress runs on MySQL and PHP, both of which can get bloated if you fail to employ caching. Hence, the speed of your WordPress website is the combined effort of you, the caching, and your host.</p><p>Traditionally, most WordPress hosts manage the caching. However, if caching is not managed by your host, use a free WordPress caching tool like <a href="https://wordpress.org/plugins/cache-enabler/" target="_blank" rel="noopener">Cache Enabler</a>. It's a lightweight caching plugin for WordPress that makes your website faster by generating static HTML files. Cache Enabler supports converting inline image URLs to WebP and pre-compressing cached pages with Gzip. Check out our <a href="https://www.keycdn.com/blog/wordpress-cache-plugin">performance benchmarks</a> that <strong>we ran against WP Super Cache and W3 Total Cache</strong>.</p><figure><img src="https://www.keycdn.com/img/blog/speed-test-example-5.png" alt="speed test example 5"></figure><h3 id="use-autoptimize">Use Autoptimize</h3><p><a href="https://wordpress.org/plugins/autoptimize/" target="_blank" rel="noopener">Autoptimize</a> is a free WordPress optimization plugin that addresses the needs of modern WordPress websites with numerous optimization features. Besides basic features like CSS and HTML optimization, and the ability to specify preload and preconnect directives, Autoptimize has everything you need to optimize the front-end performance of your WordPress website.</p><p>Autoptimize has more than 1 million active installs and is continuously updated with new features and bug fixes.</p><p>Also, a significant advantage is that Autoptimize is a pure optimization plugin and does not cache HTML pages. This means that it is compatible with all web hosts. Therefore, if you value performance, it is a good idea to complement Autoptimize with our <a href="https://wordpress.org/plugins/cache-enabler/" target="_blank" rel="noopener">Cache Enabler</a>.</p><h3 id="reduce-external-http-requests">Reduce external HTTP requests</h3><p>Your WordPress website's plugins and theme may include external requests to several resources. Generally, these requests are for opening externally hosted websites such as scripts, fonts, stylesheets, etc.</p><p>Occasionally, they are for adding functionalities like social media sharing, analytics, etc.</p><p>It's fine if you use some of them, but too many may slow down a website. Reduce the number of HTTP requests, and you will witness a visible difference in the loading speed of your website.</p><h3 id="load-only-necessary-scripts-on-every-page-load">Load only necessary scripts on every page load</h3><p>Most of the WordPress plugin and theme resources load and run on almost every page, even if it is unnecessary. For instance, a particular contact from a plugin may load its asset on all pages instead of only loading on pages consisting of a contact form.</p><p>Your website will load much faster if these styles and scripts are prevented from loading on every page. It is recommended to use the free Asset Cleanup plugin for concluding this task. With this plugin, you'll be able to choose unnecessary JS and CSS files on any particular page. This will reduce the bloat and will speed up your website.</p><h3 id="your-server-location-and-configuration">Your server location and configuration</h3><p>Your website's configuration and server location can have a heavy impact on the speed of your website.</p><p>For example, if your web server is located in the United States, a European visitor may experience a slow loading speed.</p><p>You can counter this by utilizing the following:</p><ul><li>A web server is close to you and your site's visitors.</li><li>A <a href="https://www.keycdn.com/" target="_blank" rel="noopener">CDN that has broad global coverage</a>.</li></ul><p>If your website attracts an audience from all around the globe, you can further boost its speed by opting for a <a href="https://www.keycdn.com/what-is-a-cdn">CDN</a>.</p><figure><img src="https://www.keycdn.com/img/blog/content-delivery-network-diagram.png" alt="content delivery network diagram"></figure><h3 id="remove-unnecessary-url-redirects">Remove unnecessary URL redirects</h3><p>If your website is being updated with new pages and posts, you would likely require to make changes to your website URL structure. In these cases, URL redirects are a ray of hope.</p><p>The most common issue with URL redirects not properly configured is the formation of a redirect chain. In a few cases, this chain takes the form of an infinite redirect loop. Such redirects mostly result in a slow-loading page.</p><p>Misconfigured URL redirects occasionally result in an <a href="https://www.keycdn.com/support/404-not-found-nginx">404 Page not found error</a>. If a site generates these errors, it is an instant red flag. These types of broken links often impact the loading time of the website but not in a positive way.</p><h3 id="switch-to-a-trusted-wordpress-web-host">Switch to a trusted WordPress web host</h3><p>If none of the abovementioned steps work for you, maybe it's time to change your web host. But you must ensure the web host you are switching to is trusted and reliable.</p><p>Generally, managed WordPress hosting comes with multiple features to help a WordPress website run quickly, securely, and efficiently. In addition, every technical know-how is taken care of by the experts, hence allowing you to focus completely on your business.</p><p>Do your research before choosing a WordPress host and ensure that it fits your website's requirements. Most of the managed WordPress hosts offer free-of-cost migration. Hence, you can easily migrate your website to this new host without extra cost.</p><h2 id="conclusion">Conclusion</h2><p>Fixing up a slow WordPress website involves many steps, but it is not impossible. Having a website with minimum load time helps boost your website's SEO, conversion rate, and user experience. Additionally, which visitor doesn't love a fast site?</p> https://www.keycdn.com/blog/wordpress-slow#comments KeyCDN Launches New POPs in Latin America https://www.keycdn.com/blog/pops-in-latin-america Tue, 29 Nov 2022 09:00:00 +0000 Ben Eaton https://www.keycdn.com/blog/pops-in-latin-america <img src="https://www.keycdn.com/img/blog/pops-in-latin-america.png" alt="KeyCDN Launches New POPs in Latin America"><p>We are excited about the newly established points of presence (POPs) in Latin America! So far, we could cover Latin America through Mexico City, Santiago, and São Paulo. Now Buenos Aires and Bogotá have been added. KeyCDN is always looking for ways to minimize latency and accelerate the delivery of assets worldwide.</p><p>The proximity to Latin American users now enables even more reliable and faster connections within Latin America and outside the region to anywhere else in the world. With these new POPs, our performance in Latin America has improved significantly, providing a better web experience. The new POPs are enabled for all existing zones. Our mission is to improve web performance continuously, and each POP contributes to that.</p><h2 id="pop-in-bogotá-colombia">POP in Bogotá - Colombia</h2><p>Bogotá is experiencing rapid growth, and in 2022 the population of Colombia's capital climbed to 7.9 million. Requests from Bogotà were previously routed to Miami, which is no longer necessary. According to our <a href="https://www.keycdn.com/pricing">pricing</a>, traffic from this POP will be billed to Latin America.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-bogota.png" alt="bogota pop location"></figure><h2 id="pop-in-buenos-aires-argentina">POP in Buenos Aires - Argentina</h2><p>Buenos Aires - the so-called &quot;Head of Goliath&quot; - is home to over 15 million inhabitants, about one-third of all Argentines. The new POP provides better performance on the east coast of the South American continent.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-buenos-aires.png" alt="buenos aires pop location"></figure><h2 id="how-to-check-a-pop-location">How to check a POP location</h2><p>Each POP adds the HTTP response header <code>X-Edge-Location</code> to all assets delivered via KeyCDN. For example, the POP in Buenos Aires uses <code>arba</code>. In the case of Bogota, the POPs identifier is <code>cobo</code>. The first two letters stand for the country <a href="https://en.wikipedia.org/wiki/Top-level_domain" target="_blank" rel="nofollow noopener">TLD</a>, while the 3rd and 4th letters are for the city. You can quickly check the response headers using <a href="https://www.keycdn.com/blog/chrome-devtools">Chrome DevTools</a> or a simple curl command like the one below:</p><pre><code class="language-none">curl -I https://www.keycdn.com/img/example.jpgHTTP/2 200server: keycdn-enginedate: Fri, 25 Nov 2022 09:05:47 GMTcontent-type: image/jpegcontent-length: 195025last-modified: Thu, 16 Jul 2020 07:06:27 GMTvary: Accept-Encodingetag: &quot;5f0ffc73-2f9d1&quot;expires: Fri, 02 Dec 2022 09:05:47 GMTcache-control: max-age=604800x-cache: HITx-edge-location: arba</code></pre><h2 id="check-the-status-of-a-pop">Check the status of a POP</h2><p>Uptime and low latency is very important to us and we ensure that your content is always properly delivered from the nearest POP. If you are experiencing any issues with any point of presence check our <a href="https://status.keycdn.com">status page</a> to verify if we are performing any scheduled maintenance or open a <a href="https://www.keycdn.com/support">support request</a> with us.</p><figure><img src="https://www.keycdn.com/img/blog/keycdn-status.png" alt="pop status"></figure><h2 id="what-s-next">What's next?</h2><p>We have more locations schedules. In fact, <strong>Lima</strong> will follow soon and further improve web performance in Peru! If you'd like to request a POP in another location or a new feature please let us know and stay tuned for more exciting announcements.</p><p>Happy content delivery everyone!</p> https://www.keycdn.com/blog/pops-in-latin-america#comments API Security: The Complete Guide https://www.keycdn.com/blog/api-security Tue, 04 Oct 2022 06:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/api-security <img src="https://www.keycdn.com/img/blog/api-security.png" alt="API Security: The Complete Guide"><p>If your software applications can interact with each other smoothly and flawlessly, nobody but API or Application Programming Security is to be thanked. It is a foundational part of our modern software patterns, which include software patterns like microservices architectures.</p><p>As the APIs are commonly used nowadays, and as they make sensitive data and software functions accessible, the attackers look at them as their main target. Looking at the importance of the APIs, one must ensure that they are well protected from any threat or attacks, and the process that helps achieve these security norms is called API security.</p><p>API Security serves as a major component of modern web application security. Unfortunately, APIs often suffer from vulnerabilities like broken authorization, authentication, and code injection and may also lack rate limiting. Therefore, organizations must regularly test APIs to identify and address these vulnerabilities utilizing the best security practices.</p><p>This article is your guide to APIs and API securities and will make you aware of the best practices to ensure your API's security.</p><p>So, let's get started.</p><h2 id="importance-of-api-security">Importance of API Security</h2><p>API security secures the Data transfer that is done through APIs, which mostly happens between servers and clients who are connected over public networks.</p><p>Organizations utilize APIs in order to transfer data and connect services. A hacked, compromised, or exposed API can compromise financial information, personal data, or other major sensitive data. Hence, security is a crucial consideration when developing and designing APIs.</p><p>APIs are very prone to weakness in the security of the backend systems. Attackers can very easily compromise every API functionality and data if they succeed in compromising the API provider. Malicious requests are another way to exploit APIs, and the APIs not properly protected and coded are most likely to get harmed by these requests.</p><p>For instance, an attack of Denial of Service (DOS) can significantly affect APIs performance, or an API endpoint could be taken online due to this attack. Attackers are able to abuse APIs by exceeding the limit of usage or data scraping. The attackers who possess more sophistication can perform operations that are unauthorized by injecting malicious code. With the use of malicious code, attackers are also able to compromise the backend.</p><p>As serverless architectures and microservices are getting more popular, most enterprise applications for their basic functionality depend on the API. As a result, API security is a major part of the modern era's information security.</p><h2 id="the-difference-between-general-application-security-and-api-security">The difference between General Application Security and API security</h2><p>Let's first look at the major characteristics of general application security:</p><p><strong>A moat and castle approach-</strong> This traditional approach has a crystal-clear perimeter that controls the points of access. This perimeter refuses or accepts access requests and assumes that the requestors who have entered are amicable.</p><p><strong>Mostly static protocol-</strong> Incoming requests hold fast to mostly static protocol, allowing the administration to configure a WAF to enforce the protocols.</p><p><strong>A web browser is used by the clients-</strong> <a href="https://www.keycdn.com/support/web-application-firewall">WAF</a> can verify a client's browser environment, and if the environment fails the verification, the WAF assumes that the client is a bot that is using a mindless emulator or browser.</p><p><strong>Detecting attacks by examining requests-</strong> A traditional network can block the attempts of <a href="https://www.keycdn.com/blog/x-xss-protection">cross-site scripting (XSS)</a> by employing WAF. If a single IP generates a lot of traffic volume, The WAF can assume that it is an attempt at a <a href="https://www.keycdn.com/support/ddos-attack">Distributed Denial of Service</a> (DDoS) attack.</p><p>The following are the major characteristics of API security that differentiate it from the general application security:</p><p><strong>A castle with many doors but no moat:</strong> Earlier, traditional networks were only required to protect common ports, including 443 (<a href="https://www.keycdn.com/blog/difference-between-http-and-https">HTTPS</a>) and 80 (HTTP). Modern-day web applications have various APIs that utilize different protocols. APIs generally tend to expand over time, and even a single API can make security a difficult venture.</p><p><strong>Incoming request formats which change frequently:</strong> APIs evolve very frequently in the DevOps environment, and most of the WAFs cannot accommodate this level's elasticity. Each time an API experiences a change, manual tuning and reconfiguring are required in the traditional security tools. This process is likely to get hit by errors and requires a generous amount of resources and time.</p><p><strong>A web browser is typically not used by clients:</strong> Most microservice and service APIs are accessed by mobile and native applications or other services and components of the software. Since these clients don't utilize a browser, web security tools are not able to utilize browser verification. As a result, solutions that have their reliability on browser verification in order to detect malevolent bots generally find it difficult to exclude the automatically generated traffic from the endpoints of APIs.</p><p><strong>Detection of attacks is not guaranteed just by examining the incoming requests:</strong> The requests that look legitimate are exploited by most of the API abuse attacks.</p><h2 id="common-api-attacks">Common API attacks</h2><p>API attacks are not similar to common cyberattacks and are very difficult to detect. However, this new approach is why every individual should understand the common API attacks, how they function, and the methods to prevent them from happening.</p><h3 id="bola-broken-object-level-authorization-attack">BOLA (Broken Object-Level Authorization) attack</h3><p>Bola is the most common type of attack that an API faces. This attack is detected when a malicious attacker changes or tries to change parameters across a series of API calls to request sensitive data that only authorized personnel are allowed to access. For instance, malicious users might pass authentication by using one User ID and then enumerate User IDs succeeding API calls to take out account information to which they are not authorized to have access.</p><p><strong>Measures to counter the attack:</strong> Implement an API tracking that can retain information on the various users connected to the system and all activities they perform. BOLA attacks can be quite &quot;slow and low&quot;, drawn out over days or weeks. Hence, you require API tracking, which can store huge amounts of data and implement Artificial Intelligence to detect attack patterns in real-time.</p><h3 id="improper-assets-management-attack">Improper assets management attack</h3><p>This type of attack happens when there are unmonitored APIs running (&quot;shadow APIs&quot;) or older APIs that were created, utilized, and then forgotten about without being replaced or removed with the latest and more secure versions; these APIs are often called zombie APIs.</p><p>Unmonitored APIs present a threat as they are not running under the tooling and processes meant to manage APIs. You can never do something that you are not fully aware of. Hence you are required to maintain a complete inventory, even if something was left undocumented by the developers. Older APIs are unmarked, and they often utilize older libraries. These types of APIs are not documented and can go unnoticed for an extended period of time.</p><p><strong>Measures to counter the attack:</strong> Set up an effective inventory management system that includes every API endpoint, its uses, its versions, and the networks and environment they have its reach.</p><p>Ensure that the API is in production, the API being used is not an outdated version, no sensitive data is exposed, and the flow of data is maintained as per the expectations.</p><h3 id="insufficient-monitoring-and-logging">Insufficient monitoring and logging</h3><p>API logs contain personal and private information that the attackers can exploit. Monitoring and logging functions are responsible for providing security teams with the raw data to establish the traditional user behavior patterns. When the API is attacked, the threat could easily be detected by recognizing the usual patterns.</p><p>Insufficient monitoring and logging result in user behavior patterns that cannot be traced, allowing the threat actors to compromise the system and go unnoticed for a long time.</p><p><strong>Measures to counter the attack:</strong> Have a strong and consistent monitoring and logging plan to have sufficient data that could be utilized as a baseline for normal behavior. This way, you can swiftly detect attacks and immediately respond to those incidents in real-time. Also, ensure that whatever data goes into the logs is properly monitored and filtered.</p><h2 id="rest-api-vs-soap-security">REST API vs SOAP Security</h2><p>There are, in total, two major architectural styles utilized in modern APIs:</p><div class="steps"><ol><li>SOAP: A heavily structured message protocol in which multiple low-level protocols are supported.</li><li>REST: A less complex approach to APIs utilizing HTTP/S as the protocol for transport and typically utilizing the JSON format for data transfer.</li></ol></div><p>Both the APIs support HTTPS responses and requests and <a href="https://www.keycdn.com/support/what-is-ssl-tls">SSL</a> (Secure Socket Layer), but these are the only similarities between these two securities.</p><h3 id="soap-api-security">SOAP API Security</h3><ul><li>Some extensions are offered by SOAP to the protocol that can address the matters of security.</li><li>SOAP is based on OASIS and W3C recommendations, which include: XML encryption, XML signatures, and SAML tokens.</li><li>Web Services (WS) specifications are supported by SOAP, allowing users to utilize security extensions like WS-security that provide enterprise-level security for web services.</li><li>A built-in error handling is also provided by SOAP as it supports <a href="https://en.wikipedia.org/wiki/WS-ReliableMessaging" target="_blank" rel="noopener">WS-ReliableMessaging</a>.</li></ul><h3 id="rest-api-security">REST API Security</h3><ul><li>There are no built-in security capabilities provided with REST APIs- the design of the API is the only thing on which the security depends.</li><li>Security for deployment, interaction, and transmission must be built in.</li><li>You won't find any built-in error handling in REST APIs and are required to resend data in case of an error.</li><li>A common choice is to deploy REST APIs after an API gateway. Instead of connecting directly to the REST API, clients connect to the gateway, which behaves like a proxy. This activity allows many security concerns to be addressed by the API gateway.</li></ul><p>Overall, SOAP APIs are much more secure by design, but REST APIs can be enhanced when it comes to security; we have to select the right architecture and properly implement it.</p><h2 id="methods-of-api-security-testing">Methods of API Security testing</h2><p>The following are the methods that an individual can follow to manually test their APIs for vulnerabilities security:</p><h3 id="test-for-parameter-tampering">Test for parameter tampering</h3><p>In most scenarios, the parameters that have been sent through API requests can be vulnerable to tempers. For instance, by tempering parameters, attackers can change the purchase amount and even receive products free of cost. Attackers can also manipulate an API to provide sensitive data not meant for the user's account.</p><p>Most of the time, parameter tampering is performed by utilizing hidden form fields. You can hunt for the presence of any hidden fields by using the browser element inspector. If you succeed in finding a hidden field, experiment with various values and see how your API is reacting.</p><h3 id="test-for-command-injection">Test for command injection</h3><p>To check whether or not your API has a vulnerability to attacks called command injection, try inserting operating system commands inside the API inputs. Use an appropriate operating system command that perfectly suits the operating system on which your API server is running. Using a harmless operating system command that you can observe on the server is recommended. For example, suppose your API is displaying content with the help of a URL. In that case, an operating system command can be appended by you to the end of the URL in order to observe if the command is getting executed on the server.</p><h3 id="test-for-api-input-fuzzing">Test for API input fuzzing</h3><p>Fuzzing defines providing an API with random data until you are able to discover a security or functional problem. You can look for signals that the API processed the Inputs incorrectly, returned an error, or crashed.</p><h3 id="test-for-unhandled-http-methods">Test for unhandled HTTP methods</h3><p>Web applications that use APIs to communicate may utilize various HTTP methods. All these HTTP methods are utilized to store, retrieve, or delete data. You will always get an error message if the server does not support the HTTP method. However, there are exceptions in some cases. If the server side does not support the HTTP method, this creates a vulnerability for security.</p><h2 id="wrapping-it-up">Wrapping it up!</h2><p>Organizations are frequently adopting APIs to help them improve their connectivity. In addition, APIs also help organizations provide easy access to their applications to their clients. But unmonitored and unsecured APIs develop vulnerabilities that could take the form of major security breaches. Hence, it is essential to adopt and implement an effective API security strategy across the overall lifecycle of the APIs.</p> https://www.keycdn.com/blog/api-security#comments Web Crawlers - Top 10 Most Popular https://www.keycdn.com/blog/web-crawlers Fri, 19 Aug 2022 16:05:59 +0000 Ben Eaton https://www.keycdn.com/blog/web-crawlers <img src="https://www.keycdn.com/img/blog/web-crawlers.png" alt="Web Crawlers - Top 10 Most Popular"><p>When it comes to the world wide web, there are both bad bots and good bots. You definitely want to avoid bad bots as these consume your CDN bandwidth, take up server resources, and steal your content. On the other hand, good bots (also known as web crawlers) should be handled with care as they are a vital part of getting your content to index with search engines such as Google, Bing, and Yahoo. In this blog post, we will take a look at the top ten most popular web crawlers.</p><h2 id="what-are-web-crawlers">What are web crawlers?</h2><p>Web crawlers are computer programs that browse the Internet methodically and automatedly. They are also known as robots, ants, or spiders.</p><p>Crawlers visit websites and read their pages and other information to create entries for a search engine's index. The primary purpose of a web crawler is to provide users with a comprehensive and up-to-date index of all available online content.</p><p>In addition, web crawlers can also gather specific types of information from websites, such as contact information or pricing data. By using web crawlers, businesses can keep their online presence (i.e. SEO, frontend optimization, and web marketing) up-to-date and effective.</p><p>Search engines like Google, Bing, and Yahoo use crawlers to properly index downloaded pages so that users can find them faster and more efficiently when searching. Without web crawlers, there would be nothing to tell them that your website has new and fresh content. Sitemaps also can play a part in that process. So web crawlers, for the most part, are a good thing.</p><p>However, there are also issues sometimes when it comes to scheduling and load, as a crawler might constantly be polling your site. And this is where a <a href="https://www.keycdn.com/support/what-is-a-robots-txt-file">robots.txt file</a> comes into play. This file can help control the crawling traffic and ensure that it doesn't overwhelm your server.</p><p>Web crawlers identify themselves to a web server using the <code>User-Agent</code> request header in an HTTP request, and each crawler has its unique identifier. Most of the time, you will need to examine your web server referrer logs to view web crawler traffic.</p><h3 id="robots-txt">Robots.txt</h3><p>By placing a robots.txt file at the root of your web server, you can define rules for web crawlers, such as allowing or disallowing certain assets from being crawled. Web crawlers must follow the rules defined in this file. You can apply general rules to all bots or get more granular and specify their specific <code>User-Agent</code> string.</p><p><strong>Example 1</strong></p><p>This example instructs all Search engine robots not to index any of the website's content. This is defined by disallowing the root <code>/</code> of your website.</p><pre><code class="language-none">User-agent: * Disallow: /</code></pre><p><strong>Example 2</strong></p><p>This example achieves the opposite of the previous one. In this case, the instructions are still applied to all user agents. However, there is nothing defined within the Disallow instruction, meaning that everything can be indexed.</p><pre><code class="language-none">User-agent: *Disallow:</code></pre><p>To see more examples make sure to check out our in-depth post on <a href="https://www.keycdn.com/support/what-is-a-robots-txt-file">how to use a robots.txt file</a>.</p><h2 id="top-10-good-web-crawlers-and-bots">Top 10 good web crawlers and bots</h2><p>There are hundreds of web crawlers and bots scouring the Internet, but below is a list of 10 popular web crawlers and bots that we have collected based on ones that we see on a regular basis within our web server logs.</p><h2 id="1-googlebot">1. GoogleBot</h2><figure><img src="https://www.keycdn.com/img/blog/googlebot-1.png" alt="googlebot - web crawlers"></figure><p>As the world's largest search engine, Google relies on web crawlers to index the billions of pages on the Internet. <a href="https://developers.google.com/search/docs/advanced/crawling/googlebot" target="_blank" rel="nofollow noopener">Googlebot</a> is the web crawler Google uses to do just that.</p><p>Googlebot is two types of crawlers: a desktop crawler that imitates a person browsing on a computer and a mobile crawler that performs the same function as an iPhone or Android phone.</p><p>The user agent string of the request may help you determine the subtype of Googlebot. Googlebot Desktop and Googlebot Smartphone will most likely crawl your website. On the other hand, both crawler types accept the same product token (user agent token) in robots.txt. You cannot use robots.txt to target either Googlebot Smartphone or Desktop selectively.</p><p>Googlebot is a very effective web crawler that can index pages quickly and accurately. However, it does have some drawbacks. For example, <a href="https://developers.google.com/search/docs/advanced/crawling/googlebot" target="_blank" rel="nofollow noopener">Googlebot does not always crawl all the pages on a website</a> (especially if the website is large and complex).</p><p>In addition, Googlebot does not always crawl pages in real-time, which means that some pages may not be indexed until days or weeks after they are published.</p><h3 id="user-agent"><code>User-Agent</code></h3><pre><code class="language-none">Googlebot</code></pre><h3 id="full-user-agent-string">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)</code></pre><h3 id="googlebot-example-in-robots-txt">Googlebot example in robots.txt</h3><p>This example displays a little more granularity about the instructions defined. Here, the instructions are only relevant to Googlebot. More specifically, it is telling Google not to index a specific page (<code>/no-index/your-page.html</code>).</p><pre><code class="language-none">User-agent: GooglebotDisallow: /no-index/your-page.html</code></pre><p>Besides Google's web search crawler, they actually have 9 additional web crawlers:</p><div class="table-responsive mb-3"><table><thead><tr><th>Web crawler</th><th><code>User-Agent</code> string</th></tr></thead><tbody><tr><td>Googlebot News</td><td>Googlebot-News</td></tr><tr><td>Googlebot Images</td><td>Googlebot-Image/1.0</td></tr><tr><td>Googlebot Video</td><td>Googlebot-Video/1.0</td></tr><tr><td>Google Mobile (featured phone)</td><td>SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)</td></tr><tr><td>Google Smartphone</td><td>Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)</td></tr><tr><td>Google Mobile Adsense</td><td>(compatible; Mediapartners-Google/2.1; +http://www.google.com/bot.html)</td></tr><tr><td>Google Adsense</td><td>Mediapartners-Google</td></tr><tr><td>Google AdsBot (PPC landing page quality)</td><td>AdsBot-Google (+http://www.google.com/adsbot.html)</td></tr><tr><td>Google app crawler (fetch resources for mobile)</td><td>AdsBot-Google-Mobile-Apps</td></tr></tbody></table></div><p>You can use the <a href="https://www.google.com/webmasters/tools/googlebot-fetch" target="_blank" rel="nofollow noopener">Fetch tool</a> in Google Search Console to test how Google crawls or renders a URL on your site. See whether Googlebot can access a page on your site, how it renders the page, and whether any page resources (such as images or scripts) are blocked to Googlebot.</p><figure><img src="https://www.keycdn.com/img/blog/fetch-as-google.png" alt="fetch as google"></figure><p>You can also see the Googlebot crawl stats per day, the amount of kilobytes downloaded, and time spent downloading a page.</p><figure><img src="https://www.keycdn.com/img/blog/googlebot-crawl-stats.png" alt="googlebot crawl stats"></figure><p>See <a href="https://support.google.com/webmasters/answer/6062596?hl=en&amp;ref_topic=6061961" target="_blank" rel="nofollow noopener">Googlebot robots.txt</a> documentation.</p><h2 id="2-bingbot">2. Bingbot</h2><figure><img src="https://www.keycdn.com/img/blog/bingbot.png" alt="bingbot - webcrawlers"></figure><p>Bingbot is a web crawler deployed by Microsoft in 2010 to supply information to their Bing search engine. This is the replacement of what used to be the MSN bot.</p><h3 id="user-agent-1"><code>User-Agent</code></h3><pre><code class="language-none">Bingbot</code></pre><h3 id="full-user-agent-string-1">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (compatible; Bingbot/2.0; +http://www.bing.com/bingbot.htm)</code></pre><p>Bing also has a very similar tool as Google, called Fetch as Bingbot, within <a href="https://www.bing.com/toolbox/webmaster/" target="_blank" rel="nofollow noopener">Bing Webmaster Tools</a>. Fetch As Bingbot allows you to request a page be crawled and shown to you as our crawler would see it. You will see the page code as Bingbot would see it, helping you understand if they see your page as you intended.</p><figure><img src="https://www.keycdn.com/img/blog/fetch-as-bingbot.png" alt="fetch as bingbot"></figure><p>See <a href="https://www.bing.com/webmaster/help/how-to-create-a-robots-txt-file-cb7c31ec" target="_blank" rel="nofollow noopener">Bingbot robots.txt</a> documentation.</p><h2 id="3-slurp-bot">3. Slurp Bot</h2><figure><img src="https://www.keycdn.com/img/blog/slurp-yahoo.png" alt="slurp yahoo"></figure><p>Yahoo Search results come from the Yahoo web crawler <a href="https://help.yahoo.com/kb/SLN22600.html" target="_blank" rel="nofollow noopener">Slurp</a> and Bing's web crawler, as a lot of Yahoo is powered by Bing. Sites should allow Yahoo Slurp access in order to appear in Yahoo Mobile Search results.</p><p>Additionally, Slurp does the following:</p><ul><li>Collects content from partner sites for inclusion within sites like Yahoo News, Yahoo Finance, and Yahoo Sports.</li><li>Accesses pages from sites across the Web to confirm the accuracy and improve Yahoo's personalized content for our users.</li></ul><h3 id="user-agent-2"><code>User-Agent</code></h3><pre><code class="language-none">Slurp</code></pre><h3 id="full-user-agent-string-2">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)</code></pre><p>See <a href="https://help.yahoo.com/kb/learn-submit-website-yahoo-robotstxt-directive-sln2213.html" target="_blank" rel="nofollow noopener">Slurp robots.txt</a> documentation.</p><h2 id="4-duckduckbot">4. DuckDuckBot</h2><figure><img src="https://www.keycdn.com/img/blog/duckduckbot.png" alt="duckduckbot"></figure><p>DuckDuckBot is the Web crawler for <a href="https://duckduckgo.com" target="_blank" rel="nofollow noopener">DuckDuckGo</a>, a search engine that has become quite popular as it is known for privacy and not tracking you. It now handles over <a href="https://duckduckgo.com/traffic.html" target="_blank" rel="nofollow noopener">93 million queries per day</a>. DuckDuckGo gets its results from a variety of sources. These include hundreds of vertical sources delivering niche Instant Answers, DuckDuckBot (their crawler) and crowd-sourced sites (Wikipedia). They also have more traditional links in the search results, which they source from Yahoo! and Bing.</p><h3 id="user-agent-3"><code>User-Agent</code></h3><pre><code class="language-none">DuckDuckBot</code></pre><h3 id="full-user-agent-string-3">Full <code>User-Agent</code> string</h3><pre><code class="language-none">DuckDuckBot/1.0; (+http://duckduckgo.com/duckduckbot.html)</code></pre><p>It respects <a href="https://metacpan.org/module/WWW::RobotRules" target="_blank" rel="nofollow noopener">WWW::RobotRules</a> and originates from these IP addresses:</p><ul><li>72.94.249.34</li><li>72.94.249.35</li><li>72.94.249.36</li><li>72.94.249.37</li><li>72.94.249.38</li></ul><h2 id="5-baiduspider">5. Baiduspider</h2><figure><img src="https://www.keycdn.com/img/blog/baiduspider.png" alt="Baiduspider"></figure><p>Baiduspider is the official name of the Chinese Baidu search engine's web crawling spider. It crawls web pages and returns updates to the Baidu index. Baidu is the leading Chinese search engine that takes an 80% share of China Mainland's overall search engine market.</p><h3 id="user-agent-4"><code>User-Agent</code></h3><pre><code class="language-none">Baiduspider</code></pre><h3 id="full-user-agent-string-4">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)</code></pre><p>Besides Baidu's web search crawler, they actually have 6 additional web crawlers:</p><div class="table-responsive text-nowrap mb-3"><table><thead><tr><th>Web crawler</th><th><code>User-Agent</code> string</th></tr></thead><tbody><tr><td>Image Search</td><td>Baiduspider-image</td></tr><tr><td>Video Search</td><td>Baiduspider-video</td></tr><tr><td>News Search</td><td>Baiduspider-news</td></tr><tr><td>Baidu wishlists</td><td>Baiduspider-favo</td></tr><tr><td>Baidu Union</td><td>Baiduspider-cpro</td></tr><tr><td>Business Search</td><td>Baiduspider-ads</td></tr><tr><td>Other search pages</td><td>Baiduspider</td></tr></tbody></table></div><p>See <a href="https://www.baidu.com/search/robots_english.html" target="_blank" rel="nofollow noopener">Baidu robots.txt</a> documentation.</p><h2 id="6-yandex-bot">6. Yandex Bot</h2><figure><img src="https://www.keycdn.com/img/blog/yandex-bot.png" alt="yandex bot"></figure><p>YandexBot is the web crawler to one of the largest Russian search engines, Yandex.</p><h3 id="user-agent-5"><code>User-Agent</code></h3><pre><code class="language-none">YandexBot</code></pre><h3 id="full-user-agent-string-5">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)</code></pre><p>There are many different User-Agent strings that the YandexBot can show up as in your server logs.</p><h2 id="7-sogou-spider">7. Sogou Spider</h2><figure><img src="https://www.keycdn.com/img/blog/sogou-spider.png" alt="Sogou Spider"></figure><p>Sogou Spider is the web crawler for Sogou.com, a leading Chinese search engine that was launched in 2004.</p><div class="alert alert-warning"><strong>Note:</strong> The Sogou web spider does not respect the <a href="https://en.wikipedia.org/wiki/Robots_exclusion_standard" target="_blank" rel="nofollow noopener">robots exclusion standard</a>, and is therefore banned from many websites because of excessive crawling.</div><h3 id="user-agent-6"><code>User-Agent</code></h3><pre><code class="language-none">Sogou Pic Spider/3.0( http://www.sogou.com/docs/help/webmasters.htm#07)Sogou head spider/3.0( http://www.sogou.com/docs/help/webmasters.htm#07)Sogou web spider/4.0(+http://www.sogou.com/docs/help/webmasters.htm#07)Sogou Orion spider/3.0( http://www.sogou.com/docs/help/webmasters.htm#07)Sogou-Test-Spider/4.0 (compatible; MSIE 5.5; Windows 98)</code></pre><h2 id="8-exabot">8. Exabot</h2><figure><img src="https://www.keycdn.com/img/blog/exa-bot.png" alt="exa bot"></figure><p>Exabot is a web crawler for Exalead, which is a search engine based out of France. It was founded in 2000 and has more than 16 billion pages indexed.</p><h3 id="user-agent-7"><code>User-Agent</code></h3><pre><code class="language-none">Mozilla/5.0 (compatible; Konqueror/3.5; Linux) KHTML/3.5.5 (like Gecko) (Exabot-Thumbnails)Mozilla/5.0 (compatible; Exabot/3.0; +http://www.exabot.com/go/robot)</code></pre><p>See <a href="https://www.exalead.com/search/webmasterguide" target="_blank" rel="nofollow noopener">Exabot robots.txt</a> documentation.</p><h2 id="9-facebook-external-hit">9. Facebook external hit</h2><figure><img src="https://www.keycdn.com/img/blog/facebook-share.png" alt="facebook share"></figure><p>Facebook allows its users to send links to interesting web content to other Facebook users. Part of how this works on the Facebook system involves the temporary display of certain images or details related to the web content, such as the title of the webpage or the embed tag of a video. The <a href="https://www.facebook.com/externalhit_uatext.php" target="_blank" rel="nofollow noopener">Facebook system retrieves this information</a> only after a user provides a link.</p><p>One of their main crawling bots is Facebot, which is designed to help improve advertising performance.</p><h3 id="user-agent-8"><code>User-Agent</code></h3><pre><code class="language-none">facebotfacebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)</code></pre><p>See <a href="https://developers.facebook.com/docs/sharing/webmasters/crawler" target="_blank" rel="nofollow noopener">Facebot robots.txt</a> documentation.</p><h2 id="10-applebot">10. Applebot</h2><p>The computer technology brand Apple uses the web crawler <a href="https://support.apple.com/en-us/HT204683" target="_blank" rel="nofollow noopener">Applebot</a>, and in particular Siri and Spotlight Suggestions, to provide personalized services to their users.</p><h3 id="user-agent-9"><code>User-Agent</code></h3><pre><code class="language-none">Applebot</code></pre><h3 id="full-user-agent-string-6">Full <code>User-Agent</code> string</h3><pre><code class="language-none">Mozilla/5.0 (Device; OS_version) AppleWebKit/WebKit_version (KHTML, like Gecko)Version/Safari_version Safari/WebKit_version (Applebot/Applebot_version)</code></pre><h2 id="other-popular-web-crawlers">Other popular web crawlers</h2><h3 id="apache-nutch">Apache Nutch</h3><p>Apache Nutch is an open-source web crawler written in Java. It is released under the Apache License and is managed by the Apache Software Foundation.Nutch can run on a single machine, but it is more commonly used in a distributed environment. In fact, Nutch was designed from the ground up to be scalable and easily extensible.</p><p>Nutch is very flexible and can be used for various purposes. For example, Nutch can be used to crawl the entire Internet or only specific websites. In addition, Nutch can be configured to index pages in real-time or on a schedule.</p><p>One of the main benefits of Apache Nutch is its scalability. Nutch can be easily scaled to accommodate large volumes of data and traffic. For example, a large ecommerce website may use Apache Nutch to crawl and index its product catalog. This would allow customers to search for products on their website using the company's internal search engine.</p><p>In addition, Apache Nutch can be used to gather data about websites. Companies could use Apache Nutch to crawl competitor websites and collect information about their products, prices, and contact information. This information could then be used to improve their online presence.However, Apache Nutch does have some drawbacks. For example, it can be challenging to configure and use. In addition, Apache Nutch is not as widely used as other web crawlers, which means less support is available for it.</p><h3 id="screaming-frog">Screaming Frog</h3><p>Screaming Frog SEO Spider is a desktop program (PC or Mac) that crawls websites' links, images, CSS, scripts, and apps from an SEO perspective.</p><p>It fetches key onsite elements for SEO, presents them in tabs by types, and allows you to filter for common SEO issues or slice and dice the data how you like by exporting it into Excel.</p><p>You can view, analyze and filter the crawl data as it's gathered and extracted in real-time from the simple interface.</p><p>The program is free for small sites (up to 500 URLs). Larger sites require a license.</p><p>Screaming Frog uses the Chromium WRS to crawl dynamic websites that are rich in JavaScript, such as Angular, React, and Vue.js. WordPress sitemap creation, XPath extraction, and site architecture visualization are other top features.</p><p>The platform serves corporations like Apple, Amazon, Disney, and even Google. Screaming Frog is also a popular tool among agency owners and SEOs who manage SEO for multiple clients.</p><h3 id="deepcrawl">Deepcrawl</h3><p>Deepcrawl is a cloud-based web crawler that allows users to crawl websites and collect data about their structure, content, and performance.</p><p>DeepCrawl provides users with several features and options, including the ability to crawl JavaScript-based websites, customize the crawling process, and generate detailed reports.</p><p>One of Deepcrawl's most unique features is its ability to crawl websites built with JavaScript. This is possible because Deepcrawl uses a headless browser (i.e. Chrome) to render the website's content before crawling it.</p><p>This means that Deepcrawl can crawl and collect data about websites that other crawlers would not always be able to reach.</p><p>Beyond flexible APIs, Deepcrawl's data integrates with Google Analytics, Google Search Console, and other popular tools. This allows users to easily compare their website's data with their competitors. It also allows them to connect business data (e.g. sales data) with their website's data to get a complete picture of how their website is performing.</p><p>Deepcrawl works best for companies with large websites with a lot of content and pages. The platform is less well-suited for small websites or those that do not change very often.</p><p>There are three different products that Deepcrawl offers:</p><ul><li>Automation Hub: This product integrates with your CI/CD pipeline and automatically crawls your website with 200+ SEO QA testing rules.</li><li>Analytics Hub: This product allows you to surface actionable insights from your website data and improve your website's SEO.</li><li>Monitoring Hub: This product monitors your website for changes and alerts you when new issues arise.</li></ul><p>Businesses use these three products to improve their website's SEO, monitor it for changes, and collaborate with dev teams.</p><h3 id="octoparse">Octoparse</h3><p>Octoparse is a user-friendly client-based web crawling software that lets you extract data from all over the Internet. The program is particularly developed for people who are not programmers and has a simple point-and-click interface.</p><p>With Octoparse, you can run scheduled cloud extractions to extract dynamic data, create workflows to extract data from websites automatically, and use its web scraping API to access data.</p><p>Its IP proxy servers let you crawl websites without being blocked, and its built-in Regex feature cleans data automatically.</p><p>And with its pre-built scraper templates, you can start extracting data from popular websites like Yelp, Google Maps, Facebook, and Amazon within minutes. You can also build your own scraper if there isn't one readily available for your target websites.</p><h3 id="httrack">HTTrack</h3><p>You can use HTTrack's freeware to download entire sites to your PC. With support for Windows, Linux, and other Unix systems, this open-source tool can be used by millions.</p><p>HTTrack's website copier lets you download a website to your computer so that you can browse it offline. The program can also be used to mirror websites, meaning that you can create an exact copy of a website on your server.</p><p>The program is easy to use and has many features, including the ability to resume interrupted downloads, update existing websites, and create static copies of dynamic websites.</p><p>You can get the files, photos, and HTML code from its mirrored website and resume interrupted downloads.</p><p>While HTTrack can be used to download any type of website, it's particularly useful for downloading websites that are no longer online.</p><p>HTTrack is a great tool for anyone who wants to download an entire website or mirror a website. However, it should be noted that the program can be used to download illegal copies of websites.</p><p>As such, you should only use HTTrack if you have permission from the website owner.</p><h3 id="sitesucker">SiteSucker</h3><p>SiteSucker is a macOS application that downloads websites. It asynchronously copies the site's webpages, images, PDFs, style sheets, and other files to your local hard drive, duplicating the site's directory structure.</p><p>You can also use SiteSucker to download specific files from websites, such as MP3 files.</p><p>The program can be used to create local copies of websites, making it ideal for offline browsing.</p><p>It's also useful for downloading entire sites so you can view them on your computer without an Internet connection.</p><p>One drawback to SiteSucker is that it cannot handle Javascript (though it can handle Flash). Nevertheless, it's still useful for downloading websites to your Mac.</p><h3 id="webz-io">Webz.io</h3><p>Users can use the Webz.io web application to get real-time data by crawling online sources worldwide into various tidy formats. This web crawler allows you to crawl data and extract keywords in multiple languages based on numerous criteria from a diverse range of sources.</p><p>The Archive allows users to access historical data. Users can easily index and search the structured data crawled by Webhose using its intuitive interface/API. You can save the scraped data in JSON, XML, and RSS formats. Plus, Webz.io supports up to 80 languages with its crawling data results.</p><p>Webz.io's freemium business model should suffice for businesses with basic crawling requirements. For businesses that need a more robust solution, Webz.io also offers support for media monitoring, cybersecurity threats, risk intelligence, financial analysis, web intelligence, and identity theft protection.</p><p>They even support dark web API solutions for business intelligence.</p><h3 id="uipath">UiPath</h3><p>UiPath is a Windows application that can be used to automate repetitive tasks. It's beneficial for web scraping, as it can extract data from websites automatically.</p><p>The program is easy to use and doesn't require any programming knowledge. It features a visual drag-and-drop interface that makes it easy to create automation scripts.</p><p>With UiPath, you can extract tabular and pattern-based data from websites, PDFs, and other sources. The program can also be used to automate tasks such as filling out online forms and downloading files.</p><p>The commercial version of the tool provides additional crawling capabilities. When dealing with complicated UIs, this approach is very successful. The Screen Scraping Tool can extract data from tables in both individual words and groups of text, as well as blocks of text such as RSS feeds.</p><p>Also, you don't need any programming skills to create intelligent web agents, but if you're a .NET hacker, you'll be able to completely control their data.</p><h2 id="bad-bots">Bad bots</h2><p>While most web crawlers are benign, some can be used for malicious purposes. These malicious web crawlers, or &quot;bots,&quot; can be used to steal information, launch attacks, and commit fraud. It has also been increasingly found that these bots ignore robots.txt directives and proceed directly to scan websites.</p><p>Some prominent bad bots are as listed below:</p><ul><li>PetalBot</li><li>SEMrushBot</li><li>Majestic</li><li>DotBot</li><li>AhrefsBot</li></ul><h2 id="protecting-your-site-from-malicious-web-crawlers">Protecting your site from malicious web crawlers</h2><p>To protect your website from bad bots, you can use a <a href="https://www.keycdn.com/support/web-application-firewall">web application firewall</a> (WAF) to protect your website from bots and other threats. A WAF is a piece of software that sits between your website and the Internet, filtering traffic before it reaches your site.</p><p>A <a href="https://www.keycdn.com/what-is-a-cdn" target="_blank" rel="noopener">CDN</a> can also help to protect your website from bots. A CDN is a network of servers that deliver content to users based on their geographic location.</p><p>When a user requests a page from your website, the CDN will route the request to the server closest to the user's location. This can help to reduce the risk of bots attacking your website, as they will have to target each CDN server individually.</p><p>KeyCDN has a great feature that you can enable in your dashboard called <a href="https://www.keycdn.com/blog/block-bad-bots">Block Bad Bots</a>. KeyCDN uses a comprehensive list of known bad bots and blocks them based on their <code>User-Agent</code> string.</p><p>When a new Zone is added the <strong>Block Bad Bots</strong> feature is set to <code>disabled</code>. This setting can be set to <code>enabled</code> instead if you want bad bots to automatically be blocked.</p><h2 id="bot-resources">Bot resources</h2><p>Perhaps you are seeing some user-agent strings in your logs that have you concerned. Caio Almeida also has a pretty good list on his <a href="https://github.com/monperrus/crawler-user-agents" target="_blank" rel="nofollow noopener">crawler-user-agents</a> GitHub project.</p><h2 id="summary">Summary</h2><p>There are hundreds of different web crawlers out there, but hopefully, you are now familiar with a couple of the more popular ones. Again you want to be careful when blocking any of these as they could cause indexing issues. It is always good to check your web server logs to see how often they are crawling your site.</p><p>What's your favorite web crawler? Let us know in the comments below.</p> https://www.keycdn.com/blog/web-crawlers#comments The KeyCDN Guide To Website Migration https://www.keycdn.com/blog/website-migration Thu, 02 Jun 2022 06:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/website-migration <img src="https://www.keycdn.com/img/blog/website-migration.png" alt="The KeyCDN Guide To Website Migration"><p>Website migration refers to the process of moving your website from one hosting provider to another. It can be a challenging process with lots of potentials for things to go wrong, but it doesn't have to be. This article will go over the steps you need to take to migrate your website with minimal fuss or downtime. First, let's talk about why you might want to do such a thing:</p><h2 id="introduction-to-website-migration">Introduction to website migration</h2><p>As time goes on, companies will change, technology will improve, and website hosting environments will become more secure, faster, and user-friendly. Eventually, you'll face the challenge of migrating your website simply because you'll outgrow your current hosting environment, or it will become less secure. Not to mention, operating systems and hardware are updated over time which can also lead to website downtime if not properly configured. In those instances, you will need to pick up your existing tech stack and move it, upgrade it, or merge it. This is called a website migration.</p><h2 id="reasons-for-website-migration">Reasons for website migration</h2><h3 id="you-re-unhappy-with-your-current-cms">You're unhappy with your current CMS</h3><p>Having an outdated platform makes it very difficult for your visitors to navigate it, almost always equating to a loss in sales. If you aren't getting the performance you need from your current framework or CMS, it might be time for a change. That being said, there may also be options that allow you to update and improve your current framework without migrating it.</p><h3 id="your-business-got-acquired-and-you-need-to-merge-your-site-with-theirs">Your business got acquired and you need to merge your site with theirs</h3><p>A common reason for website migrations is when one company acquires another. The two companies will need to merge their websites and content into a single site in these cases.</p><h3 id="you-are-changing-your-site-s-current-structure-or-design">You are changing your site's current structure or design</h3><p>This isn't something you should do on a whim, but if major reworks to your website can increase conversion rates, then it might be worth the time to migrate your site.</p><h3 id="you-are-adding-a-mobile-site">You are adding a mobile site</h3><p>When considering Google's mobile-first indexing (and the large amount of mobile traffic to your site), implementing a mobile-first platform is one of the best things you can do for your business.</p><h3 id="you-need-to-move-from-http-to-https">You need to move from HTTP to HTTPS</h3><p><a href="https://www.keycdn.com/blog/http-to-https">Migrating from HTTP to HTTPS</a> certainly requires you to know this process. Not only are your URLs changing, but the entire infrastructure of how you handle traffic needs to be migrated over to support secure certificates on all connections.</p><h3 id="you-want-to-change-your-domain-name">You want to change your domain name</h3><p>Whether it is a whole rebrand or simply getting your hands on a new URL, you are going to have to move your website in order to do so.</p><h2 id="what-you-need-for-a-successful-website-migration">What you need for a successful website migration</h2><p>Before you even start migrating your website, there are a few things that you need to take care of. Here is a checklist:</p><h3 id="the-pre-migration-checklist">The pre-migration checklist</h3><p>Let your visitors know that you plan to migrate your website - Put up a banner announcing the migration and include a date by which everything will be completed. This will let your visitors know in advance what is happening and when they can expect the transition to be complete.</p><p><strong>Check your DNS settings</strong> - Make sure that your <a href="https://tools.keycdn.com/dig" target="_blank" rel="noopener">DNS settings</a> are correct and that all of your domain names are pointing to the proper IP address and server.</p><p><strong>Check your server</strong> - Make sure that your hosting provider provides you with a stable enough environment for traffic after you make these changes to your DNS settings. Otherwise, it could cause downtime or slow speeds during migration.</p><p><strong>Make sure you have backups</strong> - If there's one thing we can't stress enough, it's to make sure you have backups of your website. If something goes wrong during migration (or even after), you'll be able to quickly restore your site without any data loss.</p><h2 id="the-migration-process">The migration process</h2><p>Now that we've gone over some of the things you need to do before migrating your website let's go over the actual process.</p><h3 id="project-planning">Project planning</h3><p>The first step in any migration is to plan out the project. This includes figuring out what you want to migrate, how you're going to do it, and what could go wrong as well as creating wireframes for the migration. Here are a few key things to think about:</p><p><strong>What data do you need to migrate?</strong> - Not everything on your website needs to be migrated. It is best to keep large amounts of data off-site. This includes your CMS configuration and any third-party integrations with other companies/apps (like CRMs).</p><p><strong>What do you need to change?</strong> - Take a look at how much content there is on the website that needs to be migrated over. If it's a lot, you might want to consider doing a staged migration where only a portion of the website is moved over at a time.</p><p><strong>What are the risks?</strong> - Migration can be very risky. Things can go wrong, and it's important to have contingencies in place should something happen. Test your migrations before putting them into production and always have backups handy.</p><h3 id="preparation">Preparation</h3><p>Once you have a plan in place, it's time to start preparing your website for migration. This includes making changes to your DNS settings, setting up redirects, and creating backups.</p><p><strong>DNS Preparation</strong> - The first step is to update your DNS records with the new information. This will include the IP address of your web server and any subdomains you might be using.</p><p><strong>Redirects</strong> - In order to keep your visitors from getting lost during the migration, you'll need to set up redirects from your old URLs to the new ones. This can be done with a simple .htaccess file or through your web server's configuration files.</p><p><strong>Backups</strong> - The last thing you want to do is lose all of your hard work during the migration. You should set up a backup schedule for your website before starting any changes to avoid this.</p><p><strong>Data migration</strong> - The last step in preparation is to actually migrate over the data that's on your old site into the new one. This includes everything from content and images to third-party integrations.</p><h3 id="testing-and-launch">Testing and launch</h3><p>Once everything is prepared, it's time to start testing. This includes doing a dry run of the migration process as well as testing your backups and redirects.</p><p><strong>Migration</strong> - The actual migration process can be done in a few different ways. Here are a few common methods:</p><p><strong>FTP/SFTP upload</strong> - This is the most common way to migrate data. You can use a tool like FileZilla or Cyberduck to easily upload your files to the new server.</p><p><strong>CVS</strong> - If you're using a CMS like WordPress, you can export your content as a CVS file and import it into the new installation.</p><p><strong>SQL</strong> - Another common way to move data is by using an SQL dump. This can be used to export your data from a database or import it into a new one.</p><p><strong>Third-party integrations</strong> - Finally, you may have content on your website that is being pulled in from other sources. If this data needs to be updated (for example, Twitter information), make sure it gets migrated over before the launch so everything runs smoothly.</p><h3 id="launch-day">Launch day</h3><p>Once everything has been tested and approved, all that is left is to launch the new website. The best way to do this is by redirecting your old content over to the new one and updating any out-of-date links or references.</p><p>While launching a brand new website can be an exciting time, it's important not to let that excitement make you forget about maintenance! Once your site is live, make sure to keep an eye on things and update it as needed.</p><p>While your new site replaces the old one, there is a good chance that your site will be down. When this happens, make sure not to panic. Instead, a 503 server unavailable response should pop up, telling both visitors and search engine crawlers that the website is temporarily unavailable.</p><h3 id="post-migration">Post-migration</h3><p>Once the migration is complete, there are still a few things you need to do in order to finish the process:</p><p>First, make sure that you have updated all your links and references to the new site. This includes anything from your email signature to social media profiles.</p><p>Second, set up a 301 redirect from the old website to the new one. This will ensure that any traffic to the old site is automatically redirected to the new one.</p><p>Finally, keep an eye on your analytics, including crawl stats and server logs. This will allow you to keep an eye on your rankings and prevent unwanted penalties.</p><p>Remember, measuring your overall site migration performance doesn't need to happen right away; typically, you won't see significant results until around 2-3 months after launch. Once you have waited that amount of time, you can go back in and optimize your website performance in any way that you need to.</p><h2 id="final-thoughts">Final thoughts</h2><p>Website migration is a massive process that should not be taken lightly. Since no two are the same, there is much room for error. Make sure you do your research and plan everything out completely before moving forward. Once your new site is up and running, make sure to keep an eye on things like analytics and rankings. This will ensure that the transition is as smooth as possible. Finally, don't forget about the maintenance once the website launch has been completed. While it's a good idea to celebrate, you still need to keep things running as smoothly as possible.</p> https://www.keycdn.com/blog/website-migration#comments Single-Page Applications: A Comprehensive Guide https://www.keycdn.com/blog/single-page-application Thu, 05 May 2022 06:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/single-page-application <img src="https://www.keycdn.com/img/blog/single-page-application.png" alt="Single-Page Applications: A Comprehensive Guide"><p>Single-page applications (SPAs) are a hot topic in the web development world. They're touted as the future of rich web experiences, and many developers have been quick to jump on board. However, if you're not careful, they can quickly become challenging to maintain - and even more importantly, it can be hard for users without JavaScript enabled to use your site. This blog post will discuss what single-page applications are and why they've become so popular, how SPAs work, their advantages and disadvantages, and finally, some guidelines about how best to create them.</p><h2 id="what-is-a-single-page-application">What is a single-page application?</h2><p>Whether you know it or not, you are almost certainly an avid user of single-page applications. SPAs are websites that load all their content into a single page instead of having to reload the entire page every time you navigate to a new section. This makes for a much smoother browsing experience and no more waiting for your website to refresh each time you click on a link.</p><p>SPAs work by using a technology called <a href="https://www.keycdn.com/support/ajax-programming">AJAX</a> (Asynchronous JavaScript and XML) to load small bits of data from the server as needed. This means that only the content that has changed since your last visit is loaded, which drastically reduces the amount of data that needs to be transferred - and hence, the time it takes for your page to load.</p><p>It also has some other benefits: since all the code is loaded in one go, it's much faster and simpler to update a single-page application than a traditional website. This is especially true when using <a href="https://www.keycdn.com/blog/javascript-libraries">JavaScript libraries</a> like React or Angular, which only require you to redeploy your code when you make changes - instead of refreshing the entire page, which can take minutes on a large website.</p><h2 id="the-advantages-of-spas">The advantages of SPAs</h2><p>As with anything, there are pros and cons to using single-page applications. Here are some of the main advantages:</p><h3 id="speed-and-responsiveness">Speed and responsiveness</h3><p>One of the best things about SPAs is how fast and responsive they are. Since only the changed portions of the page need to be refreshed, you'll see much less loading time when navigating from section to section. This is very important because, according to <a href="https://ai.googleblog.com/2009/06/speed-matters.html" target="_blank" rel="noopener">Google research</a>, taking more than 200 milliseconds to load can dramatically impact sales and conversion.</p><h3 id="improved-user-experience">Improved user experience</h3><p>Since SPAs are so smooth and responsive, users tend to have a better experience browsing them. This is especially true on mobile devices, where waiting for a page to reload can be very frustrating. For example, the <a href="https://www.keycdn.com/" target="_blank" rel="noopener">KeyCDN homepage</a> allows you to search through blogs, scroll down, and find multiple pages worth of information without constantly loading new landing pages.</p><h3 id="ease-of-development">Ease of development</h3><p>Developing a SPA is much simpler than creating a traditional website. With all the code loaded in one place, it's much easier to make changes and updates. You also don't need to worry about page load time or optimize your code for performance since that's all taken care of by the SPA framework.</p><h2 id="the-disadvantages-of-spas">The disadvantages of SPAs</h2><p>Of course, nothing is perfect, and single-page applications come with their own set of disadvantages:</p><h3 id="javascript-dependency">JavaScript dependency</h3><p>The main problem with SPAs is that they require JavaScript to work. This means you need to make sure your website works for people who have disabled their browser's built-in support and those using a device without an up-to-date version of the language installed (for example, Android devices running older versions of Android).</p><h3 id="scalability-and-resilience">Scalability and resilience</h3><p>Since all of a SPA's functionality is contained in one page (and its sub-pages), it can be difficult to scale up or down as needed. If your website experiences a sudden surge in traffic, a SPA may not be able to handle the load and will crash. This is because SPAs rely on a limited number of servers to serve all their code, whereas MPAs can use any number of servers without affecting the user experience.</p><h3 id="seo-optimization">SEO optimization</h3><p>Since <a href="https://asperbrothers.com/blog/seo-in-pwa/" target="_blank" rel="nofollow noopener">optimizing progressive web applications</a> is much more complex than normal multi-page apps because of their single-page architecture, MPAs often have better SEO optimization capabilities. This is because you can have multiple pages rank for keywords as opposed to one. This is especially important if you're using your website for marketing purposes and want to ensure that it appears in search engine results (and not just on social media).</p><h3 id="browser-history">Browser history</h3><p>Since your actions in a SPA are all tracked on the same page, your browser's history will only show the last URL you visited. This can be confusing for users who are used to being able to revisit previous pages by clicking on the Back button.</p><h2 id="when-to-use-spas">When to use SPAs</h2><p>In the end, whether you should use a SPA or not depends on your specific requirements. If speed and responsiveness are essential to your core business value proposition, it's definitely worth considering using a SPA as part of your marketing strategy. Suppose you're mainly concerned about user experience and ensuring that mobile users have a consistent experience across all your pages. In that case, a SPA framework might also be the right choice for you. It is also suitable for dynamic and interactive platforms that do not have high data volumes. These characteristics make SPAs an excellent choice for social networks, closed communities, and SaaS platforms. There are, however, many instances where an MPA would be better.</p><h2 id="what-is-an-mpa">What is an MPA?</h2><p>A multi-page application (MPA) is a website where each page is loaded independently instead of using a single-page application. Instead of all the code is loaded in one place, it's spread out across multiple pages. When picturing a multi-page application, imagine any website with multiple pages, such as Amazon or other online stores.</p><p>This approach has been around for much longer than SPAs and is still the most common way to build websites. It has several advantages, including:</p><h3 id="scalable-and-resilient-code">Scalable and resilient code</h3><p>Since each page is loaded on its own, it's easier to debug problems with an MPA. If the application crashes or experiences a bug of some sort, users can simply go back to previous pages without losing any data (the same cannot be said for SPAs). It also makes it easier to scale your website up or down as needed since you're not limited by the amount of code that can be loaded on a single page.</p><h3 id="easier-for-older-browsers">Easier for older browsers</h3><p>Since MPAs don't rely on JavaScript, they are more compatible with older browsers that may not have the latest language updates installed. This is especially important if you have many users still using older browsers.</p><h3 id="browser-history-1">Browser history</h3><p>Since an MPA doesn't rely on JavaScript, it also maintains browser history similarly to traditional websites. This means that users can revisit previous pages by clicking on the Back button, just like they're used to.</p><h2 id="when-to-use-mpas-instead">When to use MPAs instead</h2><p>Although SPAs provide a much better user experience than MPAs, they're not always the best choice. MPAs work great for e-commerce sites, community sites, marketplaces, and business catalogs. They don't work well for social networks or websites that rely heavily on JavaScript.</p><h2 id="best-practices-in-single-page-applications">Best practices in single-page applications</h2><p>There are a few best practices that most SPA frameworks recommend:</p><h3 id="cache-dom-elements">Cache DOM elements</h3><p>One of the best ways to improve performance is to cache DOM elements - that is, store them in a local database to be accessed quickly without reloading from the server. This can be done using libraries like React's own memory cache or Angular's $cacheFactory service.</p><h3 id="reduce-network-requests">Reduce network requests</h3><p>Another way to speed up your application is to reduce the number of network requests it makes. You can do this by bundling files together, using caching, or loading only the necessary resources for a given page.</p><h3 id="use-server-side-rendering">Use server-side rendering</h3><p>If you're having trouble with performance on mobile devices, you can use server-side rendering to generate the initial HTML code for your application. This allows you to send pre-generated HTML pages to devices that don't have JavaScript enabled and also ensures better load times since the server can prep all content before sending it down.</p><h3 id="cache-static-pages">Cache static pages</h3><p>If you're using a SPA framework like Angular or React, there are ways to cache static elements of your website so they can be accessed quickly without having to load from the server. This is especially important for pages that don't often change, like your website's header and footer.</p><h3 id="use-a-cdn">Use a CDN</h3><p>Using a <a href="https://www.keycdn.com/support/how-does-a-cdn-work">content delivery network</a> (CDN) can also improve performance by caching static files closer to your users. KeyCDN, for example, offers edge servers around the world that can serve your files quickly and reduce latency.</p><h2 id="the-bottom-line">The bottom line</h2><p>Single-page applications are a great way to improve the user experience of your website. They offer many advantages over traditional multi-page applications, including faster load times, better compatibility with older browsers, and an improved user interface. However, they're not always the best choice for every type of website. When in doubt, it's best to consult a professional web developer to see which one is right for you.</p> https://www.keycdn.com/blog/single-page-application#comments WordPress Optimization in 5 Easy Steps https://www.keycdn.com/blog/wordpress-optimization Wed, 20 Apr 2022 09:30:00 +0000 Ben Eaton https://www.keycdn.com/blog/wordpress-optimization <img src="https://www.keycdn.com/img/blog/wordpress-optimization.png" alt="WordPress Optimization in 5 Easy Steps"><p>If you've noticed problems on the horizon as your WordPress site has grown, you're experiencing problems related to popularity! We congratulate you on drawing and retaining visitors, but that popularity may be short-lived if any or all of the following apply to your site:</p><ul><li>Shamefully slow loading times that would frustrate the average user</li><li>Errors getting thrown left and right by WordPress</li><li>A cluttered Dashboard that you try to avoid looking at whenever possible</li><li>No meaningful WordPress site optimization has been performed (yet)</li></ul><p>If any of these apply to you, all hope is not lost! You'll have to act quickly if you want to keep your newfound Internet fame and build on your visitor base. The time to take action is now, not once your business's Internet presence has been shuttered and your site is unsecure, unusable, and has horrible uptime metrics.</p><p>Want to avoid this all-too-common digital fate? Read on!</p><p><a href="https://blog.hubspot.com/marketing/page-load-time-conversion-rates" target="_blank" rel="nofollow noopener">HubSpot summarized 12 case studies</a> revealing that for every additional second of page load time, your website loses out on 4.42% of possible conversions. In other words, a single extra second of load-time due to an unoptimized site could subtract over 4% of your gross income!</p><p><a href="https://websitesetup.org/create-blog/" target="_blank" rel="nofollow noopener">Created a blog</a> with WordPress with your blood, sweat, and tears? Not so keen on kissing those hard-earned conversions goodbye? If so, you're in the right place!</p><p>By following the five simple steps below, you can do a 180-degree turn and set your site up for success.</p><h2 id="1-start-caching-with-cache-enabler-plugin">1. Start caching with Cache Enabler plugin</h2><p>One of the biggest WordPress optimization game-changers is a caching plugin. Without a caching plugin, your WordPress site will run through its computationally expensive PHP scripts every time. While it might be necessary to run through these for rich, dynamic content, we certainly don't need to bog our server down by running these scripts for pretty standard, static HTML pages.</p><p>On the other hand, when we enable caching, all static elements of your site are rendered ahead of time. When a visitor comes to your site, it'll load as fast as their connection (and latency) allow. Your server would only need to crank out some computational power for dynamic content. This is both a money-saver and site optimizer!</p><p>You must use a caching plugin on your website. We personally recommend <a href="https://wordpress.org/plugins/cache-enabler/" target="_blank" rel="noopener">Cache Enabler</a>. Disclaimer: we may be a tad biased because we did develop the plugin, but we're certainly proud of how this alone has turned around the fate of so many WordPress sites!</p><h2 id="2-compress-images-with-optimus">2. Compress images with Optimus</h2><p><a href="https://wordpress.org/plugins/optimus/" target="_blank" rel="noopener">Optimus</a> is another great WordPress speed optimization plugin. Blog owners often toss a .jpg file that's a few megabytes as an icon on a page and think nothing of it. As you add more and more unoptimized images, you create a higher server load and longer loading time for each user.</p><p>Optimus handles this nuisance for you and automatically reduces the size of the images you upload to your WordPress site. The great thing about Optimus is that it maintains your image's visual quality even though the file size is reduced. That equals lower hosting bills and happier visitors.</p><p>In fact, Optimus is developed by KeyCDN - so you know it's good!</p><p>We get that you need to see things like this (in a quite literal sense) before you believe them. That's why we offer a free version to let you tinker with images 100 KB and less and see the difference for yourself. To ensure our developers don't starve, we have <a href="https://optimus.io/en/#pricing" target="_blank" rel="noopener">premium options with full functionality</a> that start at just $29!</p><h2 id="3-choose-a-good-wordpress-theme">3. Choose a good WordPress theme</h2><p>With so many themes to choose from, it's easy to get lost in the shuffle. Choosing a WordPress theme should be well thought out and researched! Every element you see in a theme impacts your website's performance and overall speed. Therefore, it's essential to examine whether the theme was developed with performance in mind.</p><p>When choosing your WordPress theme, we recommend that you decide from the start to pick a theme that includes only the features you need. Or, you can select a theme that offers a wider range of features, but in this case, you should ensure that you can disable the unnecessary or useless features.</p><p>We have pre-screened for you from the jungle of themes. With the themes listed below, you certainly can't go far wrong:</p><ol><li><a href="https://themeisle.com/themes/neve/" target="_blank" rel="nofollow noopener">Neve</a></li><li><a href="https://oceanwp.org/" target="_blank" rel="nofollow noopener">OceanWP</a></li><li><a href="https://generatepress.com/" target="_blank" rel="nofollow noopener">GeneratePress</a></li><li><a href="https://wpastra.com/" target="_blank" rel="nofollow noopener">Astra</a></li><li><a href="https://pcm.wordpress.org/themes/customify/" target="_blank" rel="nofollow noopener">Customify</a></li></ol><p>Each of the listed themes is actively updated and well supported. They all have a free version but offer an update to a premium version.</p><p>Moreover, each of them is fully compatible with WooCommerce (by far the most popular e-commerce solution for WordPress), and you can also be sure that the above themes are fast and lightweight.</p><h2 id="4-use-autoptimize">4. Use Autoptimize</h2><p><a href="https://wordpress.org/plugins/autoptimize/" target="_blank" rel="noopener">Autoptimize</a> is a free WordPress optimization plugin that addresses the needs of modern WordPress websites with numerous optimization features. Besides basic features like CSS and HTML optimization, and the ability to specify preload and preconnect directives, Autoptimize has everything you need to optimize the front-end performance of your WordPress website.</p><p>Autoptimize has more than 1 million active installs and is continuously updated with new features and bug fixes.</p><p>Also, a significant advantage is that Autoptimize is a pure optimization plugin and does not cache HTML pages. This means that it is compatible with all web hosts. Therefore, if you value performance, it is a good idea to complement Autoptimize with our <a href="https://wordpress.org/plugins/cache-enabler/" target="_blank" rel="noopener">Cache Enabler</a>.</p><h2 id="5-leverage-a-cdn-content-delivery-network">5. Leverage a CDN (content delivery network)</h2><p>Let's say your WordPress site is housed in a data center in the United States. This would mean that every visitor would need to send requests to the United States and receive responses from the United States. This would make sense if it were a site for a local or regional business in the United States. However, it makes absolutely no sense if you're targeting an international audience; the latency for Australian and European users, for example, would likely be bad enough to turn away potential business.</p><p>However, a <a href="https://www.keycdn.com/what-is-a-cdn">content delivery network</a> (CDN) will replicate your website in multiple data centers across the globe. When a user jumps to your site, the CDN will use their IP address to determine their approximate location and serve content from the closest server, ensuring relatively equal access to your site around the globe.</p><figure><img src="https://www.keycdn.com/img/blog/content-delivery-network-diagram.png" alt="content delivery network diagram"></figure><p>KeyCDN offers an <a href="https://www.keycdn.com/pricing">inexpensive, pay-as-you-go CDN service</a> you can check out.</p><p>If you're looking to quickly deploy a top-notch, affordable CDN for your WordPress site, KeyCDN has you covered! We launched a new lightweight plugin called <a href="https://wordpress.org/plugins/cdn-enabler/" target="_blank" rel="noopener">CDN Enabler</a>. It's freely available, and you'll be ready to roll in minutes.</p><h2 id="over-to-you">Over to you</h2><p>If you've been scouring the web for tips and tricks on WordPress optimization, we're all ears. Have shout-outs to particular products? Any tiny tips that could make a huge difference?</p><p>Share your thoughts in the comments below!</p> https://www.keycdn.com/blog/wordpress-optimization#comments Finding the Best Royalty-Free Images for Your Website https://www.keycdn.com/blog/royalty-free-images Mon, 11 Apr 2022 10:00:00 +0000 Martin Williams https://www.keycdn.com/blog/royalty-free-images <img src="https://www.keycdn.com/img/blog/royalty-free-images.png" alt="Finding the Best Royalty-Free Images for Your Website"><p>If you are a freelancer, online business owner, or blogger, one of the most challenging things about running your blog, website, or other forms of content delivery is finding the right pictures and making sure they are free to use. Since high-quality images are the <a href="https://www.keycdn.com/blog/ecommerce-conversion-rate">best way to optimize your conversion rates</a>, you want eye-catching images, and that will boost engagement, but they have to be affordable and legal as well. In this article, you will learn what makes an image royalty-free, the different types of licenses to choose from, and how you can find the perfect picture for your needs in seconds.</p><h2 id="royalty-free-licenses-and-terminology">Royalty-free licenses and terminology</h2><h3 id="royalty-free">Royalty-free</h3><p>This means that you can use the image or intellectual property repeatedly without paying any royalty or licensing fees. Keep in mind that a royalty-free image may not necessarily be free for commercial use. The distinction is that with royalty-free images, you would only need to pay once for the image and use it unlimited times. This isn't the case if you opt for a free license; however, some sites will allow usage for specific projects indefinitely (such as personal blogs) without paying royalties.</p><h3 id="creative-commons">Creative commons</h3><p><a href="https://creativecommons.org/licenses/?lang=en" target="_blank" rel="noopener">Creative commons licenses</a> allow you to use the image for free, sometimes only as long as you include attribution. The license is specific to how it can be used and what type of credit must be given, so make sure to read the license carefully before using an image.</p><h4 id="creative-commons-attribution-only">Creative commons - attribution only</h4><p>This type of creative commons license allows you to use the image as long as attribution is given, whether that be a link back or proper credit within the content itself. The downside with this option is that it doesn't allow for commercial use and can cause problems if you are using the image in an online store, for example.</p><h4 id="creative-commons-attribution-no-derivatives">Creative commons - attribution - no derivatives</h4><p>This type of creative commons license is similar to the attribution-only license except that it does not allow any changes or alterations to be made. The upside with this option is that there are no copyright violations when sharing content on social media.</p><h4 id="creative-commons-attribution-noncommercial">Creative commons - attribution - noncommercial</h4><p>This type of creative commons license allows you to use the image as long as attribution is given, and it may not be used for commercial purposes. Keep in mind that this means no selling or distributing, even if money isn't being made; however, there are no copyright violations when sharing content on social media.</p><h4 id="creative-commons-attribution-noncommercial-share-alike">Creative commons - attribution - noncommercial - share alike</h4><p>This type of creative commons license allows you to use the image as long as attribution is given, and it may not be used for commercial purposes, but others are free to alter or change the content. The upside with this option is that there are no copyright violations when sharing content on social media. With the proper modifications, you could potentially come up with an image that fits your needs better than what's already available.</p><h4 id="creative-commons-attribution-noncommercial-no-derivatives">Creative commons - attribution - noncommercial - no derivatives</h4><p>This type of creative commons license allows you to use the image as long as attribution is given, and it may not be used for commercial purposes. Keep in mind that this means no selling or distributing, even if money isn't being made; however, there are no copyright violations when sharing content on social media.</p><h3 id="public-domain">Public domain</h3><p>This means that the image is free for anyone to use, edit, or distribute without giving any credit. It's worth noting that some public domain images may still require attribution if they have been adapted from another source.</p><h3 id="attribution">Attribution</h3><p>This means that the image must be attributed with a link back to where it came from or some form of sourcing or credit. If you're sharing an image on your social media, this is generally what you'll want to use, so there are no copyright violations when using content online.</p><h3 id="commercial-use">Commercial use</h3><p>This means that the image is free for anyone to use, edit, or distribute; however, if money is being made from it (whether directly or indirectly), you will need a commercial license.</p><h3 id="membership">Membership</h3><p>This type of royalty-free image license is offered to those who join a particular membership site, which allows them access to additional images and content. These types of licenses may be suitable for someone looking for more than what's available on regular sites since they will need to pay an annual fee as part of the licensing agreement. <a href="https://www.shutterstock.com" target="_blank" rel="nofollow noopener">Shutterstock</a> is the most popular example of this type of royalty-free image platform.</p><h2 id="finding-royalty-free-images">Finding royalty-free images</h2><p>There are several sites that offer royalty-free photos. Here are some of the best:</p><h3 id="hahahugoshortcode-s2-hbhb"><a href="https://stocksnap.io/" target="_blank" rel="nofollow noopener">Stocksnap.io</a></h3><p>Stocksnap.io is one of the best sites for finding royalty-free pictures because of its large, high-resolution selection. The site even tracks your downloads to suggest more topically relevant options for your needs over time.</p><h3 id="hahahugoshortcode-s3-hbhb"><a href="https://unsplash.com/" target="_blank" rel="nofollow noopener">Unsplash</a></h3><p>Unsplash is another excellent site for finding royalty-free images because it is free to use. It only offers around 300,000 images from around 50,000 contributors, so the platform doesn't offer as much volume. However, the photos are guaranteed to be high-resolution.</p><h3 id="hahahugoshortcode-s4-hbhb"><a href="https://burst.shopify.com/" target="_blank" rel="nofollow noopener">Burst</a></h3><p>Burst is the royalty-free image site from Shopify. Each of their images is under a creative commons zero license, meaning that they are entirely free to share or use with no attribution required.</p><h3 id="hahahugoshortcode-s5-hbhb"><a href="https://www.pexels.com/" target="_blank" rel="nofollow noopener">Pexels</a></h3><p>The website aggregates freely usable photos from other sources and thus serves as a search engine. It also features one of the easiest search tools of all royalty-free image platforms.</p><h3 id="hahahugoshortcode-s6-hbhb"><a href="https://wordpress.org/openverse/" target="_blank" rel="nofollow noopener">Openverse</a></h3><p>Openverse is part of the WordPress open source project. Find images from various sources and they are still expanding.</p><h2 id="niche-royalty-free-platforms">Niche royalty-free platforms</h2><p>There are also many more niche-specific royalty-free image sources such as:</p><h3 id="hahahugoshortcode-s7-hbhb"><a href="https://gratisography.com/" target="_blank" rel="nofollow noopener">Gratisography</a></h3><p>This site is characterized by the most unique and interesting images available for free. They can't compete with some of the more prominent platforms regarding the volume of images they have to offer, but that isn't their main goal either. This is the site to use if you are looking for something more unusual or quirky.</p><h3 id="hahahugoshortcode-s8-hbhb"><a href="https://www.flickr.com/creativecommons/" target="_blank" rel="nofollow noopener">Flickr creative commons</a></h3><p>This site is excellent if you're looking for photos from a specific photographer or want to browse pictures tagged by category (like food, nature, and places). You'll need to make an account with Flickr before using the tool; however, it's completely free and doesn't require attribution when sharing images on social media.</p><h3 id="hahahugoshortcode-s9-hbhb"><a href="https://nos.twnsnd.co/" target="_blank" rel="nofollow noopener">New old stock</a></h3><p>This site is a collection of vintage and black-and-white images guaranteed to be free from copyright. The photos range in theme and style, making them perfect for vintage-inspired content or projects where historical context is important.</p><h3 id="hahahugoshortcode-s10-hbhb"><a href="https://pixabay.com/" target="_blank" rel="nofollow noopener">Pixabay</a></h3><p>Pixabay is a great source for royalty-free vector images as well as other forms of content such as videos that can be used for your site.</p><h3 id="hahahugoshortcode-s11-hbhb"><a href="https://startupstockphotos.com/" target="_blank" rel="nofollow noopener">Startup stock photos</a></h3><p>This website is designed for startup founders and bloggers looking for content. It features a collection of high-quality, curated images to use in presentations or blog posts related to entrepreneurship and industry events.</p><h3 id="hahahugoshortcode-s12-hbhb"><a href="https://www.foodiesfeed.com/" target="_blank" rel="nofollow noopener">Foodiesfeed</a></h3><p>As the name suggests, this website is specifically designed for food bloggers and those in the culinary industry to use as a resource. It offers lots of high-quality images from professional photographers, meaning that you can be sure they're up to par with your content.</p><h2 id="using-royalty-free-image-platforms-the-right-way">Using royalty-free image platforms the right way</h2><p>If you're not careful about how you use these types of photos on your site, it's easy for people visiting to think that you're copying their work. While you may use these images without giving credit, it's easy to give the impression that your blog post content is unoriginal.</p><p>When using royalty-free photos on your site, especially if they are not credited properly or inconsistently with other sites, there is a risk of getting penalized for copyright infringement by Google. That's why it is crucial to make sure you use these images correctly.</p><p>Don't just copy and paste an image URL into your post content or use the file name as the picture caption on Pinterest without some type of attribution first. Google will penalize sites that don't give proper credit for their imagery, so always try to find a way to work the author's name into your text.</p><p>All of these platforms offer attribution tools that you can use directly in WordPress or on other content management systems (CMS) such as Blogger and Tumblr. If you don't want to worry about implementing those, however, there are simple ways around it.</p><p>For these reasons, you should almost always try to credit the image to its creator, but if you can't find that information or it isn't available on a specific site, there are other ways around it. In some cases, royalty-free images will come with their attribution code already embedded in them from the stock photo provider.</p><h2 id="summary">Summary</h2><p>When it comes to using royalty-free images on your blog, Google is very strict about making sure you're doing it correctly. It can be tempting to take the easy way out and skip over attribution altogether, but that's not a risk worth taking.While there are a lot of resources that offer royalty-free images in a wide variety of styles and themes, not all of them are ideal for every type of blog post content. Take the time to find an image platform (or several) that works best with your needs so you can build up a collection without worrying about copyright infringement penalties from Google or the content's creators.</p> https://www.keycdn.com/blog/royalty-free-images#comments KeyCDN Launches Country Based Caching https://www.keycdn.com/blog/country-based-caching Thu, 03 Mar 2022 10:00:00 +0000 Sven Baumgartner https://www.keycdn.com/blog/country-based-caching <img src="https://www.keycdn.com/img/blog/country-based-caching.png" alt="KeyCDN Launches Country Based Caching"><p>KeyCDN supports now country code based caching of your assets. Our edge servers derive the two-letter country code from the client IP address, that code is used for the cache key and forwarded to the origin server. Each time the client comes from a different country creates a dedicated cache entry.</p><h2 id="why-is-country-based-caching-useful">Why is country based caching useful?</h2><p>This is especially useful if your website should provide different content for countries, such as legal disclaimers. KeyCDN country based caching allows you to deliver different versions of your content that comply with legal requirements, depending on which country your website visitor is located in.</p><h2 id="configure-caching-depending-on-the-viewer-s-location">Configure caching depending on the viewer's location</h2><p>You can enable the Cache Key Country option in your Zone settings. The country code is derived from the client IP address. This will add the <code>X-Country-Code</code> header to the origin request with the two-letter country code (<a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank" rel="noopener">ISO 3166-1 alpha-2</a>).</p><p>Here is an example of what a request would look like. Suppose an image with the URL <code>https://example-1.kxcdn.com/path/to/example.jpg</code> is viewed from the US:</p><pre><code class="language-none">GET /path/to/example.jpg HTTP/1.1Host: your_origin_hostX-Forwarded-Host: example-1.kxcdn.comX-Forwarded-For: 1.2.3.4X-Forwarded-Scheme: httpX-Pull: KeyCDNX-Country-Code: USConnection: closeAccept: */*User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36Accept-Language: en-US,en</code></pre><p>There will be different variants in the cache for the same asset. Here an example list:</p><pre><code class="language-none">/path/to/example.jpgUS/path/to/example.jpgDE/path/to/example.jpgFR...</code></pre><p>Please find <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank" rel="noopener">here</a> a list of the country codes.</p><p>The following nginx snippet gives you an idea how to use this on your server:</p><pre><code class="language-none">location / { if ($http_x_country_code ~* &quot;US&quot;) { rewrite ^(.*)$ /us/$1; } ...}</code></pre><p>Keep in mind using this feature will decrease the cache hit ratio (CHR) as there are more variants in the cache on our edge servers.</p><p>The Cache Key Country option is a neat way to address country based caching policies without adding complex redirects in your backend. Country based caching can now be enabled in your KeyCDN Zone settings at no additional cost.</p> https://www.keycdn.com/blog/country-based-caching#comments A Slow Website - Time to First Byte (TTFB) https://www.keycdn.com/blog/a-slow-website-time-to-first-byte-ttfb Fri, 25 Feb 2022 08:30:00 +0000 Sven Baumgartner https://www.keycdn.com/blog/a-slow-website-time-to-first-byte-ttfb <img src="https://www.keycdn.com/img/blog/a-slow-website-time-to-first-byte-ttfb.png" alt="A Slow Website - Time to First Byte (TTFB)"><p>There are many reasons why your website may be slow. <a href="https://www.keycdn.com/support/what-is-ttfb">Time to first byte</a> (TTFB), respectively time to last byte (TTLB), for the initial HTML document is one explanation we want to focus on in this post.</p><p>In most cases, we talk about how to optimize our frontend, such as minimizing CSS or compressing images. This is an essential aspect of having a fast loading website, but there are good reasons to optimize the backend. Just imagine that there is a slow database query that delays the page download. Other scenarios are that your origin server reaches its limit due to inefficient code execution and slows down.</p><h2 id="what-is-ttfb">What is TTFB?</h2><p>TTFB, which stands for <a href="https://en.wikipedia.org/wiki/Time_To_First_Byte" target="_blank" rel="nofollow noopener">time to first byte</a>, is the amount of time it takes from when a client makes an HTTP request to receiving its first byte of data from the web server. During this period, the following operations take place:</p><ul><li>DNS lookup: Determination of the IP address of the web server by resolving the domain</li><li>SSL handshake: Establishing the encrypted connection</li><li>Web server processing: Processing of the request by the web server</li><li>TCP Answer: Sending the first data packet via the TCP protocol</li></ul><p>This usually happens in well under one second. Typical TTFB values are between 200 and 500 milliseconds. If the TTFB turns out to be higher than 500 ms, this can have various causes. For example:</p><ul><li>High latencies between the DNS servers</li><li>High load on the web server</li><li>Problems in the infrastructure of the web server (hardware/software)</li></ul><p>High latencies can occur when the distance between the user's location and the DNS server resolves the domain name or the server. Relevant for the choice of the data center should be the location of the target group of the website.</p><p>The correct understanding of the term &quot;latency&quot; is important here: It describes the path that a data packet takes from the web server to the user (computer, smartphone, etc.). Since TTFB only measures the arrival of the first byte, the bandwidth - i.e., how many data packets can be transmitted along this path - is insignificant for the measurement.</p><h2 id="does-it-make-sense-to-look-at-the-ttfb">Does it make sense to look at the TTFB?</h2><p>In our eyes, TTFB is no longer <strong>the only relevant parameter</strong> nowadays, as its significance is limited. A slower TTFB does not necessarily lead to a slower page load if the downstream processes such as compression are missing.</p><p>Nevertheless, TTFB is one of the first actions when a web page is called and the basis of all subsequent actions and thus also of downstream tests and evaluations for page speed such as the:</p><ul><li>&quot;First Contentful Paint&quot; (FCP): The point in time when a display element is shown in the browser for the first time</li><li>&quot;First Meaningful Paint&quot; (FMP): The time the user feels that the web page has loaded</li><li>&quot;Time to Interactive&quot; (TTI): The time at which the web page has finished rendering and is ready for user input (=interaction)</li></ul><p>Google updates its evaluations and criteria now and then. In 2020, users of the Pagespeed test or the so-called Core Web Vitals report will also encounter the terms &quot;Largest Contentful Paint&quot; (LCP), &quot;First Input Delay&quot; (FID) as well as &quot;Cumulative Layout Shift&quot; (CLS).</p><h2 id="why-high-ttfb-results-in-a-bad-user-experience">Why high TTFB results in a bad user experience</h2><p>A web browser first gets the HTML file that includes all the references to the assets, which must be downloaded subsequentially. The browser will not start downloading any asset without the HTML file. Web browsers may start downloading assets while receiving the first bytes of the HTML file. Therefore, time to first byte (TTFB) also has an important role. However, in most cases, if not all, content on the website can be blocked from fetching until the HTML has been fully downloaded. Therefore, TTFB is as important as TTLB.</p><h2 id="the-slow-backend-problem">The slow backend problem</h2><p>The following simplified example illustrates how a slow backend can delay the download of the subsequent assets. The full page speed tests have been performed using our <a href="https://tools.keycdn.com/speed">Website Speed Test</a> tool. The first example shows fast delivery of the HTML document without any delays.</p><figure><img src="https://www.keycdn.com/img/blog/ttlb-no-delay.png" alt="TTLB no delay - fast website"></figure><p>In the following example, we manually added a 1 second delay to highlight the issue of a slow time to first byte. The assets start downloading after the HTML document has been fully downloaded.</p><figure><img src="https://www.keycdn.com/img/blog/ttlb-delay.png" alt="TTLB delay - slow website"></figure><p>The difference between TTFB and TTLB is minimal in this example, which eliminates connectivity issues or large geographic distance as potential problems. The issue has to be on the origin server. On average anything with a TTFB under <strong>100 ms</strong> is fantastic. Anything between <strong>200-500 ms</strong> is standard and anything between <strong>500 ms and 1 s</strong> is less than ideal. Anything greater than <strong>1 s</strong> should likely be investigated further.</p><h2 id="what-are-the-reasons-for-slow-time-to-first-and-last-byte">What are the reasons for slow time to first and last byte?</h2><p>It is crucial that you identify such issues quickly. Solving them might have a big impact on how you built your architecture or how your database design looks like. All following assets are affected by this delay. This indicates the importance of resolving slow websites due to time to first byte issues.</p><p>Here is a list of the most common issues:</p><ul><li>Inefficient code on the origin server</li><li>Database design results in slow queries (indexes, commits, stored procedures, etc.)</li><li>Misconfigured web server (Apache, Nginx, PHP, Ruby, MySQL, MongoDB, sysctl, etc.)</li><li>The origin server reached its capacity (CPU, memory, disk i/o, etc.)</li></ul><h2 id="time-to-first-byte-test">Time to first byte test</h2><p>Our <a href="https://tools.keycdn.com/performance">Performance Test</a> tool is a great way to quickly test TTFB on a single asset from 10 different locations worldwide. Simply input the URL of your asset, and it will return the TTFB in addition to other helpful response data. Anything under 400 ms will return a green indicator. This time to first byte test can help you determine what locations you may be seeing a slow performance.</p><figure><img src="https://www.keycdn.com/img/blog/keycdn-tools-performance-test.png" alt="keycdn performance test tool"></figure><p>If you are unsatisfied with your TTFB, the following tips for optimizing it may help:</p><h2 id="7-tips-for-optimizing-ttfb">7 Tips for optimizing TTFB</h2><h3 id="1-change-local-dns-server">1. Change local DNS server</h3><p>A shorter connection time is achieved by speeding up the resolution time of the domain name. You can change the DNS server that your computer uses locally. By default, one in your ISP's infrastructure is used for this purpose. The change can be made in the end device's operating system (computer, smartphone, etc.) or - if supported - directly in the router so that all devices in the network automatically benefit from the change.</p><p>The IPs of <a href="https://developers.google.com/speed/public-dns/docs/using" target="_blank" rel="nofollow noopener">Google's DNS servers</a> with the IP address &quot;8.8.8.8&quot; (IPv4) or &quot;2001:4860:4860::8888&quot; (IPv6) or <a href="https://developers.cloudflare.com/1.1.1.1/setup-1.1.1.1" target="_blank" rel="nofollow noopener">Cloudflare's</a> &quot;1.1.1.1&quot; (IPv4) or &quot;2606:4700:4700::1111&quot; (IPv6) are popular for this because, according to their information, they are swift and optimized.</p><h3 id="2-change-data-center-or-use-cdn">2. Change data center or use CDN</h3><p>As mentioned at the beginning, the location of the website's target group is relevant. In the case of a web store that sells and delivers worldwide, the web host or the data center where the server is located should have a good connection to a central hub such as Frankfurt. In addition, a &quot;<a href="https://www.keycdn.com/what-is-a-cdn">Content Delivery Network</a>&quot; (CDN) should be considered. Such a network keeps an up-to-date copy of the website in caching systems on servers geographically close to the user. This can significantly reduce latency.</p><h3 id="3-optimize-tls-and-ssl-handshake">3. Optimize TLS and SSL handshake</h3><p>As soon as the request is made via <a href="https://www.keycdn.com/blog/difference-between-http-and-https">HTTP</a> - and it should be - a so-called <a href="https://www.keycdn.com/support/ssl-vs-tls">SSL</a> handshake takes place, after which the encrypted connection is established.</p><p>The latency between the individual handshake steps can also be optimized. The available SSL protocol (<a href="https://www.keycdn.com/blog/tls-1-3-support">TLS</a> 1.3, 1.2, 1.1), the SSL ciphers used and their sequence, SSL caching, etc., all have an influence. For optimization, one should use the latest or recommended standards and let the web server deliver them preferentially:</p><ul><li>Current TLS/SSL protocol</li><li>Current SSL cipher suite</li><li>Use SSL session cache (TLS resumption); for recurring connections</li><li>Use OCSP stapling; saves additional queries to check if the certificate is valid</li><li>HTTP Strict Transport Security incl. Preload (HSTS)</li><li>Short certificate chain; ideally three certificates long: certificate, intermediate, and CA root certificate) If an element in the chain is missing, some browsers try to find the missing one themselves, which requires additional queries</li></ul><p>The configuration that suits you best should be used when it comes to the cipher suite and the combination with the respective TLS protocol. As technologies are constantly evolving, regular checks and balances should be made. Recommended and updated configurations are provided by Mozilla, for example, <a href="https://wiki.mozilla.org/Security/Server_Side_TLS" target="_blank" rel="noopener">Mozilla TLS page</a>.</p><p>For example, AES ciphers are faster than RC4, DES, or Camellia. However, for modern AES, the server's CPU must support the so-called AES-NI instructions. In the server area, these are almost all current CPUs manufactured after 2010. AES with ECDHE and DHE should be used for the key exchange mechanism.</p><p>If the handshake is completed successfully, the web server software then takes over the processing of the request. The performance of this software and the load of the server hardware are decisive for the time required for processing, which brings us directly to the next point.</p><h3 id="4-check-hosting-details">4. Check hosting details</h3><p>A bottleneck in the IT infrastructure of the data center or a tariff that is too weakly equipped can be a reason for low TTFB. Very favorable tariffs, for example, are often on crowded servers, and there can be strong fluctuations in TTFB values depending on the time of day. Since the causes can vary, it is impossible to make a blanket statement about the reason.</p><p>In general, it is also true for software on servers that a more current version of the operating system, the web server, and the database server can improve performance and security through fixed bugs and closed security gaps.</p><p>Likewise, a complete change of the web server software (e.g. <a href="https://www.keycdn.com/support/nginx">Nginx</a>) can also positively affect TTFB.</p><p>Since a database connection is usually established with the first request on the page and the (re)loading of additional scripts is started, a suitable/optimized database server is also relevant. Thus, among other things, many CMS and stores that work with MySQL benefit from one of the existing so-called forks that have introduced their optimizations and have optimized MySQL and adapted it to more modern requirements. Examples are MariaDB or Percona.</p><h3 id="5-improve-server-hardware">5. Improve server hardware</h3><p>Switching to a tariff with more RAM and fewer clients can help reduce TTFB and generally with content loading and performance further down the line with many visitors.</p><p>Upgrading to a virtual or cloud server with a stronger CPU or generally assured hardware can also help. Of course, whether the extra cost justifies the improvement is an individual consideration. If you already own a server, it can make sense to change to a newer tariff generation - which ideally has more recent hardware - for a small surcharge after a few years.</p><h3 id="6-use-ipv6-and-aaaa-record-by-default">6. Use IPv6 and AAAA record by default</h3><p>Connections over <a href="https://www.keycdn.com/support/ipv6-tutorial">IPv6</a> are generally faster than IPv4. It can become problematic if the server does not support IPv6. Usually, the request from the browser over the Internet connection is nowadays already made via IPv6; if the requested server cannot do this, a fallback to IPv4 takes place, which triggers a new request between the involved parties.</p><p>Especially in a setup - like when the domain is hosted by hoster A and the website is hosted by hoster B - the name servers of hoster A have to support IPv6 (practically standard) and the server at hoster B as well. In this case the IP forwarding of the domain from A to B must be done by AAAA record (for IPv6) and not only by A record for IPv4.</p><h3 id="7-use-http-2-or-keep-alive">7. Use HTTP/2 or Keep-Alive</h3><p>While only partially relevant to TTFB, we still think this is worth mentioning here:</p><p>Use HTTP/2: The current standard of the HTTP protocol has many new features such as server push, parallel loading of page elements over a single connection, header compression, etc.</p><p>If only the older protocol HTTP/1.1 is available, Keep-Alive should be enabled.</p><h2 id="summary">Summary</h2><p>A large delta between TTFB and TTLB is often caused by geographic distance or connectivity issues in general, which leads to increased latency and decreased throughput. This fact helps to differentiate the problems and isolate problem resolution.</p><p>The items listed above help optimize Time To First Byte (TTFB) but are not solely responsible for the fast delivery of a web page:</p><ul><li>Local: Change DNS server for name resolution</li><li>Change data center location or use CDN</li><li>Optimize SSL handshake</li><li>Check hosting OS, web, database servers</li><li>Improve server hardware with more RAM and CPU</li><li>Use IPv6 and AAA record</li><li>Use HTTP/2 or Keep-Alive</li></ul><p>However, not too much emphasis should be placed on the individual value of the TTFB, as this is very abstract. More important should be the &quot;First Meaningful Paint&quot; (FMP): That is, the time the user feels that the web page has loaded - even if details are still being reloaded. This &quot;feeling&quot; is undoubtedly subjective and differs from users of an information blog from those of a webshop.</p> https://www.keycdn.com/blog/a-slow-website-time-to-first-byte-ttfb#comments KeyCDN Launches New POP in Mexico https://www.keycdn.com/blog/pop-in-mexico Thu, 04 Nov 2021 10:00:00 +0000 Martin Williams https://www.keycdn.com/blog/pop-in-mexico <img src="https://www.keycdn.com/img/blog/pop-in-mexico.png" alt="KeyCDN Launches New POP in Mexico"><p>Hola Mexico! We've launched our new point of presence (POP) in Mexico City. The POP is strategically located within the country and lowers latency overall. KeyCDN is always on the lookout for ways to minimize latency and accelerate asset delivery worldwide. With this new POP, our performance in Latin America has significantly improved and provides a better web experience. The POP is in production and enabled for all existing Zones.</p><h2 id="pop-in-mexico-city">POP in Mexico City</h2><p>After launching POPs in Dubai, Tel Aviv, Brisbane, Athens and Denver this year, the new POP boosts performance for Central America. Mexico has a population of almost 130 millions people. The metropolitan area of Mexico City with over 21 million people makes it the 5th largest city in the world. Requests from Mexico were previously routed to the US, which is no longer needed. Traffic from this POP will be billed towards Latin America according to our <a href="https://www.keycdn.com/pricing">pricing</a>.</p><figure><img src="https://www.keycdn.com/img/blog/pop-location-mexico.png" alt="mexico pop location"></figure><h2 id="how-to-check-if-content-is-delivered-from-mexico">How to check if content is delivered from Mexico</h2><p>Each POP adds the HTTP response header <code>X-Edge-Location</code> to all assets delivered via KeyCDN. In this case, the POP's identifier is <code>mxmc</code>. The first two letters stand for the country <a href="https://en.wikipedia.org/wiki/Top-level_domain" target="_blank" rel="nofollow noopener">TLD</a>, while the 3rd and 4th letters are for the city. You can quickly check the response headers using <a href="https://www.keycdn.com/blog/chrome-devtools">Chrome DevTools</a>, a <a href="https://www.keycdn.com/blog/website-speed-test-tools">speed test tool</a>, or a simple curl command like the one below:</p><pre><code class="language-none">curl -I 'https://www.keycdn.com/img/favicon/favicon.ico'HTTP/2 200server: keycdn-enginedate: Thu, 04 Nov 2021 11:39:01 GMTcontent-type: image/x-iconlast-modified: Thu, 16 Jul 2020 07:06:27 GMTvary: Accept-Encodingetag: W/&quot;5f0ffc73-1536&quot;expires: Thu, 11 Nov 2021 11:39:01 GMTcache-control: max-age=604800x-cache: HITx-edge-location: mxmcaccess-control-allow-origin: *</code></pre><h2 id="status-of-the-pop-in-mexico">Status of the POP in Mexico</h2><p>Maintaining a <strong>100% uptime rate</strong> is key. If you are experiencing any issues with the new POP in Mexico City, check our <a href="https://status.keycdn.com">status page</a> to verify if we are conducting any scheduled maintenance or open a <a href="https://www.keycdn.com/support">support request</a>.</p><figure><img src="https://www.keycdn.com/img/blog/keycdn-status.png" alt="denver pop status"></figure><h2 id="what-s-next">What's next?</h2><p>One more POP is planned soon! We'll add a POP in Santiago (Chile) which will make a significant difference for the west of South America. For more POPs planned, check our current <a href="https://www.keycdn.com/network">network</a> for a list of both active and planned edge server locations. Alternatively, If you would like to request a POP in a certain location or a new feature please let us know and stay tuned for more exciting announcements.</p> https://www.keycdn.com/blog/pop-in-mexico#comments