#webperf

[digitalzaa]

Maximizing the Digital Experience: Using AI to Enhance Website Performance and Speed

In today's fast-paced digital landscape, where attention spans are dwindling and competition is fierce, a website's performance and speed can make or break its success. With the increasing reliance on online platforms for information, entertainment, and commerce, users expect nothing short of seamless and lightning-fast experiences. Enter artificial intelligence (AI), the game-changer in optimizing website performance and speed to meet and exceed user expectations.

Gone are the days when simple optimizations like image compression and caching were sufficient to enhance website performance. While these strategies still hold relevance, the complexity of modern websites demands more sophisticated solutions. This is where AI steps in, offering a myriad of tools and techniques to revolutionize how websites are built, managed, and optimized.

Understanding the Importance of Website Performance

Before delving into the role of AI in enhancing website performance, it's crucial to grasp why it matters in the first place. Countless studies have shown that even minor delays in page loading times can lead to significant drops in user engagement and conversions. For instance, Amazon reported that a mere one-second delay in page load time could cost them $1.6 billion in sales annually.

Moreover, search engines like Google prioritize fast-loading websites in their rankings, meaning that sluggish performance can also impact a site's visibility and organic traffic. With users becoming increasingly intolerant of delays, ensuring optimal website performance is no longer a choice but a necessity for businesses aiming to thrive in the digital realm.

Leveraging AI for Performance Optimization

Traditionally, improving website performance involved manual interventions and periodic optimizations. However, AI-driven solutions have revolutionized this process by offering real-time, data-driven insights and automated actions to maximize performance continuously. Here's how AI is reshaping website optimization:

1. Predictive Analysis:

AI algorithms can analyze vast amounts of data to predict potential performance issues before they occur. By identifying patterns and trends, AI-powered tools can anticipate traffic spikes, server downtimes, or other factors that might impact performance, allowing proactive measures to be taken to mitigate these issues.

2. Content Delivery Networks (CDNs):

CDNs are instrumental in delivering website content quickly to users by caching static resources on servers located closer to the user's location. AI algorithms can optimize CDN performance by dynamically adjusting cache settings based on user behavior, traffic patterns, and content popularity, ensuring that users receive content from the nearest server for minimal latency.

3. Image and Video Optimization:

Visual content plays a crucial role in engaging users, but it can also slow down website performance if not optimized properly. AI-powered image and video optimization tools leverage techniques like machine learning and compression algorithms to reduce file sizes without compromising quality, thereby improving loading times without sacrificing visual appeal.

4. Dynamic Content Personalization:

Personalized content enhances user experience but can also introduce complexities that affect website performance. AI-driven personalization engines analyze user behavior in real-time to deliver relevant content efficiently. By dynamically optimizing content delivery based on user preferences and interactions, these engines ensure a seamless experience without compromising speed.

5. Performance Monitoring and Diagnostics:

AI-based monitoring tools continuously track website performance metrics and diagnose potential issues in real-time. By leveraging machine learning algorithms, these tools can identify root causes of performance bottlenecks and suggest actionable insights for optimization. This proactive approach allows website administrators to address issues promptly, minimizing downtime and maximizing user satisfaction.

6. Automated Code Optimization:

AI-powered code optimization tools analyze website code to identify inefficiencies and automatically implement performance-enhancing changes. From minifying CSS and JavaScript files to optimizing database queries, these tools streamline the codebase for improved speed and responsiveness without manual intervention.

In conclusion, maximizing website performance and speed is no longer a luxury but a strategic imperative in today's hyper-competitive digital ecosystem. By harnessing the power of AI-driven optimization techniques, businesses can deliver exceptional user experiences that drive engagement, conversions, and long-term success in the digital realm. Embracing AI is not just about keeping up with the competition; it's about staying ahead and defining the future of digital excellence. 

To know more about how AI can transform your website's performance, click here.

[dragoni]

Layout Shift: Jank vs No Jank

[gdm-pixel]

Un nouvel article a été publié sur GDM-Pixel

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/mnc

Configurer Autoptimize

Configurer Autoptimize

Grâce à Autoptimize, on va pouvoir améliorer les temps de chargement, en regroupant les fichiers JavaScript, les CSS, et grâce à quelques bricoles qui feront une petite différence. À noter, ça ne va gérer que ce qui se passe côté serveur de pages (temps d’envoi des fichiers), et pas du tout ce qui pourrait se passer sur le serveur en lui-même (temps de compilation). Si vous avez des problèmes de perfs, je vous recommande la suite de vidéos sur Webinoly, disponible ici.

Présentation de la configuration du module…

Options CSS

On va commencer par le plus facile : optimiser le code CSS. Grâce à cette option, Autoptimize va vous permettre d’avoir moins de fichiers CSS, et de présenter un code plus condensé.

Le CSS, c’est le code qui « habille » la page, en ajoutant les couleurs, la taille des typos, la taille et l’emplacement des conteneurs etc. C’est aussi le code qui gère l’apparence de certaines interactions (survol des boutons par exemple). Bref, sans CSS, le web serait super moche, et ce serait bien dommage.

Optimiser le code CSS

À cocher, évidemment, sans quoi ça annule tout ce qu’il y après. Cette option va également permettre de les minifier, c’est-à-dire de supprimer les espaces, les commentaires, pour compresser un peu plus le fichier.

Concaténer les fichiers CSS

« Concaténer », c’est un gros mot pour dire « regrouper ». Vous n’aurez plus « N » fichiers CSS, mais un seul. À noter que le fichier CSS qui sera servi par Autoptimize dépend de la page sur laquelle vous vous trouvez, des templates, des modules etc., il est donc possible que le cache du module soit imposant (ça dépendra du nombre de pages que vous avez).

Agréger aussi les CSS in-line

Cette option est géniale, car elle va retirer le code CSS qu’il y a dans votre page pour le placer dans un autre fichier : votre code source sera ainsi bien plus léger, plus propre. Si vous êtes sur un builder de pages, ça ne fera pas de mal…

Génération de données : URI pour les images

Cette option va modifier la façon dont les images de fond sont rendues sur le site. Au lieu de procéder au chargement d’un fichier, les petites images peuvent être chargées en base 64.

Ce que ça veut dire, c’est plus de travail pour les navigateurs, et moins de travail pour le serveur. À n’utiliser que si vous n’avez pas de scripts de Lazyload sur votre site.

Inclure le CSS principal dans l’HTML et reporter le reste

Cette option permet de pré-charger dans le head le CSS nécessaire à l’affichage du contenu au-dessus de la ligne de flottaison, également appelé « critical CSS ». Ça suppose que vous savez ce que vous devez charger, ou que vous avez pu générer le critical CSS. Pratique pour une super note sur Pages speed, mais si votre serveur est bien foutu, le gain sera assez faible.

Mettre tous les CSS dans votre code HTML

Non, ne faites pas ça ! Ça collerait tout votre CSS inline dans le code source. Cela étant, tout dépend de la quantité de code, mais ça ne me paraît pas être une bonne idée.

Exclure les fichiers CSS d’Autoptimize

Ça, c’est si vous avez du contenu dont l’affichage merdouille quand vous avez activé le plug-in : ça veut dire que certains fichiers CSS sont en conflit (ça peut arriver, en fonction de l’ordre dans lequel ils sont chargés). Ça suppose que vous connaissez très bien votre code, vos plugins etc.

Option HTML

C’est une rubrique relativement simple, qui ne comprend que deux options : « optimiser le code HTML » et « préserver les commentaires HTML ».

Optimiser le code HTML

Cette option va permettre de minifier le code HTML, c’est-à-dire retirer les sauts de ligne, les espaces qui ne servent à rien etc. Vous allez gagner quelques octets sur le poids de la page en elle-même, rien de plus.

Préserver les commentaires HTML

Pour que les commentaires HTML ne soient pas supprimés par le plug-in. Clairement, les commentaires ne peuvent servir qu’en phase de développement. Si vous êtes en production, vous pouvez les faire sauter.

Option du CDN

Un CDN, c’est un Content Delivery Network, c’est-à-dire un réseau livraison de contenu. Utilisé pour faire du Domain Sharding, c’est-à-dire charger différents contenus au navigateur sur des sous domaines tiers, pour paralléliser l’envoi de fichiers. Sur HTTP 2, ça ne sert à rien. Sur HTTP un, vous aurez effectivement un gain de performance.

Un CDN peut également être utilisé pour avoir des points de livraison de type  « proxy », c’est-à-dire qu’en fonction de la zone géographique depuis laquelle vous téléchargez un fichier, vous n’allez pas vous connecter à n’importe quel data Center. Ça sert typiquement pour les sites qui ont une audience internationale.

Pour résumer, si votre site est en France, pour une audience française, ou proche, et que vous êtes en HTTP 2, vous n’avez pas à vous embêter avec cette rubrique.

Option JavaScript

C’est la plus risquée des options ! Avec ça, vous pouvez tout péter !

Optimiser le code JavaScript ?

Cette option permet de réduire la taille des JavaScript. Jusqu’ici, tout va bien.

Concaténer les fichiers JavaScript

C’est typiquement le genre de fonction qui peut tout casser. En fonction de vos fichiers, de la version de Jquery utilisée etc., si vous modifiez l’ordre dans lequel les JavaScript sont chargés, ou que vous les concaténer, vous pouvez obtenir des erreurs dans l’exécution du code.

Ca veut dire que certaines fonctionnalités du site seront K.-O.

Néanmoins, les gants performance sont assez bluffant. À utiliser, donc, si vous êtes sûrs de ce que vous faites (voir plus bas).

Agréger aussi les JS in-line

Cette fonction, comme pour le CSS inline, permet de récupérer les JavaScript qui sont « en dur » sur la page pour les placer proprement dans un fichier externe.

Forcer le JavaScript à charger dans l’en-tête de la page

Cette fonction permet de charger le JavaScript dans le Head. Ça va corriger certaines erreurs, mais ça va accroître le temps de rendu sur la page. Je déconseille d’utiliser cette fonction. On préférera exclure les fichiers qui plantent.

Scripts à exclure d’Autoptimize

Voilà, c’est l’option magique qui vous permet d’exclure de la concaténation les fichiers qui risqueraient de provoquer des erreurs. Super pratique, mais ça nécessite de connaître vos plug-ins, les fichiers qui sont liés etc. C’est donc une fonctionnalité relativement avancée, pour ceux qui n’ont pas peur de regarder le code source.

Ajouter une gestion des erreurs (trycatch)

Si vos scripts ne fonctionnent pas en raison d’erreurs JS, vous pouvez essayer cette option.

Options diverses

Enregistrer les scripts/CSS en tant que fichiers statiques

À cocher ! Ça permet de créer les fichiers JavaScript et CSS de manière statique, c’est-à-dire qu’il y aura un fichier, dans un dossier, et qu’il restera là jusqu’à ce qu’il soit expiré.

Optimiser les fichiers CSS et JS exclus ?

Si vous excluez un fichier de la concaténation, il sera quand même optimisé par le module (minifié).

Optimiser aussi pour les utilisateurs connectés

C’est une option qui peut servir si vous utilisez un builder et que celui-ci ne charge pas (avec un beau message d’erreur).

L’onglet « images »

Cette section du module permet d’optimiser les images, en les distribuant via un CDN ou en exécutant un script de Lazyloading.  Pour le Lazyloading, je vous renvoie à ce tutoriel. Et pour le CDN, j’ai tout expliqué plus haut.

La section extra

Google fonts

Si vous avez beaucoup de Google fonts, ça peut être intéressant de les optimiser avec l’option dédiée. Par défaut, le rendu de la typo de votre site est impacté par le chargement de Google Font. Si vous appelez de nombreuses polices, ça peut être intéressant de gérer cette section-là.

Personnellement, vu que je n’ai qu’une seule typo, je ne m’embête pas. Si vous avez besoin de dégreffer finement, vous pouvez utiliser la fonction que vous trouverez ici.

Désactiver les emojis

Si vous tapez un joli petit smiley, WordPress le remplace par une icône. Le problème, c’est que ça va nécessiter du CSS et un JavaScript supplémentaire. Vous pouvez supprimer cette belle merde qui ne sert à rien.

Supprimer les chaînes de requête des ressources statiques

De nombreux plug-in vont charger leur fichier avec une variable de version. Parfois, celle-ci indique au navigateur qu’on a changé de fichiers. Donc, techniquement parlant, c’est utile de les laisser. Retirer la chaîne de requête va améliorer le score de performance, rien de plus.

« Préconnection » avec des domaines tiers (utilisateurs avancés)

Ça, c’est pour ajouter le DNS prefetch : avant de charger une page, le navigateur se connectera au DNS susceptible d’être appelé, afin de gagner quelques millisecondes. Franchement, c’est un peu « gadget », car en général, sur la page d’accueil, ou une bonne landing page, il y aura plus de 80 % des requêtes effectuées en termes de connexion au DNS.

Fichiers JavaScript asynchrones (utilisateurs avancés)

Ça, c’est pour différer le chargement des JavaScript. Attention à ne pas bloquer le rendu.

Optimiser les vidéos YouTube

Une application tierce pour charger les vidéos de manière différée, en Lazyload. Là encore, je vous renvoie vers le tutoriel dédié.

[raghwendrawebservices]

Do you know what your website speed is and how to optimize? Here I shared the multiple free to check your website performance. #websiteperformance #websitespeed #webperformance #pagespeed #webperf https://raghwendrawebservice.blogspot.com/2019/07/top-10-free-tools-to-check-your-website.html (at Delhi, India) https://www.instagram.com/p/B0D4FDwJCw0/?igshid=8hyyh3quc5k8

[mediba-ce]

Datadog と Lighthouse を利用した WebPerf の継続的計測

こんにちは。ものづくり推進部、フロントエンドエンジニアの武田です。 今日は Datadog, Lighthouse を使ったクライアントパフォーマンス計測に取り組んでいる、というお話です。

mediba では webpagetest を使った定期実行と計測を以前から行っています。

DataStudioとGASでWebPagetestの計測結果をグラフ化する

uknmr/gas-webpagetest

紹介記事: gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する

1 での取り組みをベースにし、clasp で GAS のソースコード管理・デプロイを実現するための仕組みや webpagetest Lighthouse test と連携したメトリクスの取得まで網羅したものが 2 になります。

今回は少し webpagetest とは趣向を変えて

Lighthouse による定期実行とパフォーマンス値取得

Datadog API を利用したカスタムメトリクスへの POST

Datadog による可視化

についてご紹介します。

実施に必要なもの

Datadog (Pro Plan or Enterprise Plan での契約)

Node.js v10.13 以上（現時点）、Chrome がインストールされている実行環境

Lighthouse

定期実行する仕組み

超簡単な説明ですが

Datadog とは? -> システム監視のための SaaS

Lighthouse とは? -> クライアントパフォーマンスのスコアリングツール

です。

Lighthouse による定期実行とパフォーマンス値取得

webpagetest ではなくなぜ Lighthouse なのか

webpagetest を利用する場合、自前のプライベートインスタンスとして立てることも可能ですが、コストとの兼ね合いでパブリックインスタンスとして存在するリージョンを利用するというシーンがどうしてもあります。今回はプロダクション環境とパブリックに閲覧が不可能であるステージング環境の2環境を施策に合わせて比較をする必要があるため、どうしてもその制限をクリアできません。

ステージング環境を正常に閲覧できる（=リクエストを受け付けられる）

Lighthouse 実行のために必要な Node.js v10 以上が動作する

Lighthouse 実行のために Chrome が動作する

これらを定期的に実行する

以上を実現することが必要そうです。

どこで Lighthouse 定期的に動かすか

ランタイムを Node.js v10.x にした lambda もしくは CodeBuild でスクリプトを実行、定期スケジューリングを CloudWatch Events にするということも可能そうです。一度 CodeBuild 想定でコストを計算してみます。CodeBuild の OS image は Chrome も素で入っていますし、割となんでも入り感があります。

料金 - AWS CodeBuild | AWS

毎月かかりそうな試算の条件

デイリーで24回実行想定

ビルドにかかる時間 5 分

インスタンスタイプに一番高いクラス 1分単位で 0.02 USD

24回/day * 30day * 5 分 * 0.02 USD = 72 USD

現時点レートで 7,827 円、自分が毎月もらっているお小遣いから出せるかと言われると出せない金額なので今回は AWS 環境での実行を諦めます。

いろいろ考えた結果、ほぼゼロコストで仕上げるため選択したのは Travis CI でした。といっても弊社では Travis CI Enterprise を AWS 環境上で動作させており、そこで実行させる想定です（なので詳細を詰められるとゼロコストではないのですが）。

ただ残念ながら定期実行を叶える Travis Cron Jobs はリポジトリのブランチ毎にマニュアルで指定する必要があるのでそこは残念な感じになります、人間がポチポチ GUI から指定して定期実行を実現することにします。

Lighthouse スクリプト

フロントエンドエンジニアの方ですと Chrome Devtools -> audit や Lighthouse を CLI から利用することは一度はやってみたことがあると思うのですが、今回はよく見るスコアがほしいわけではなく特定のパフォーマンスメトリクスを取得したいという意図です。個人的にも絶対的なスコアリングが全てだと思っていません、計測し比較し向上しているかが一番重要であると思っています。

プログラマブルに Ligththouse を操作していきますが、実はほとんどドキュメントにあったりするので、参考に取得してパフォーマンス値をかき集めてみます。

const lighthouse = require('lighthouse'); const log = require('lighthouse-logger'); const chromeLauncher = require('chrome-launcher'); const opts = { chromeFlags: ["--headless", "--disable-gpu"], logLevel: "info" }; log.setLevel(opts.logLevel); launchChromeAndRunLighthouse("https://stg.example.com", opts).then(results => { // 一旦標準出力に表示 console.table(results); }); function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { // results.lhr はよく見るスコアリングの元データ // https://github.com/GoogleChrome/lighthouse/blob/master/types/lhr.d.ts const { "time-to-first-byte": ttfb, "first-contentful-paint": fcp, "first-meaningful-paint": fmp, "speed-index": speedindex, interactive, metrics, } = results.lhr.audits; return chrome.kill().then(() =>({ TTFB: Math.round(ttfb.numericValue), FIRST_PAINT: metrics.details.items[0].observedFirstPaint, FMP: Math.round(fmp.numericValue), FCP: Math.round(fcp.numericValue), SPEED_INDEX: Math.round(speedindex.numericValue), TTI: Math.round(interactive.numericValue), })); }); }); }

Lighthouse 実行時の Promise.resolve で���却される results は型定義もあり、昨今のエディタ補完の恩恵を受けると大変 DX が良いのですが、必要な数値は正直どこに格納されているか探すほかないので、CLI で一度 JSON ファイルを成果物として実行してから探すのが一番手っ取り早いです。切り取られたスクリーンショットの情報が Base64 でエンコードされ格納されているので違った工夫もできそうではあります。

ここまでで Lighthouse 側の準備は整ったので次に Datadog 側を準備します。

Datadog API を利用したカスタムメトリクスへの POST

そもそもなぜ Datadog を選ぶのか

担当するプロダクトのシステムモニタリングとして現在利用しており（他のプロジェクトでの利用実績もあります）、インテグレーションや API 連携について学びたいというのと、値のプロットと可視化を Datadog 一括にしちゃえば便利だし見るところ少なくていいんじゃね？ というのが大きなモチベーションです。

私が活動するメインフィールドはフロントエンドなのですが、チームでは属人化を避けるため監視やアラート対応・調査を含め、モブを通して暗黙知をなくそうという取り組みをしている点も Datadog を候補にした理由です。

Datadog API とカスタムメトリクスの利用

次はDatadog API を使ってカスタムメトリクスを作り POST しますが、まずは API key, APP key が必要になってきます。

ナビゲーションから Intergrations -> APIs

API key, APP key 取得

実際にリクエストを送る際は node-dogapi というのがあるのでこちらを利用してみます。

初期化

const datadog = require("dogapi"); // 環境変数に Datadog API key, Datadog App key がセットされている想定 datadog.initialize({ api_key: process.env.DATADOG_API_KEY, app_key: process.env.DATADOG_APP_KEY, });

カスタムメトリクスへの送信

任意の文字列をカスタムメトリクス名として、収集した値をプロットしていきます。なお以下のコードは先ほど出力に結果を表示したブロックで利用する想定です。タグ名に関しては特定の要素に紐づけ絞り込みを目的として利用を推奨しているようで、公式にもある通りプロダクション環境やステージング環境の種別としてタギングします。タグのルールとしては <KEY>:<VALUE> というルールになります。参照

const { TTFB, FIRST_PAINT, FMP, FCP, SPEED_INDEX, TTI, } = results; const tags = "env:staging"; datadog.metric.send_all([ { metric: "webperf.measure.ttfb", points: TTFB, tags, }, { metric: "webperf.measure.first_paint", points: FIRST_PAINT, tags, }, { metric: "webperf.measure.fmp", points: FMP, tags, }, { metric: "webperf.measure.fcp", points: FCP, tags, }, { metric: "webperf.measure.speed_index", points: SPEED_INDEX, tags, }, { metric: "webperf.measure.tti", points: TTI, tags, }, ], (err, results) => { if (err) { console.log(`Error: ${JSON.stringify()}`); process.exit(1); } console.log(`Results: ${JSON.stringify(results, null, 4)}`); });

ここまでのもの実行できれば Datadog のカスタムメトリクスに値がプロットされ可視化するデータは出来たことになります。

Datadog による可視化

ダッシュボードを作成

新しいダッシュボードを作成しグラフを作る準備をします。

Timeborad: 時系列にイベントグラフを閲覧しレイアウトが自動

Screenboard: ステータスやグラフなどデータとして混合されたもの向けでレイアウトがフレキシブル

2つから選べますがお好きな方を選んで調整してください。

ダッシュボードにウィジェットを追加

グラフで可視化する場合は Timeseries というウィジェットを使用します。

ウィジェットでハマるとしたらタグでの絞り込みな気がします。もしタグがサジェストされないなどうまくいかないようでしたら </> アイコンを押下して raw text での変更に切り替えると avg:webperf.measure.ttfb{key:value} のような入力が可能になるので試してみると良いかもしれません。

最近よく聞くようなパフォーマンスバジェットを閾値として定めて、閾値よりオーバーしたら Warning 表示にする、なおかつ閾値を超えた際にモニタリングによって Slack に通知するといったことも可能です。

Google Developers Japan: パフォーマンスバジェットのご紹介 - ウェブパフォーマンスのための予算管理

ダッシュボードは今のところシンプルですがこんな感じになっています。

日々プロットしたグラフを可視化し追いかけたい数値と、重要視したい値・バジェットを定めてデカデカと表示する、見栄えはよくありませんが実務に事足りるものになっています。

まとめ

Lighthouse から特定の値を取得、Datadog API を使ったカスタムメトリクスへの POST、Datadog 内での可視化について書かせていただきました。

Datadog のカスタムメトリクス利用は Pro/Enterprise プランのみ

手早く低コストで定期実行したいなら CI のサービス利用を検討

Lighthouse の実行結果からはパフォーマンス値やその他（スクショなど）も取得できる

Datadog API の利用は簡単（各種言語のライブラリ等も揃っており充実）

ダッシュボードも気軽で簡単に可視化できる

今回は Datadog のプラン次第というところもありますが、まずは低コストでパフォーマンス定期計測��パフォーマンスバジェットの設定などに取り組んでみてはいかがでしょうか。

[gamesover2600]

Blocking HTML5 Ping Requests using ColdFusion

Major browsers are disabling the ability to disable HTML5 ping click tracking. https://www.bleepingcomputer.com/news/software/major-browsers-to-prevent-disabling-of-click-tracking-privacy-risk/

As a result, you’ll probably start encountering empty form posts with a content-type of “text/ping”.If you are not expecting or do not need to receive ping requests to your web server, you can block them without wasting any resources processing the request further.  This is important because this feature has already been used to perform DDOS attacks: https://www.imperva.com/blog/the-ping-is-the-thing-popular-html5-feature-used-to-trick-chinese-mobile-users-into-joining-latest-ddos-attack/

Here’s a basic ColdFusion script that will identify and block HTML5 Ping requests: https://gist.github.com/JamoCA/916dbb2d0ca0fe30ca63120bcaccc20f

[fastlogocreator-blog]

https://www.fiverr.com/fastlogocreator/do-professional-psd-template-for-your-website

#webdesign #webdevelopment #GraphicDesign #Design #minimalDesign #eyecatchy #wordpress #wix #eCommerce #template

[prixtipss]

[kalilinux4u]

In this story, we have also detailed another trick (by @__jesse_li) revealing how website hackers could use DNS to covertly exfiltrate stolen information using "dns-prefetch" method. Find details here: https://t.co/MdcqBPlDDQ #tech #webdesign #webperf #perfmatters https://t.co/GIUiWuzpqk (via Twitter http://twitter.com/TheHackersNews/status/1277552829486346241)

[belugacdn]

AppValley VIP App: Customer Spotlight

The ability to host a ton of downloadable content, and also ensure speed of delivery, is key to the success of companies like AppValley.vip (a third party iOS App Store that hosts and distributes apps outside of Apple’s AppStore). With the hundreds of apps they host and allow users to download directly from their site, they need a Content Delivery Network (CDN) that can handle the sheer volume of content. But filling this need efficiently was easier said than done.

When it came time to look for a CDN that would be able to handle all their apps and allow for speedy downloads, they went the usual route. They investigated the tried & true “giants’ like Amazon (AWS) CloudFront and Google, only to find out that these services would have cost them nearly $30,000-80,000 a month! They wondered, “How does anyone expect a start-up to have that kind of money?!”

When we asked AppValley’s lead developer and co-founder, Cole, if he’d tried out other CDNs before finding BelugaCDN, he said: “I have, and after seeing the prices of the other companies I almost laughed myself out of my chair. We had a 10Gbps server before this and that was only around $1,000 a month for unlimited bandwidth. So I don’t see how we were supposed to afford the tens of thousands of dollar quotes we received from companies like Amazon, Google, and Akamai.”

App Valley Beluga signing

The high price of some of these CDNs is definitely daunting for bootstrapped startups or up-and-comers like AppValley. Signing on with Beluga ended up being a no-brainer because when they looked into us, they discovered that we had direct relationships with big ISPs, making us more than suitable for handling the large bandwidth demands of companies like AppValley. Also, our worldwide CDN beat the response time of some of the biggest players on the market like Akamai and AWS.

App Valley’s users needed speed of download above all else...why else go to their site? Once they started using BelugaCDN, they’ve experienced a more stable, consistent download speeds across the globe, making their users very happy.

When we asked Cole for feedback on our customer service, he said he has created numerous support tickets, and “The response time was amazingly fast and my issue was resolved in seconds. They even queried their engineers about a question I had. They definitely go above and beyond.” We love hearing that feedback!

BelugaCDN

If the big players aren’t working for you, check out BelugaCDN for the fastest global download times at the best price. We love seeing our customers happy and solving problems that other content delivery networks couldn’t (at least without charging tens of thousands of dollars!).

The testimonials speak for themselves: “I think BelugaCDN should be on the top of the player list. At first, I thought it was too good to be true. The prices were VERY cheap. But after trying it out, I really think Amazon and Akamai are going to have lots of trouble keeping up with BelugaCDN.”

Get in touch with us if you’re ready to set up CDN for your website or would like to learn more about CDN technology. Visit BelugaCDN.com and also check out the BelugaCDN Web Performance Blog.

[gdm-pixel]

Un nouvel article sur GDM-Pixel

Un nouvel article a été publié à l'adresse suivante : https://gdpx.fr/5qj

Réduire le nombre de fichiers pour améliorer ses temps de chargement

Réduire le nombre de fichiers de typos

Dans la vidéo concernant l’audit des temps de chargement, j’expliquai que le nombre de fichiers envoyés par votre serveur est un facteur crucial. Même si vous êtes en HTTP 2, un protocole plus rapide que HTTP 1, il est important d’optimiser ce qui est envoyé par votre serveur de pages (Apache ou Nginx).

Voilà les fichiers sur lesquels on pourra travailler :

Les polices de texte

Les CSS

Les JavaScript

Les images

Les vidéos

Normalement, sur du HTTP 2, on est moins tatillon à ce sujet, car HTTP 2 a le mérite d’envoyer plus de fichiers d’un coup au navigateur. Mais pour avoir testé sur de nombreux sites, en HTTP 1 ou en HTTP 2, avec ou sans concaténation de fichiers, je peux vous garantir que même en HTTP 2, le gain de temps n’est pas négligeable.

Les polices de texte

C’est du bon sens, mais je dois quand même en parler vu qu’il m’arrive de voir des horreurs en audit. Un bon design Web c’est deux polices de texte. Une pour les titres, et une pour les textes. Point barre. Rien de plus.

Le truc, c’est que de nombreux plug-ins proposent d’utiliser des polices personnalisées (la plupart du temps des Google fonts) et les ajoutent automatiquement. Il faut donc rester vigilant, parce que ça peut aller très vite de se retrouver avec six ou sept polices chargées dans le Head.

Si c’est le cas, il faudra dégreffer tout ça, soit manuellement directement dans le module, soit avec une fonction dans votre fichier functions.php.

Dégreffer Google font avec un module

Vous pouvez donc utiliser ce module pour dégager les Google Font . Pas très compliqué, mais ça fait installer un module de plus (et ça, on n’aime pas trop).

Dégreffer Google font grâce à une fonction

D’abord, repérez dans votre code source (dans le head) une ligne qui ressemble à ça :

<link rel="stylesheet" id="cf7md_roboto-css" href="//fonts.googleapis.com/css?family=Roboto:400,500" type="text/css" media="all">

Ce que vous voulez ici, c’est l’id de la typo importée (dans mon cas « cf7md_roboto-css »).

Puis, ajoutez ça au fichier functions.php de votre thème enfant :

Contenu réservé aux membres Inscrivez-vous gratuitement pour y accéder

Ou connectez-vous avec vos identifiants

Utilisateur:

Mot de passe:

S'inscrire

Mot de passe oublié ?

jQuery(document).ready( function() jQuery('#iump_login_username').on('blur', function() ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ); jQuery('#iump_login_password').on('blur', function() ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); ); jQuery('#ihc_login_form').on('submit', function(e) e.preventDefault(); var u = jQuery('#ihc_login_form [name=log]').val(); var p = jQuery('#ihc_login_form [name=pwd]').val(); if (u!='' && p!='') jQuery('#ihc_login_form').unbind('submit').submit(); else ihc_check_login_field('log', 'Veuillez compléter tous les champs !'); ihc_check_login_field('pwd', 'Veuillez compléter tous les champs !'); return FALSE; ); );

Vous remarquerez que j’ai tronqué le « -css » sur la troisième ligne. Sauvegardez le fichier, rechargez la page, et c’est nettoyé…

Les images

Oui, on peut réduire le nombre d’images qu’on envoie ! Par exemple en faisant un Sprite CSS. Il s’agit d’une technique qui consiste à mettre toutes les images de fond dans un seul fichier et de gérer la position des images dans les conteneurs via des directives CSS (background-image, background-position etc.).

Clairement, si vous en êtes là, c’est que vous êtes un véritable maniaque de l’optimisation. Vous pouvez créer votre Sprite à la main, ou utiliser un générateur en ligne si vous n’avez pas envie de vous prendre la tête. Je vous mets ci-dessous un exemple de Sprite CSS, avec le visuel et une partie du CSS qui va avec (on fera un tuto complet à ce sujet).

Un sprite que j’utilise sur le site

.gdm-ez-container h2::after background-repeat: no-repeat; background-image: url("/wp-content/uploads/separator.png"); width: 40px; height: 25px; position: absolute; content: ""; top: 7px; right: -66px; background-position: -47px -31px; /*ET BIEN ENTENDU, L'ELEMENT PARENT EST EN POSITION RELATIVE*/

Vous pouvez également utiliser un script de Lazyload pour ne charger les images que quand elles sont visibles sur la fenêtre. C’est clairement le meilleur moyen de réduire le temps de chargement lié aux images. Et vous avez de la chance, y a un tuto dédié à ce type de script ici 🙂

Notez également qu’on travaillera sur la taille et le poids des images (tuto à venir).

Les vidéos

S’il y a bien un truc qui bouffe de la bande passante, c’est les vidéos. Clairement, je déconseille d’héberger des vidéos directement sur votre serveur, car ce sont des fichiers supers lourds. Préférez l’utilisation d’hébergeurs spécialisés, comme YouTube ou Dailymotion.

Notez qu’il est possible d’appliquer du Lazyload sur les vidéos, y compris les vidéos embedded. Comme ça, vous résolvez le problème facilement…

Les JavaScript et les CSS

C’est ce qu’il y a de plus commun quand on veut travailler sur le nombre de fichiers envoyés : concaténer les JavaScript et les feuilles de style.

Concaténer, ça veut simplement dire qu’on va tous les regrouper dans un ou plusieurs fichiers. C’est une fonction proposée par la plupart des modules de cache.

Les avantages, c’est que moins vous avez de requêtes HTTP, plus la page chargera vite. L’inconvénient, c’est que, parfois, une concaténation trop agressive cassera le layout du site ou certaines fonctionnalités. On rentre un peu dans les détails…

Les CSS

Normalement, vous n’aurez que très rarement des problèmes d’affichage suite à la concaténation de CSS. Ça dépendra principalement du module que vous avez utilisé ou de la méthode employée. Personnellement, j’utilise Autoptimize depuis des années et je n’ai jamais eu de souci particulier, d’autant plus que vous pouvez exclure certains fichiers du processus si ça plante.

Pour WordPress, il existe pas mal de modules pour faire ça :

Autoptimize

Fast Velocity Minify

WP Fastest Cache

WP Optimize

WP Rocket

W3 Total Cache

etc

Vous n’avez que l’embarras du choix. Perso, je n’utilise pas de plugin de cache car j’ai déjà une solution qui s’exécute coté serveur (FastCGI). Je vous envoie au tuto sur Autoptimize si vous voulez en savoir plus.

Les JavaScript

Là, clairement, c’est casse-gueule. Concaténez les fichiers JavaScript dans le mauvais ordre, et certaines fonctionnalités du site sauteront. Là encore, Autoptimize fait des merveilles, et vous permet d’exclure les scripts qui ne fonctionnent pas.

Le principal inconvénient de la concaténation JavaScript, c’est que si quelque chose ne fonctionne plus, vous allez devoir retrouver le coupable pour l’ajouter à la liste d’exclusion. Ça nécessite donc de connaître parfaitement votre thème, vos plug-ins, et ça demande parfois quelques investigations. C’est donc réservé aux utilisateurs aguerris : je ne peux que vous encourager à tester (c’est en forgeant…).

[dragoni]

webdev webperf!

167 Tools 

146 Articles

73 Videos

50 Slidedecks

27 Books

6 Courses

25 Audits

[uwteam]

28 kwietnia 2023

◢ #unknownews ◣

Zapraszam do lektury najnowszego przeglądu subiektywnie najciekawszych znalezisk ze świata IT z ubiegłego tygodnia.

Już 8 maja rusza kolejna sprzedaż “Akademii Debugowania Linuxa”. Zobacz przykładowe lekcje i koniecznie zapisz się na listę oczekujących.

1) Street View z ukraińskich miast - zniszczenia wojenne https://theundeniablestreetview.com/ INFO: W czasach licznych fake newsów i dezinformacji, może to być ciekawym punktem odniesienia. Przejdź się ulicami ukraińskich miast i zobacz, jak wyglądają obecnie. W niektórych lokalizacjach dostępna jest także opcja podglądu poprzednich ujęć (before/after). 2) Jak działa Deep Learning? - wyjaśnienie dla osób nietechnicznych https://www.parand.com/a-completely-non-technical-explanation-of-ai.html INFO: Autor w ciekawy i przystępny sposób tłumaczy, jak działają metody używane w uczeniu maszynowym. 3) Prompt Injection w praktyce - gra online https://gpa.43z.one/ INFO: Spróbuj namówić sztuczną inteligencję (dostarczając jej odpowiedni prompt), aby zdradziła sekretne słowo, którego nie wolno jej zdradzać. Przyjemna gierka ucząca przy okazji podstaw ataków na prompty. 4) Lista 69 sposobów na zepsucie deploya https://kellyshortridge.com/blog/posts/69-ways-to-mess-up-your-deploy/ INFO: Ciekawa aInteresująca kompilacja zdecydowanie niewartych naśladowania praktyk stosowanych przez developerów, które mogą prowadzić do tragedii. Warto przeczytać. 5) Zbiór statystyk i trendów związanych ze sztuczną inteligencją https://epochai.org/trends INFO: Jak szybko rozwijają się modele AI? Na jak wielkich zbiorach danych są trenowane? Jak szybko wzrastają ceny uczenia modeli? Coś dla wielbicieli dużej porcji danych liczbowych i wykresów :) 6) SlashEscape - gra przygodowa bazująca na RegExpach https://www.therobinlord.com/projects/slash-escape INFO: Dość prosta gra, w której przechodzisz do kolejnych etapów, wyciągając z tekstu za pomocą wyrażeń regularnych ciągi znaków, o których wspomina scenariusz gry. 7) Czym jest i jak działa Load Balancing? https://samwho.dev/load-balancing/ INFO: Bardzo przystępnie wyjaśnione zagadnienie loadbalancingu na przykładzie serwerów HTTP. Załączone animacje świetnie tłumaczą różne algorytmy stosowane w tym procesie. 8) Spraw, aby spotkania w pracy były bardziej produktywne https://www.linkedin.com/feed/update/urn:li:activity:7032315724723298304/ INFO: Spotkania mogą być (i często są) tą najmniej produktywną częścią dnia, której ludzie z IT nie lubią. Oto garść porad, które można wprowadzić, aby nieco ulepszyć formułę spotkań i podnieść zarazem ich wpływ na produktywność. 9) Klaster Raspberry Pi bazujący na Turing Pi 2 https://www.milanvit.net/post/gallery-building-my-own-home-server/ INFO: Ciekawa konstrukcja złożona z czterech malinek robiących za domowy serwer/klaster. Całość bazuje na płycie głównej z Kickstartera, dedykowanej do obsługi takiej konstrukcji. Trzeba przyznać, że ciekawe rozwiązanie. 10) WebSecurity. Jak zrobić to… ŹLE - wykład z 'I love Dev 2022' (film, 55 minut) https://www.youtube.com/watch?v=IBSMbKQiNJw INFO: Nagranie wykładu na tematy luźno powiązane z websecurity. Jest coś o SPF, jest o certyfikatach SSL, trochę o cachowaniu danych, o wysyłaniu maili z własnej domeny itp. 11) Zbiór snippetów do poprawy wydajności stron WWW https://github.com/nucliweb/webperf-snippets INFO: Repozytorium zbierające krótkie kody JS mogące pomóc Ci w poprawie szybkości ładowania stron internetowych, które tworzysz oraz w znalezieniu elementów, które je spowalniają. 12) Zrozum matematykę za pomocą animacji https://www.3blue1brown.com/ INFO: Kolekcja filmów tłumaczących trudne zagadnienia matematyczne z użyciem estetycznych animacji. 13) Jak zainstalować AutoGPT na własnym komputerze? Poradnik https://scribe.rip/complete-guide-to-setup-autogpt-revolutionize-your-task-automation-with-gpt-4-39eda5a85821 INFO: O AutoGPT jest ostatnio głośno, ale niestety w przeciwieństwie do ChatGPT, nie ma do tej aplikacji interfejsu webowego, a trzeba samodzielnie zainstalować kilka paczek pythonowych, co sprawia, że projekt jest popularny głównie u osób technicznych. Okazuje się, że instalacja jest jednak dziecinnie prosta i ogranicza się do wydania zaledwie kilku poleceń w terminalu. 14) Czy można uruchomić Podmana w kontenerze? https://www.redhat.com/sysadmin/podman-inside-container INFO: Technologia do konteneryzacji uruchomiona wewnątrz innej technologii do konteneryzacji? Podman w Podmanie, Podman w Dockerze, Podman w Kubernetes... tak, to możliwe. Nie jest to łatwe, ale wykonalne. 15) Lost at SQL - gra ucząca składni SQL-a https://lost-at-sql.therobinlord.com/ INFO: Tekstowa gra przygodowa, w której rozwiązujesz kolejne problemy bohaterów z użyciem zapytań SQL. Zapytania piszesz w edytorze z podpowiadaniem składni, więc jest trochę łatwiej. Fajne! 16) PotatoP - laptop, którego bateria trzyma... 2 lata https://hackaday.io/project/184340-potatop INFO: Nie jest to oczywiście pełnoprawny laptop uruchamiający któryś z najpopularniejszych systemów operacyjnych, ale jest programowalny, posiada klawiaturę i wyświetlacz i uruchamia nawet Lispa. 17) Jak tworzyć strony przystępne dla osób z różnego rodzaju ograniczeniami? https://stackdiary.com/web-accessibility/ INFO: Bardzo rozbudowany poradnik opisujący udogodnienia, które można zaimplementować na stronach WWW, a które w znaczący sposób mogą podnieść komfort korzystania z nich przez osoby z ograniczeniami (problemy z postrzeganiem barw, zły kontrast, sterowanie klawiaturą, używanie czytników ekranu itp.). 18) Ściezki do plików w Windowsie są dziwniejsze, niż myślisz https://www.fileside.app/blog/2023-03-17_windows-file-paths/ INFO: Na ile różnych sposobów umiesz zapisać ścieżkę do pliku w Windowsie? 1-2? No to poznaj kilkanaście kolejnych. Czy jest to wiedza użyteczna? Oczywiście! Zabłyśniesz dzięki niej na spotkaniu z kolegami nerdami ;) 19) Przegląd typów baz danych https://blog.bytebytego.com/p/understanding-database-types INFO: Nie do końca rozumiesz różnice pomiędzy bazami NoSQL/SQL lub nie wiesz, która baza od AWS czy Azure spełni Twoje potrzeby? Zajrzyj do artykułu. 20) Pułapki związane z 'const' w JavaScript https://www.joshwcomeau.com/javascript/the-const-deception/ INFO: W JavaScript bardzo łatwo można stworzyć 'stałą', czyli definicję czegoś, co w teorii nigdy nie powinno się zmieniać. Jak to zwykle w JS bywa, działanie tego ficzera dalekie jest od logiki ;) 21) EWW - stwórz sobie kolekcję widgetów dla Linuksa https://github.com/elkowar/eww INFO: Framework do tworzenia widgetów na Linuxa, działa z każdym środowiskiem graficznym. W repozytorium znajdziesz linki do gotowych szablonów konfiguracji. 22) Kanały IPTV z całego świata https://github.com/iptv-org/iptv INFO: Playlista z kolekcją kanałów IPTV (Internet Protocol Television) z całego świata. Można je wrzucić np. do odtwarzacza VLC i oglądać. 23) Ataki na paczki pythonowe (film, 36 minut) https://www.youtube.com/watch?v=qcRLEtln-ZY INFO: Prelekcja Mateusza Chroboka, gościa specjalnego 57 edycji PyStok. Przegląd popularnych ostatnio form ataku. Mateusz wspomina także jak przeprowadzić przykładowy atak na ekosystemie Pythona i jak się przed nim chronić. 24) Czy ChatGPT potrafi napisać bezpieczny soft dla pentesterów? Sekurak sprawdził https://sekurak.pl/poprosilismy-chatgpt-zeby-przygotowal-narzedzie-przydatne-w-audycie-bezpieczenstwa-przygotowal-tyle-ze-z-krytyczna-podatnoscia-umozliwiajaca-przejecie-komputera-pentestera/ INFO: Autorzy artykułu poprosili ChatGPT o przygotowanie narzędzia, przydatnego przy audycie bezpieczeństwa. Udało się, ale... wraz z dziurą, która umożliwia przejęcie kontroli nad komputerem używającego. 25) FiraCode - darmowy font o stałej szerokości z ligaturami dla programistów https://github.com/tonsky/FiraCode INFO: Szukasz fonta, który sprawi, że Twój IDE będzie bardziej czytelny, a także zwróci uwagę na subtelne różnice w zapisie różnych ciągów znaków i ich kombinacji? Ten font może Ci się przydać 26) Porozmawiaj ze zmarłym dzięki AI? https://futurism.com/ai-dead-woman-talk-people-funeral INFO: Ciekawe zastosowanie sztucznej inteligencji w celu utworzenia wirtualnej kopii zmarłej osoby. Trochę zaczyna to przypominać sceny z filmu Black Mirror, ale z drugiej strony cel, w jakim powstał ten projekt (zachowanie wspomnień ludzi, którzy przeżyli holocaust) może być dobrym zastosowaniem dla AI. 27) Nowe opcje prywatności na ChatGPT https://openai.com/blog/new-ways-to-manage-your-data-in-chatgpt INFO: Od 25 kwietnia można już ustawień na ChatGPT opcję, która dezaktywuje historię chatu i zarazem sprawia, że dane wysyłane do okna chatu nie będą używane do trenowania modeli od OpenAI == LINKI TYLKO DLA PATRONÓW == 28) Lista najciekawszych repozytoriów AI na GitHubie https://uw7.org/un_3919a80b0a0d7 INFO: Zestawienie repozytoriów z dziedziny AI, którymi warto się zainteresować.